Navia (Genshin Impact) Color Codes, Palette & HEX Guide — UI/UX Reference

Navia (Genshin Impact) Color Codes, Palette & HEX Guide — UI/UX Reference

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.

Sunset Pearl
#F2D37B
White Linen
#F7F2E6
Mirage
#1E2A34
Potters Clay
#8B6A3E
Contessa
#C86A75

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;
}

Navia CSS Gradients

Beautiful gradient backgrounds inspired by Navia’s aesthetic. Click to copy the CSS code.

Click to Copy CSS
Sunset Pearl to Potters Clay#F2D37B → #8B6A3E
Click to Copy CSS
Mirage to Sunset Pearl#1E2A34 → #F2D37B

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.

60% Background
#F7F2E6
30% Primary
#1E2A34
10% Accent
#F2D37B

Use White Linen (#F7F2E6) for large background spaces, Mirage (#1E2A34) for primary text and structural UI elements, and vibrant Sunset Pearl (#F2D37B) exclusively for call-to-action buttons and important highlights.

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.

Download Navia Genshin Impact Color Palette

ASE

Navia .ASE Swatches

For Adobe Swatches & Procreate

SVG

Navia .SVG Palette

Vector Color Palette

PNG

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.

Explore More Yellow Palettes Across Universes

Copied