Xiao’s visual identity blends supernatural energy with a solemn warrior aesthetic, making his palette essential for UI/UX designers and fans searching for exact color codes. The vibrant Turquoise #2FC7B6 captures his Anemo energy and tattoo glow, while Limed Spruce #3A4E4F anchors his layered garments in a restrained, charcoal-green tone; Aztec Gold #C8A055 appears on ornaments to suggest ritual prestige. For anyone looking up Xiao HEX codes or color palette references, these hues define a character who is both otherworldly and grounded—perfect for themed interfaces, overlays, and character art.
Xiao Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Turquoise | #2FC7B6 | 47, 199, 182 | 76, 0, 9, 22 | |
| Limed Spruce | #3A4E4F | 58, 78, 79 | 27, 1, 0, 69 | |
| Buccaneer | #5A2B35 | 90, 43, 53 | 0, 52, 41, 65 | |
| Mystic | #E9EDF2 | 233, 237, 242 | 4, 2, 0, 5 | |
| Aztec Gold | #C8A055 | 200, 160, 85 | 0, 20, 58, 22 |
Xiao CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Xiao Genshin Impact Palette */
--xiao-genshin-impact-turquoise: #2FC7B6;
--xiao-genshin-impact-limed-spruce: #3A4E4F;
--xiao-genshin-impact-buccaneer: #5A2B35;
--xiao-genshin-impact-mystic: #E9EDF2;
--xiao-genshin-impact-aztec-gold: #C8A055;
}More Genshin Impact Color Codes (Green Palette)
Xiao CSS Gradients
Beautiful gradient backgrounds inspired by Xiao’s aesthetic. Click to copy the CSS code.
Xiao Color Scheme Breakdown
Turquoise#2FC7B6
This vivid teal is most recognizable in Xiao’s Anemo energy effects and tattoo glow, acting as his signature supernatural aura and instantly signaling his wind-aligned Yaksha power.
Limed Spruce#3A4E4F
A deep greenish charcoal appears across his sleeveless top and layered outfit pieces, grounding the design with a stoic, restrained tone that matches his guarded personality.
Buccaneer#5A2B35
This muted wine-red shows on Xiao’s pants and cloth sections, adding solemn warmth and contrast against the greens, hinting at lingering karmic burden and past battles.
Mystic#E9EDF2
An off-white to pale grey is used on prominent fabric panels and trims, giving crisp separation between dark garments and glowing accents, reinforcing his clean, sharp silhouette.
Aztec Gold#C8A055
A subdued gold appears on ornaments and accessory details, echoing adepti craftsmanship and ceremonial heritage, while providing a refined highlight that reads as sacred and prestigious.
Xiao 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Xiao’s palette for a perfectly balanced visual hierarchy.
Xiao UI Component Preview
Here is a live example of how the Xiao color palette looks when applied to a modern UI component.
Xiao
Vigilant Yaksha
“I am a Yaksha, not a god.”
Xiao 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 Xiao’s aesthetic.
- Main LED: 47, 199, 182
- Accent LED: 58, 78, 79
The Design Philosophy behind Xiao’s Palette
The design philosophy behind Xiao’s palette uses contrast and narrative symbolism to convey his story: an energetic teal (Turquoise #2FC7B6) signals his Yaksha power and movement, set against the brooding Limed Spruce #3A4E4F and Buccaneer #5A2B35 that imply burden and ancient conflict. Mystic #E9EDF2 provides crisp separation on fabrics and trims, while Aztec Gold #C8A055 supplies ceremonial highlights that read as crafted and sacred. For UI/UX practitioners searching for Xiao color codes or HEX palette references, this combination balances high-visibility accents with muted neutrals, enabling clear hierarchy, readable overlays, and cohesive thematic branding in game-related interfaces.
Best Xiao Color Combinations
Anemo Signature Contrast
Bright Turquoise paired with dark Limed Spruce creates a vivid energy accent over a grounded base, ideal for call-to-action elements and aura effects.
Solemn Accent Duo
Muted wine-red contrasted with subdued Aztec Gold produces ceremonial warmth and readable ornamentation for icons and badges.
Explore More Genshin Impact Character Color Codes
Download Xiao Genshin Impact Color Palette
Xiao .ASE Swatches
For Adobe Swatches & Procreate
Xiao .SVG Palette
Vector Color Palette
Xiao .PNG Image
High-Quality Palette Preview
FAQs about Xiao Genshin Impact Color Codes
What is the color of Xiao’s Anemo energy and tattoos?
Xiao’s Anemo energy and tattoo glow are represented by Turquoise — HEX #2FC7B6.
What is the primary clothing or base color used on Xiao’s outfit?
The main layered clothing tone is Limed Spruce — HEX #3A4E4F, a deep greenish charcoal used across his top and garments.
Which color is used for Xiao’s ornaments and accessory highlights?
Ornaments and accessories use a subdued gold tone, Aztec Gold — HEX #C8A055, for ceremonial emphasis.
