Noelle’s design balances duty and warmth through a restrained, functional palette that reads exceptionally well for UI/UX and fan-art applications. Her dominant off-white Pampas (#F2F0EC) establishes a pristine, disciplined canvas, while Rock (#4A3A33) anchors hair and leather with reliable warmth and Roti (#C9A24E) supplies metallic highlights that read as ceremonial gold. For designers searching for “Noelle color codes” or “Genshin Impact palette HEX” this palette offers clear, accessible values for creating cohesive assets, icons, or UI components that emphasize solidity, service, and Geo-themed elegance.
Noelle Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Pampas | #F2F0EC | 242, 240, 236 | 0, 1, 2, 5 | |
| Rock | #4A3A33 | 74, 58, 51 | 0, 22, 31, 71 | |
| Roti | #C9A24E | 201, 162, 78 | 0, 19, 61, 21 | |
| Waikawa Gray | #5B6F9B | 91, 111, 155 | 41, 28, 0, 39 | |
| Flint | #6E6A66 | 110, 106, 102 | 0, 4, 7, 57 |
Noelle CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Noelle Genshin Impact Palette */
--noelle-genshin-impact-pampas: #F2F0EC;
--noelle-genshin-impact-rock: #4A3A33;
--noelle-genshin-impact-roti: #C9A24E;
--noelle-genshin-impact-waikawa-gray: #5B6F9B;
--noelle-genshin-impact-flint: #6E6A66;
}More Genshin Impact Color Codes (White Palette)
Noelle CSS Gradients
Beautiful gradient backgrounds inspired by Noelle’s aesthetic. Click to copy the CSS code.
Noelle Color Scheme Breakdown
Pampas#F2F0EC
This soft off-white dominates Noelle’s maid-knight dress panels and apron-like sections, conveying cleanliness, duty, and the pristine, disciplined image she projects as a steadfast Geo defender.
Rock#4A3A33
This deep cocoa-brown reads in her hair and some leather accents, grounding the design with warmth and reliability while balancing the brighter whites and metallic elements.
Roti#C9A24E
This muted gold appears in armor trims, buckles, and ornamental emblems, reinforcing her knightly status and hinting at the dignified, ceremonial tone of Favonius-inspired styling.
Waikawa Gray#5B6F9B
This steel-leaning desaturated blue shows on ribbon details and cloth accents, adding a calm, orderly counterpoint that supports her composed personality and formal uniform-like silhouette.
Flint#6E6A66
This neutral stone grey is present across her armored plates and metal components, emphasizing resilience and practicality, and visually tying her defensive role to sturdy, grounded materials.
Noelle 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Noelle’s palette for a perfectly balanced visual hierarchy.
Noelle UI Component Preview
Here is a live example of how the Noelle color palette looks when applied to a modern UI component.
Noelle
Geo Maid Knight
“I will be your shield!”
Noelle 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 Noelle’s aesthetic.
- Main LED: 242, 240, 236
- Accent LED: 74, 58, 51
The Design Philosophy behind Noelle’s Palette
The design philosophy behind Noelle’s palette is contrast through restraint: a light, clean base tone paired with earthy neutrals and muted metallics to convey knightly reliability rather than flashy heroics. Pampas (#F2F0EC) suggests cleanliness and duty; Flint (#6E6A66) and Rock (#4A3A33) communicate armor, utility, and tactile materials; Roti (#C9A24E) and Waikawa Gray (#5B6F9B) provide modest accents that imply rank and formality without overpowering. This combination succeeds because it supports her narrative as a steadfast Geo defender and translates directly into practical HEX pairings for UI designers seeking usable, story-driven color codes and accessible contrast ratios.
Best Noelle Color Combinations
Knightly Base & Armor
A clean off-white base (#F2F0EC) with neutral stone grey (#6E6A66) creates readable interfaces and a grounded, utilitarian aesthetic.
Ceremonial Accent Pair
Muted gold (#C9A24E) with desaturated steel-blue (#5B6F9B) produces elegant contrast for badges, trims, and callouts while keeping a formal tone.
Explore More Genshin Impact Character Color Codes
Download Noelle Genshin Impact Color Palette
Noelle .ASE Swatches
For Adobe Swatches & Procreate
Noelle .SVG Palette
Vector Color Palette
Noelle .PNG Image
High-Quality Palette Preview
FAQs about Noelle Genshin Impact Color Codes
What is the hex color for Noelle’s hair?
Noelle’s hair reads as a deep cocoa-brown: #4A3A33.
What are the primary outfit/base colors for Noelle’s uniform?
The main outfit uses a soft off-white and neutral metal tones, notably Pampas #F2F0EC and Flint #6E6A66.
Which HEX codes cover Noelle’s decorative accents and trims?
Her metallic trims and ribbons are represented by Roti #C9A24E and Waikawa Gray #5B6F9B for subtle, ceremonial accents.
