Yelan is a calculating, enigmatic Hydro operative whose visual design balances covert elegance with elemental clarity. Her primary #1F3A8A Jacksons Purple anchors the silhouette while bright highlights like #5AA9E6 Blue Jeans punctuate skill effects; warm metallics such as #C9A227 Hokey Pokey add a touch of status and contrast. For UI/UX and character-driven projects searching for Yelan color codes or Yelan palette HEX references, this concise guide explains how to use these exact HEX values to recreate her stealthy, high-tech aesthetic in interfaces, concept art, and branding.
Yelan Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Jacksons Purple | #1F3A8A | 31, 58, 138 | 78, 58, 0, 46 | |
| Blue Jeans | #5AA9E6 | 90, 169, 230 | 61, 27, 0, 10 | |
| White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | |
| Ebony | #111827 | 17, 24, 39 | 56, 38, 0, 85 | |
| Hokey Pokey | #C9A227 | 201, 162, 39 | 0, 19, 81, 21 |
Yelan CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Yelan Genshin Impact Palette */
--yelan-genshin-impact-jacksons-purple: #1F3A8A;
--yelan-genshin-impact-blue-jeans: #5AA9E6;
--yelan-genshin-impact-white: #FFFFFF;
--yelan-genshin-impact-ebony: #111827;
--yelan-genshin-impact-hokey-pokey: #C9A227;
}More Genshin Impact Color Codes (Blue Palette)
Yelan CSS Gradients
Beautiful gradient backgrounds inspired by Yelan’s aesthetic. Click to copy the CSS code.
Yelan Color Scheme Breakdown
Jacksons Purple#1F3A8A
A deep sapphire-blue used across Yelan’s main bodysuit and coat panels, defining her sleek silhouette and conveying calm, covert authority befitting an intelligence agent-like Hydro character.
Blue Jeans#5AA9E6
A bright hydro-cyan seen in her glowing accessories and skill effects, reinforcing her elemental identity while adding a crisp, high-tech pop against the darker outfit base.
White#FFFFFF
Clean white appears most prominently as the plush fur collar and select trim accents, creating strong contrast, emphasizing luxury and confidence, and visually framing her face and upper body.
Ebony#111827
Near-black is used for gloves, tights, and several structural clothing sections, grounding the palette, sharpening the stealthy vibe, and making the blue tones read more vivid.
Hokey Pokey#C9A227
A muted gold is present in jewelry-like details and metallic fasteners, signaling high status and refined taste while providing a warm counterpoint to her predominantly cool Hydro blues.
Yelan 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Yelan’s palette for a perfectly balanced visual hierarchy.
Yelan UI Component Preview
Here is a live example of how the Yelan color palette looks when applied to a modern UI component.
Yelan
Hydro Operative
“Everything has a price.”
Yelan 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 Yelan’s aesthetic.
- Main LED: 31, 58, 138
- Accent LED: 90, 169, 230
The Design Philosophy behind Yelan’s Palette
The design philosophy behind Yelan’s palette uses contrast and narrative signaling to reflect her role and backstory. Deep tones like #1F3A8A Jacksons Purple and near-black #111827 Ebony establish a covert, authoritative presence that reads like an intelligence operative, while the vivid #5AA9E6 Blue Jeans communicates Hydro energy and tech-like luminosity during abilities. Strategic white (#FFFFFF) trims frame the face and suggest refinement, and muted gold #C9A227 Hokey Pokey provides high-status accents that humanize the cold blues. Together these HEX choices create readable hierarchy, ensure accessibility in UI elements, and make the character instantly recognizable across thumbnails and promotional assets.
Best Yelan Color Combinations
Hydro Core Duo
Deep Jacksons Purple paired with bright Blue Jeans delivers readable contrast for primary CTA and hover states while preserving Hydro theming.
Noir Accent Pair
Ebony with muted gold creates elegant emphasis for icons, badges, and metallic details without overpowering the cool palette.
Explore More Genshin Impact Character Color Codes
Download Yelan Genshin Impact Color Palette
Yelan .ASE Swatches
For Adobe Swatches & Procreate
Yelan .SVG Palette
Vector Color Palette
Yelan .PNG Image
High-Quality Palette Preview
FAQs about Yelan Genshin Impact Color Codes
What is the main color of Yelan’s bodysuit and coat panels?
The primary color is #1F3A8A (Jacksons Purple).
What is the grounding or base color used across her outfit?
Her outfit uses near-black grounding with #111827 (Ebony) for gloves, tights, and structural sections.
What are the accent or glow colors for her accessories and details?
Glowing accessories and skill effects use #5AA9E6 (Blue Jeans), while jewelry and fasteners use #C9A227 (Hokey Pokey).
