Clara from Honkai Star Rail presents a soft yet striking visual identity that balances pastel whimsy with grounded accents. Her primary hair hue Fog (#DCC6FF) and soft fur trims set a dreamy baseline, while the dress panels in White (#FFFFFF) preserve crisp silhouettes for UI readability. Strategic pops like Hot Pink (#FF6FAF) punctuate key focal points such as ribbons and emblems, useful for designers searching Clara color codes or HEX values for palettes and asset work. This concise color palette is ideal for UI/UX projects that need approachable charm with clear interactive highlights.
Clara Honkai Star Rail Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Fog | #DCC6FF | 220, 198, 255 | 14, 22, 0, 0 | |
| White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | |
| Hot Pink | #FF6FAF | 255, 111, 175 | 0, 56, 31, 0 | |
| Cream Can | #F2C85C | 242, 200, 92 | 0, 17, 62, 5 | |
| Jacarta | #4A2C6F | 74, 44, 111 | 33, 60, 0, 56 |
Clara CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Clara Honkai Star Rail Palette */
--clara-honkai-star-rail-fog: #DCC6FF;
--clara-honkai-star-rail-white: #FFFFFF;
--clara-honkai-star-rail-hot-pink: #FF6FAF;
--clara-honkai-star-rail-cream-can: #F2C85C;
--clara-honkai-star-rail-jacarta: #4A2C6F;
}More Honkai: Star Rail Color Codes (Purple Palette)
Clara CSS Gradients
Beautiful gradient backgrounds inspired by Clara’s aesthetic. Click to copy the CSS code.
Clara Color Scheme Breakdown
Fog#DCC6FF
This pale lavender serves as Clara’s primary hair color and soft fur trims, anchoring her gentle, otherworldly visual identity while harmonizing with cooler outfit tones and narrative cues.
White#FFFFFF
Bright off-white used across Clara’s main dress and underskirt panels, providing contrast to pastel purples while emphasizing purity, mechanical detailing, and readable silhouettes in both combat and idle poses, sans shading.
Hot Pink#FF6FAF
Vibrant magenta appears on Clara’s ribbon, small trims and emblem accents, injecting energetic focal points that punctuate the pastel palette, signaling playful personality beats and interactive skill visual pops during animations.
Cream Can#F2C85C
Warm gold used for Clara’s buckles, trim and accessory filigree, creating regal contrast that reads as metallic ornamentation and guiding the eye across costume silhouette and equipment design during idle poses.
Jacarta#4A2C6F
Deep violet employed for Clara’s boots, inner coat lining and weapon base, grounding the palette with weight, enhancing silhouette legibility and offering a dark anchor against the airy pastels during combat animations.
Clara 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Clara’s palette for a perfectly balanced visual hierarchy.
Clara UI Component Preview
Here is a live example of how the Clara color palette looks when applied to a modern UI component.
Clara
Support Operative
“I’ll always be by your side!”
Clara 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 Clara’s aesthetic.
- Main LED: 220, 198, 255
- Accent LED: 255, 255, 255
The Design Philosophy behind Clara’s Palette
The design philosophy behind Clara’s palette uses contrast and hierarchy to communicate personality and function: airy pastels speak to gentleness and accessibility, while a deep anchor hue grounds motion and combat presence. Fog (#DCC6FF) reads as ethereal hair and trim, White (#FFFFFF) maintains silhouette clarity in both still and animated states, and Jacarta (#4A2C6F) supplies weight for boots and weapon bases. Accent choices like Hot Pink (#FF6FAF) and Cream Can (#F2C85C) create attention hotspots for skills and gear. For designers seeking Clara HEX color codes, the scheme exemplifies how limited tones can convey narrative, readability, and interactive affordance in UI/UX.
Best Clara Color Combinations
Pastel Anchor
A delicate lavender (#DCC6FF) paired with deep violet (#4A2C6F) balances ethereal softness with visual weight for strong silhouette and depth.
Pure Pop Accent
Clean white (#FFFFFF) offers a neutral canvas while hot pink (#FF6FAF) functions as an immediate focal accent for CTAs and interactive elements.
Explore More Honkai: Star Rail Character Color Codes
Download Clara Honkai Star Rail Color Palette
Clara .ASE Swatches
For Adobe Swatches & Procreate
Clara .SVG Palette
Vector Color Palette
Clara .PNG Image
High-Quality Palette Preview
FAQs about Clara Honkai Star Rail Color Codes
What is Clara’s hair color HEX code?
Clara’s primary hair and soft fur trim color is Fog, HEX #DCC6FF.
What are the main outfit and grounding colors in Clara’s palette?
The outfit reads primarily in White (#FFFFFF) for panels and Fog (#DCC6FF) for soft elements, grounded by Jacarta (#4A2C6F) on boots and linings.
Which HEX codes represent Clara’s accent and metallic details?
Accent and emblem pops use Hot Pink (#FF6FAF), while metallic buckles and filigree use Cream Can (#F2C85C).
