Yukong Honkai Star Rail Color Codes Palette – HEX Guide for UI/Graphic

Yukong Honkai Star Rail Color Codes Palette – HEX Guide for UI/Graphic

Yukong from Honkai Star Rail is a striking blend of martial authority and ceremonial flamboyance, embodied through a carefully tuned color palette that supports both character and UI/graphic uses. The design centers on a deep crimson #B71C1C (Thunderbird) for robes and sashes, balanced by metallic highlights like #FFCC4D (Sunglow) and grounded with #2B2B2B (Mine Shaft) for hair and accents. For designers hunting precise color codes or HEX swatches, Yukong’s palette offers clear contrast, cultural signaling, and animation-friendly tones ideal for character art, promotional layouts, and interface accents.

Thunderbird
#B71C1C
Sunglow
#FFCC4D
Mine Shaft
#2B2B2B
Spring Wood
#F6F3EE
Tahiti Gold
#D97706

Yukong Honkai Star Rail Color Codes: HEX, RGB, CMYK

Preview Color Name HEX RGB CMYK
Thunderbird #B71C1C 183, 28, 28 0, 85, 85, 28
Sunglow #FFCC4D 255, 204, 77 0, 20, 70, 0
Mine Shaft #2B2B2B 43, 43, 43 0, 0, 0, 83
Spring Wood #F6F3EE 246, 243, 238 0, 1, 3, 4
Tahiti Gold #D97706 217, 119, 6 0, 45, 97, 15

Yukong CSS & Tailwind Color Variables

Select your preferred format and copy the ready-to-use CSS variables for your web projects.

:root {
/* Yukong Honkai Star Rail Palette */
--yukong-honkai-star-rail-thunderbird: #B71C1C;
--yukong-honkai-star-rail-sunglow: #FFCC4D;
--yukong-honkai-star-rail-mine-shaft: #2B2B2B;
--yukong-honkai-star-rail-spring-wood: #F6F3EE;
--yukong-honkai-star-rail-tahiti-gold: #D97706;
}

Yukong CSS Gradients

Beautiful gradient backgrounds inspired by Yukong’s aesthetic. Click to copy the CSS code.

Click to Copy CSS
Thunderbird to Spring Wood#B71C1C → #F6F3EE
Click to Copy CSS
Mine Shaft to Thunderbird#2B2B2B → #B71C1C

Yukong Color Scheme Breakdown

Thunderbird#B71C1C

This deep crimson covers Yukong’s primary robe and combat sash, defining his bold silhouette and martial presence while evoking traditional warrior symbolism and the character’s fiery, impulsive temperament in the game’s visuals.

Sunglow#FFCC4D

A warm golden yellow used for ornate trim, wristguards, and head ornamentation, highlighting ceremonial heritage and Sun King allusions while adding metallic contrast that reads as prestige and vitality in animations and promotional art.

Mine Shaft#2B2B2B

Near-black tones appear on Yukong’s hair, boots, and weapon accents to anchor the palette, emphasize silhouette clarity in combat poses, and communicate a grounded, pragmatic edge beneath flamboyant costume elements.

Spring Wood#F6F3EE

A soft off-white trims cuffs, fur linings, and facial markings, providing high-contrast separation against darker garments while suggesting ceremonial purity and traditional tailoring in the character’s cultural visual distinctive motifs.

Tahiti Gold#D97706

A burnt orange appears on sashes, small accessories, and energy effect glows, injecting warmth and motion into scenes while referencing Monkey King-inspired, playful exuberance and bridging red and gold elements cohesively.

Yukong 60-30-10 Design Rule

Apply the classic 60-30-10 UI design rule using Yukong’s palette for a perfectly balanced visual hierarchy.

60% Background
#F6F3EE
30% Primary
#2B2B2B
10% Accent
#B71C1C

Use Spring Wood (#F6F3EE) for large background spaces, Mine Shaft (#2B2B2B) for primary text and structural UI elements, and vibrant Thunderbird (#B71C1C) exclusively for call-to-action buttons and important highlights.

Yukong UI Component Preview

Here is a live example of how the Yukong color palette looks when applied to a modern UI component.

Yukong

Imperial Flame Warrior

“By sun and steel, I stand unbowed.”

Yukong 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 Yukong’s aesthetic.

  • Main LED: 183, 28, 28
  • Accent LED: 255, 204, 77

The Design Philosophy behind Yukong’s Palette

The design philosophy behind Yukong uses chromatic storytelling: bold primary red (#B71C1C) communicates aggression and ritual prestige, while golden trim (#FFCC4D) signals ceremonial lineage and visual hierarchy. Near-black anchors (#2B2B2B) provide silhouette clarity in fast poses and UI thumbnails, and off-white highlights (#F6F3EE) create crisp separation for facial markings and trims. Burnt orange (#D97706) acts as a kinetic bridge between red and gold, useful for energy effects and actionable highlights. This palette succeeds because it balances high-contrast readability with cultural motifs, giving artists and UI designers reliable HEX references and color codes to preserve intent across media.

Best Yukong Color Combinations

Regal Flame Contrast

Deep crimson paired with warm gold creates a high-contrast, ceremonial look ideal for headers, CTAs, and hero art emphasizing prestige and aggression.

Anchor & Accent

Near-black with soft off-white provides maximum legibility and clean separation for UI elements, typography, and iconography.

Download Yukong Honkai Star Rail Color Palette

ASE

Yukong .ASE Swatches

For Adobe Swatches & Procreate

SVG

Yukong .SVG Palette

Vector Color Palette

PNG

Yukong .PNG Image

High-Quality Palette Preview

FAQs about Yukong Honkai Star Rail Color Codes

What is the main robe or flame color on Yukong?

Yukong’s primary robe and flame-like accents use the deep crimson HEX #B71C1C.

Which colors define Yukong’s overall outfit and ceremonial trim?

The outfit combines primary crimson #B71C1C with metallic trim #FFCC4D to convey martial prestige and Sun King allusions.

What are the accent and grounding colors used for details and silhouettes?

Accents and glow details use burnt orange #D97706 and Sunglow #FFCC4D, while silhouettes and weapon accents are grounded in #2B2B2B; trims also use #F6F3EE.

Copied