Jiaoqiu Color Palette, HEX Codes & UI Design Guide (Honkai: Star Rail)

Jiaoqiu Color Palette, HEX Codes & UI Design Guide (Honkai: Star Rail)

Jiaoqiu from Honkai: Star Rail represents a masterclass in balancing ethereal elegance with an authoritative presence. Her visual identity is built upon a sophisticated palette that captures both her noble status and tactical brilliance. The primary silhouette is dominated by the deep Plump Purple (#6A3FB5), establishing a regal tone that commands attention. This intensity is beautifully softened by the delicate lilac of Perfume (#B99EF7) on her inner sleeves, while the crisp Whisper (#F5F5FA) provides essential negative space for high-end costume detailing. For designers seeking professional color codes, Jiaoqiu’s palette offers a versatile range of high-contrast tones perfect for premium UI/UX projects.

Plump Purple
#6A3FB5
Perfume
#B99EF7
Whisper
#F5F5FA
Cream Can
#F5C85A
Desert Sand
#F2D1C4

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

Preview Color Name HEX RGB CMYK
Plump Purple #6A3FB5 106, 63, 181 41, 65, 0, 29
Perfume #B99EF7 185, 158, 247 25, 36, 0, 3
Whisper #F5F5FA 245, 245, 250 2, 2, 0, 2
Cream Can #F5C85A 245, 200, 90 0, 18, 63, 4
Desert Sand #F2D1C4 242, 209, 196 0, 14, 19, 5

Jiaoqiu CSS & Tailwind Color Variables

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

:root {
/* Jiaoqiu Honkai Star Rail Palette */
--jiaoqiu-honkai-star-rail-plump-purple: #6A3FB5;
--jiaoqiu-honkai-star-rail-perfume: #B99EF7;
--jiaoqiu-honkai-star-rail-whisper: #F5F5FA;
--jiaoqiu-honkai-star-rail-cream-can: #F5C85A;
--jiaoqiu-honkai-star-rail-desert-sand: #F2D1C4;
}

Jiaoqiu CSS Gradients

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

Click to Copy CSS
Plump Purple to Cream Can#6A3FB5 → #F5C85A
Click to Copy CSS
Whisper to Plump Purple#F5F5FA → #6A3FB5

Jiaoqiu Color Scheme Breakdown

Plump Purple#6A3FB5

This deep violet-purple dominates Jiaoqiu’s coat and main garments, signaling her ethereal and aristocratic presence while providing the primary silhouette contrast against lighter accents and weapon details during skill animations.

Perfume#B99EF7

A soft lilac fill appears on Jiaoqiu’s inner sleeves, ribbons, and subtle hair highlights, conveying delicate femininity and linking secondary elements to the primary purple in both idle poses and ability effects.

Whisper#F5F5FA

Crisp off-white is used for collars, lapels, glove fabric, and ornamental trim, creating clean negative space that enhances the silhouette and emphasizes fine costume detailing in character portraits and promotional art.

Cream Can#F5C85A

Bright golden-yellow adorns buttons, buckles, embroidery, and small jewelry pieces, signaling status and focal points while catching visual attention during idle stances, skill flashes, and collectible artwork close-ups as well.

Desert Sand#F2D1C4

A warm porcelain skin tone defines Jiaoqiu’s exposed face, hands, and neck, providing natural contrast to cool outfit hues and aiding facial expression readability in portraits, in-game sprites, and animated cutscenes.

Jiaoqiu 60-30-10 Design Rule

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

60% Background
#F5F5FA
30% Primary
#B99EF7
10% Accent
#6A3FB5

Use Whisper (#F5F5FA) for large background spaces, Perfume (#B99EF7) for primary text and structural UI elements, and vibrant Plump Purple (#6A3FB5) exclusively for call-to-action buttons and important highlights.

Jiaoqiu UI Component Preview

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

Jiaoqiu

Ethereal Aristocratic Tactician

“A master of flavors knows that the right ingredients, like the right tactics, require perfect balance.”

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

  • Main LED: 106, 63, 181
  • Accent LED: 185, 158, 247

The Design Philosophy behind Jiaoqiu’s Palette

The design philosophy behind Jiaoqiu’s color scheme centers on the ‘Noble Alchemist’ archetype, blending traditional aesthetics with modern readability. The dominance of Plump Purple (#6A3FB5) serves as a psychological anchor, symbolizing wisdom, mystery, and high social standing. By strategically placing Cream Can (#F5C85A) on buckles and embroidery, the developers create high-visibility focal points that guide the player’s eye during complex skill animations. This use of golden accents against a cool purple backdrop is a classic color theory technique to denote luxury and power. Furthermore, the inclusion of Desert Sand (#F2D1C4) ensures the character remains grounded and relatable, providing a warm organic contrast to the cooler, more ethereal fabric hues. This harmonious blend reflects her dual nature as a refined aristocrat and a sharp-witted strategist.

Best Jiaoqiu Color Combinations

Royal Contrast Flare

This classic pairing of deep purple and bright gold creates a high-status visual hierarchy, ideal for CTA buttons or premium branding elements.

Ethereal Mist Gradient

A soft, low-contrast combination that is perfect for clean UI backgrounds or secondary decorative elements to evoke a sense of calm and sophistication.

Download Jiaoqiu Honkai Star Rail Color Palette

ASE

Jiaoqiu .ASE Swatches

For Adobe Swatches & Procreate

SVG

Jiaoqiu .SVG Palette

Vector Color Palette

PNG

Jiaoqiu .PNG Image

High-Quality Palette Preview

FAQs about Jiaoqiu Honkai Star Rail Color Codes

What is the HEX code for Jiaoqiu’s main purple coat?

The primary deep violet-purple used for Jiaoqiu’s coat and main garments is Plump Purple, identified by the HEX code #6A3FB5.

Which color is used for Jiaoqiu’s gold embroidery and ornaments?

The bright golden-yellow accents on Jiaoqiu’s buttons and jewelry use the color Cream Can, with the HEX code #F5C85A.

What color defines Jiaoqiu’s soft inner sleeves and ribbons?

The soft lilac color found on her inner sleeves and ribbons is called Perfume, which corresponds to the HEX code #B99EF7.

Copied