Yaoyao’s design reads like a compact herbalist’s storybook: youthful, nurturing, and tied to nature. Her palette places Mantis (#8FCB6A) as the signature leaf tone, balanced by sunny Cream Can (#F4C85A) and grounded neutrals like Coral Reef (#C7B9A7), creating a readably bright silhouette ideal for character-driven UI color references. For designers searching for Yaoyao color codes or HEX palette inspiration, these exact values deliver both personality and practical contrast for buttons, avatars, and component states in game or fan UI projects.
Yaoyao Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Mantis | #8FCB6A | 143, 203, 106 | 30, 0, 48, 20 | |
| Cream Can | #F4C85A | 244, 200, 90 | 0, 18, 63, 4 | |
| Terracotta | #E07B65 | 224, 123, 101 | 0, 45, 55, 12 | |
| Coral Reef | #C7B9A7 | 199, 185, 167 | 0, 7, 16, 22 | |
| Shingle Fawn | #6A4A36 | 106, 74, 54 | 0, 30, 49, 58 |
Yaoyao CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Yaoyao Genshin Impact Palette */
--yaoyao-genshin-impact-mantis: #8FCB6A;
--yaoyao-genshin-impact-cream-can: #F4C85A;
--yaoyao-genshin-impact-terracotta: #E07B65;
--yaoyao-genshin-impact-coral-reef: #C7B9A7;
--yaoyao-genshin-impact-shingle-fawn: #6A4A36;
}More Genshin Impact Color Codes (Green Palette)
Yaoyao CSS Gradients
Beautiful gradient backgrounds inspired by Yaoyao’s aesthetic. Click to copy the CSS code.
Yaoyao Color Scheme Breakdown
Mantis#8FCB6A
A bright mint-green used across Yaoyao’s outfit accents and leaf-like motifs, echoing Liyue’s herbal vibe and her Dendro affiliation while keeping her overall silhouette youthful and lively.
Cream Can#F4C85A
A warm golden-yellow seen on her main tunic panels and decorative trims, reinforcing a cheerful, childlike energy and matching the sunny, nurturing tone of her healer-like companion theme.
Terracotta#E07B65
A soft coral-orange appearing on ribbons, cloth details, and small ornament areas, adding warmth and approachability while balancing the greens and yellows with a playful pop-culture charm.
Coral Reef#C7B9A7
A light beige used for underlayers and fabric sections, acting as a calm neutral that keeps the costume readable and traditional, letting the brighter accents carry the character’s identity.
Shingle Fawn#6A4A36
A medium warm brown present in her hair and small accessory elements, grounding the palette with an earthy tone that supports the Dendro, nature-and-herbalist impression of Yaoyao.
Yaoyao 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Yaoyao’s palette for a perfectly balanced visual hierarchy.
Yaoyao UI Component Preview
Here is a live example of how the Yaoyao color palette looks when applied to a modern UI component.
Yaoyao
Dendro Healer
“I’ll protect the forest and my friends!”
Yaoyao 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 Yaoyao’s aesthetic.
- Main LED: 143, 203, 106
- Accent LED: 244, 200, 90
The Design Philosophy behind Yaoyao’s Palette
The design philosophy behind Yaoyao’s colors uses nature-first storytelling: green for Dendro identity, warm yellow for caretaking energy, and soft neutrals to imply tradition and approachability. Developers combine Mantis (#8FCB6A) with Cream Can (#F4C85A) to signal vitality and friendliness, while Terracotta (#E07B65) provides playful accenting that reads well at small scales. Coral Reef (#C7B9A7) and Shingle Fawn (#6A4A36) act as grounding tones for readability and hair/accessory fidelity. This palette succeeds because it balances contrast and harmony, giving clear visual hierarchy and usable HEX codes for UI/UX designers needing reliable color tokens and accessible component styling.
Best Yaoyao Color Combinations
Herbal Accent
Mantis and Cream Can pair to create a lively primary/secondary duo ideal for call-to-action buttons and active states.
Earthbound Anchor
Shingle Fawn with Coral Reef offers a stable text/background combo for panels and readable UI surfaces.
Explore More Genshin Impact Character Color Codes
Download Yaoyao Genshin Impact Color Palette
Yaoyao .ASE Swatches
For Adobe Swatches & Procreate
Yaoyao .SVG Palette
Vector Color Palette
Yaoyao .PNG Image
High-Quality Palette Preview
FAQs about Yaoyao Genshin Impact Color Codes
What is the color of Yaoyao’s leaf-like outfit accents?
The leaf-like accents are Mantis, HEX #8FCB6A.
What is the main tunic color on Yaoyao’s outfit?
The main tunic panels use Cream Can, HEX #F4C85A.
What color is used for Yaoyao’s ribbons and small ornament accents?
Ribbons and small ornaments use Terracotta, HEX #E07B65.
