Navia’s visual identity blends aristocratic poise with tactical clarity, making her palette ideal for UI/UX and character-driven design references. Her signature Sunset Pearl #F2D37B appears as warm, gilded accents against the crisp White Linen #F7F2E6 that frames her silhouette, while the grounding Mirage #1E2A34 provides authoritative contrast. Designers searching for Navia color codes or ready-to-use HEX values will find this curated palette perfect for banners, menus, and refined interface elements that need a balance of elegance and readability.
Navia Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Sunset Pearl | #F2D37B | 242, 211, 123 | 0, 13, 49, 5 | |
| White Linen | #F7F2E6 | 247, 242, 230 | 0, 2, 7, 3 | |
| Mirage | #1E2A34 | 30, 42, 52 | 42, 19, 0, 80 | |
| Potters Clay | #8B6A3E | 139, 106, 62 | 0, 24, 55, 45 | |
| Contessa | #C86A75 | 200, 106, 117 | 0, 47, 42, 22 |
Navia CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Navia Genshin Impact Palette */
--navia-genshin-impact-sunset-pearl: #F2D37B;
--navia-genshin-impact-white-linen: #F7F2E6;
--navia-genshin-impact-mirage: #1E2A34;
--navia-genshin-impact-potters-clay: #8B6A3E;
--navia-genshin-impact-contessa: #C86A75;
}
More Genshin Impact Color Codes (Yellow Palette)
Navia CSS Gradients
Beautiful gradient backgrounds inspired by Navia’s aesthetic. Click to copy the CSS code.
Navia Color Scheme Breakdown
Sunset Pearl#F2D37B
Warm golden-yellow appears throughout Navia’s signature outfit accents and decorative trims, echoing her elegant, aristocratic Fontaine styling while reinforcing a bright, confident leader aura in her overall silhouette.
White Linen#F7F2E6
Soft ivory-white dominates her blouse and layered fabric panels, giving a refined, ceremonial feel; it also frames her face and accessories, enhancing the clean, high-class Fontaine fashion impression.
Mirage#1E2A34
Deep navy-charcoal is used in her coat body and structured garment sections, grounding the palette with authority and seriousness, and providing strong contrast to her lighter fabrics and gold ornamentation.
Potters Clay#8B6A3E
Muted warm brown shows up in belts, straps, and leather-like details around her outfit, conveying practical craftsmanship and a grounded, utilitarian edge beneath her otherwise polished noble presentation.
Contessa#C86A75
Dusty rose-pink appears in select ribbon-like accents and small ornamental elements, adding a fashionable, feminine highlight that softens the uniform structure and complements her composed, charismatic demeanor.
Navia 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Navia’s palette for a perfectly balanced visual hierarchy.
Navia UI Component Preview
Here is a live example of how the Navia color palette looks when applied to a modern UI component.
Navia
Fontaine Noble
“Grace and order make any plan unavoidable.”
Navia 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 Navia’s aesthetic.
- Main LED: 242, 211, 123
- Accent LED: 247, 242, 230
The Design Philosophy behind Navia’s Palette
The design philosophy behind Navia’s palette uses contrast and material cues to communicate rank, competence, and subtle warmth. Mirage (#1E2A34) functions as the primary structural color—deep and formal—establishing readability and silhouette weight in UI or costume blocks. White Linen (#F7F2E6) offers a ceremonial canvas that highlights facial focus and spacing, while Sunset Pearl (#F2D37B) injects leadership energy through small but high-impact accents. Potters Clay (#8B6A3E) grounds utilitarian details like straps and leather, and Contessa (#C86A75) adds fashionable, feminine highlights to soften rigid forms. For anyone searching Navia palette HEX codes, this mix achieves hierarchy, accessibility, and narrative cohesion in both graphic and interface design.
Best Navia Color Combinations
Regal Contrast
Deep Mirage with bright Sunset Pearl creates high-contrast focal points ideal for call-to-action buttons or leaderboard highlights.
Ceremonial Softness
White Linen paired with Contessa yields gentle, elegant accents perfect for form backgrounds and subtle badge styles.
Explore More Genshin Impact Character Color Codes
Download Navia Genshin Impact Color Palette
Navia .ASE Swatches
For Adobe Swatches & Procreate
Navia .SVG Palette
Vector Color Palette
Navia .PNG Image
High-Quality Palette Preview
FAQs about Navia Genshin Impact Color Codes
What is the standout accent color used for Navia’s ornamentation?
The prominent accent is Sunset Pearl — HEX #F2D37B.
Which HEX represents Navia’s main coat or principal outfit color?
Navia’s primary, grounding coat color is Mirage — HEX #1E2A34.
What HEX should I use for ribbon accents or small decorative details?
Use Contessa for ribbon-like highlights — HEX #C86A75.






