Klee is Genshin Impact’s mischievous pyro child whose visual identity reads loud and clear through a tightly controlled palette. Her primary Flush Mahogany (#C93A3A) anchors the design with explosive energy, while Wheatfield (#F2E6C7) adds a warm, storybook softness and Azalea (#F6C7D2) supplies playful rosy notes. For anyone searching Klee color codes or Klee HEX palette for fan art, UI mockups, or branding references, these precise HEX values clarify how to recreate her spirited, adventurous look without guessing hues.
Klee Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Flush Mahogany | #C93A3A | 201, 58, 58 | 0, 71, 71, 21 | |
| Wheatfield | #F2E6C7 | 242, 230, 199 | 0, 5, 18, 5 | |
| Potters Clay | #8B5A3C | 139, 90, 60 | 0, 35, 57, 45 | |
| Tulip Tree | #E6A23A | 230, 162, 58 | 0, 30, 75, 10 | |
| Azalea | #F6C7D2 | 246, 199, 210 | 0, 19, 15, 4 |
Klee CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Klee Genshin Impact Palette */
--klee-genshin-impact-flush-mahogany: #C93A3A;
--klee-genshin-impact-wheatfield: #F2E6C7;
--klee-genshin-impact-potters-clay: #8B5A3C;
--klee-genshin-impact-tulip-tree: #E6A23A;
--klee-genshin-impact-azalea: #F6C7D2;
}More Genshin Impact Character Color Palettes Color Codes (Red Palette)
Klee CSS Gradients
Beautiful gradient backgrounds inspired by Klee’s aesthetic. Click to copy the CSS code.
Klee Color Scheme Breakdown
Flush Mahogany#C93A3A
Primary crimson seen on Klee’s coat, hat, and main outfit panels; it defines her bold, explosive Pyro identity and communicates energetic mischief, adventure, and a playful danger-at-heart vibe.
Wheatfield#F2E6C7
Warm cream-beige used on her inner clothing, collar, and soft fabric areas; it balances the intense reds, adding childlike softness, warmth, and an approachable, storybook innocence.
Potters Clay#8B5A3C
Chestnut brown appears on boots, backpack/leather straps, and small gear details; it grounds her bright palette, emphasizing practical adventurer equipment and the handcrafted, outdoorsy feel of her kit.
Tulip Tree#E6A23A
Golden-orange accents show on metal trims, buttons, and emblem highlights; it echoes sparks and bomb fuses, reinforcing her Pyro theme while adding lively contrast and a sense of gleaming treasure.
Azalea#F6C7D2
Soft pink-peach appears in facial blush and subtle rosy accents; it enhances her youthful, cheerful expression and keeps the overall design cute, friendly, and unmistakably childlike despite explosive abilities.
Klee 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Klee’s palette for a perfectly balanced visual hierarchy.
Klee UI Component Preview
Here is a live example of how the Klee color palette looks when applied to a modern UI component.
Klee
Pyro Bombardier
“Kaboom!”
Klee 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 Klee’s aesthetic.
- Main LED: 201, 58, 58
- Accent LED: 242, 230, 199
The Design Philosophy behind Klee’s Palette
The design philosophy behind Klee’s colors uses contrast and narrative cohesion to translate personality into pixels. Flush Mahogany (#C93A3A) reads as immediate Pyro signaling — bold, youthful, and mischievous — while Wheatfield (#F2E6C7) provides a neutral, tactile counterpoint that softens and humanizes the palette. Potters Clay (#8B5A3C) grounds the composition with utilitarian, leather-like notes, and Tulip Tree (#E6A23A) functions as metallic highlight to evoke sparks and fuse details; Azalea (#F6C7D2) gives facial warmth and innocence. For designers referencing HEX color codes, this combination balances readability, emotional storytelling, and iconography — a model for character-driven UI or illustration palettes.
Best Klee Color Combinations
Playful Contrast
Bold crimson (#C93A3A) against warm cream (#F2E6C7) creates legible, childlike contrast ideal for primary actions and hero areas.
Earth & Ember Accent
Chestnut brown (#8B5A3C) with golden-orange (#E6A23A) gives durable, crafted UI elements a lively metallic accent and visual hierarchy.
Explore More Genshin Impact Character Color Palettes Character Color Codes
Download Klee Genshin Impact Color Palette
Klee .ASE Swatches
For Adobe Swatches & Procreate
Klee .SVG Palette
Vector Color Palette
Klee .PNG Image
High-Quality Palette Preview
FAQs about Klee Genshin Impact Color Codes
What is the exact HEX for Klee’s signature red Pyro coat?
Klee’s signature coat color is Flush Mahogany: #C93A3A.
Which HEX represents Klee’s soft inner clothing and neutral tones?
The warm cream used for her inner clothing is Wheatfield: #F2E6C7.
What HEXs are used for Klee’s accents like blush and metallic highlights?
Her blush and rosy accents use Azalea #F6C7D2, while metallic trims and highlights use Tulip Tree #E6A23A.
