Collei is a young Sumeru ranger from Genshin Impact whose wardrobe reads like practical woodland storytelling. Her signature Sea Green #2F7F4E anchors jacket panels, while parchment Hampton #E7D7B0 softens inner layers and Millbrook brown #6B4A3A grounds belts and trims; these HEX color codes are ideal for designers searching character color codes or palettes. The overall scheme favors organic, muted tones that suggest calm resilience over flashy saturation, making Collei’s palette a reliable reference for UI/UX themes, icons, and accessible color systems. Designers can copy these HEX values directly for brand or asset work.
Collei Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Sea Green | #2F7F4E | 47, 127, 78 | 63, 0, 39, 50 | |
| Hampton | #E7D7B0 | 231, 215, 176 | 0, 7, 24, 9 | |
| Millbrook | #6B4A3A | 107, 74, 58 | 0, 31, 46, 58 | |
| Woody Brown | #3A2D2B | 58, 45, 43 | 0, 22, 26, 77 | |
| Metallic Sunburst | #B07A3E | 176, 122, 62 | 0, 31, 65, 31 |
Collei CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Collei Genshin Impact Palette */
--collei-genshin-impact-sea-green: #2F7F4E;
--collei-genshin-impact-hampton: #E7D7B0;
--collei-genshin-impact-millbrook: #6B4A3A;
--collei-genshin-impact-woody-brown: #3A2D2B;
--collei-genshin-impact-metallic-sunburst: #B07A3E;
}More Genshin Impact Color Codes (Green Palette)
Collei CSS Gradients
Beautiful gradient backgrounds inspired by Collei’s aesthetic. Click to copy the CSS code.
Collei Color Scheme Breakdown
Sea Green#2F7F4E
A signature forest-green seen across Collei’s ranger outfit panels and fabric accents, anchoring her Sumeru/Forest Ranger identity and reading as calm resilience rather than aggressive, saturated neon green.
Hampton#E7D7B0
A warm parchment-beige used on her inner tunic, straps, and light cloth sections, giving a natural, outdoorsy canvas that softens the design and contrasts cleanly against her darker greens.
Millbrook#6B4A3A
An earthy brown appearing on belts, leather trims, and utility pieces, reinforcing the practical ranger aesthetic and grounding the palette with a crafted, travel-worn feel instead of polished, glossy fashion.
Woody Brown#3A2D2B
A deep near-black brown found in her undersuit, gloves, and shadowed garment blocks, adding structure and readability to silhouettes while keeping the overall look organic rather than stark pure black.
Metallic Sunburst#B07A3E
A muted amber-gold used in her ornament details and small metallic accents, echoing Dendro warmth and adding focal highlights that suggest heritage and charm without overpowering the dominant greens.
Collei 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Collei’s palette for a perfectly balanced visual hierarchy.
Collei UI Component Preview
Here is a live example of how the Collei color palette looks when applied to a modern UI component.
Collei
Dendro Ranger
“I’ll do my best!”
Collei Gaming Setup (RGB Peripherals)
Sync your gaming gear! Use these exact RGB values for your Razer Chroma, Corsair iCUE, or Logitech G Hub software to match Collei’s aesthetic.
- Main LED: 47, 127, 78
- Accent LED: 231, 215, 176
The Design Philosophy behind Collei’s Palette
Collei’s design philosophy uses restrained, narrative-driven color to communicate role and temperament: Sea Green #2F7F4E signals her forest and Dendro ties, Hampton #E7D7B0 provides a warm, readable canvas like weathered cloth, and browns such as Millbrook #6B4A3A and Woody Brown #3A2D2B emphasize utility and silhouette. Metallic Sunburst #B07A3E is applied sparingly to draw attention to ornaments without overwhelming the palette. This distribution prioritizes legibility, hierarchy, and emotional tone—muted primaries, neutral supports, and restrained accents—making the set effective for both character storytelling and practical UI/UX theming when extracting HEX codes for consistent interface design.
Best Collei Color Combinations
Ranger Base & Canvas
Sea Green paired with Hampton creates a readable primary/neutral pairing ideal for backgrounds and primary actions in nature-themed interfaces.
Utility Leather & Accent
Millbrook brown with Metallic Sunburst gives warm contrast for UI affordances and ornament highlights while keeping an earthy aesthetic.
Explore More Genshin Impact Character Color Codes
Download Collei Genshin Impact Color Palette
Collei .ASE Swatches
For Adobe Swatches & Procreate
Collei .SVG Palette
Vector Color Palette
Collei .PNG Image
High-Quality Palette Preview
FAQs about Collei Genshin Impact Color Codes
What is the color code of Collei’s signature ranger green?
Collei’s signature ranger green is Sea Green #2F7F4E.
What are the main outfit colors in Collei’s palette?
The primary outfit color is Sea Green #2F7F4E, supported by parchment Hampton #E7D7B0 and leather Millbrook #6B4A3A for trims.
Which HEX is used for Collei’s metallic accents or highlights?
The metallic accent is Metallic Sunburst #B07A3E; deep contrast elements use Woody Brown #3A2D2B as a near-black anchor.
