Yunli (Honkai Star Rail) Color Codes, Palette & HEX Guide

Yunli (Honkai Star Rail) Color Codes, Palette & HEX Guide

Yunli from Honkai Star Rail blends serenity and authority through a refined color system that supports both character and UI use. The anchor tone Royal Purple (#6F3FA0) shapes his silhouette and magical identity, while Soap (#D7C0F0) adds soft, reflective layers and White (#FFFFFF) provides crisp separations for readable UI elements. For designers searching color codes, HEX references like #6F3FA0, #D7C0F0 and #F0C040 are essential when recreating Yunli’s balance of mystique and ornamentation in palettes, icons, and interface accents.

Royal Purple
#6F3FA0
Soap
#D7C0F0
White
#FFFFFF
Ronchi
#F0C040
Charade
#2B2A3A

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

Preview Color Name HEX RGB CMYK
Royal Purple #6F3FA0 111, 63, 160 31, 61, 0, 37
Soap #D7C0F0 215, 192, 240 10, 20, 0, 6
White #FFFFFF 255, 255, 255 0, 0, 0, 0
Ronchi #F0C040 240, 192, 64 0, 20, 73, 6
Charade #2B2A3A 43, 42, 58 26, 28, 0, 77

Yunli CSS & Tailwind Color Variables

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

:root {
/* Yunli Honkai Star Rail Palette */
--yunli-honkai-star-rail-royal-purple: #6F3FA0;
--yunli-honkai-star-rail-soap: #D7C0F0;
--yunli-honkai-star-rail-white: #FFFFFF;
--yunli-honkai-star-rail-ronchi: #F0C040;
--yunli-honkai-star-rail-charade: #2B2A3A;
}

Yunli CSS Gradients

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

Click to Copy CSS
Royal Purple to Ronchi#6F3FA0 → #F0C040
Click to Copy CSS
White to Royal Purple#FFFFFF → #6F3FA0

Yunli Color Scheme Breakdown

Royal Purple#6F3FA0

A deep, desaturated purple appears across Yunli’s primary garments and hair accents, forming the character’s visual backbone, conveying elegance, mystique, and a regal, otherworldly presence while unifying silhouette and magical identity.

Soap#D7C0F0

A pale lavender fills secondary robes, inner layers, and delicate fabric panels on Yunli’s outfit, softening the dominant purple palette, suggesting gentle femininity and subtle depth while catching ambient light in calm, graceful highlights.

White#FFFFFF

Crisp, neutral white is used for collars, cuffs, small ornamental panels, and inner linings, providing high-contrast separation from deeper tones, enhancing perceived cleanliness, composure, and refined detailing across Yunli’s costume.

Ronchi#F0C040

A warm metallic gold appears on trims, fastenings, jewelry, and emblematic motifs, acting as luminous focal points that denote status and tradition while catching light to articulate form and guide the viewer’s eye.

Charade#2B2A3A

A near-black navy anchors boots, belts, shadowed fabric, and detailing, lending structural weight and visual contrast to Yunli’s ensemble while preserving depth without the flatness of pure black, supporting legibility in complex areas.

Yunli 60-30-10 Design Rule

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

60% Background
#FFFFFF
30% Primary
#2B2A3A
10% Accent
#6F3FA0

Use White (#FFFFFF) for large background spaces, Charade (#2B2A3A) for primary text and structural UI elements, and vibrant Royal Purple (#6F3FA0) exclusively for call-to-action buttons and important highlights.

Yunli UI Component Preview

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

Yunli

Mystic Blade

“Grace guides my blade.”

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

  • Main LED: 111, 63, 160
  • Accent LED: 215, 192, 240

The Design Philosophy behind Yunli’s Palette

The design philosophy behind Yunli’s palette uses contrast and harmony to narrate his persona: Royal Purple (#6F3FA0) conveys regal mystique and anchors the composition; Soap (#D7C0F0) introduces delicate, feminine highlights that catch ambient light; Ronchi (#F0C040) functions as a luminous focal accent for trims and emblems, signaling status and guiding attention. Charade (#2B2A3A) supplies near-black depth for structural elements without flattening shadows, while White (#FFFFFF) ensures legibility and clean separation. This curated set of color codes lets artists and UI/UX designers translate storytelling into accessible visual hierarchies and consistent component systems.

Best Yunli Color Combinations

Regal Accent Pair

Royal Purple paired with Ronchi creates a strong focal contrast where deep, mystical backgrounds let warm gold accents read instantly as status or action cues.

Soft Contrast Base

Soap against Charade offers gentle, readable UI surfaces—pastel panels balanced by a near-black for text and controls to maximize legibility.

Download Yunli Honkai Star Rail Color Palette

ASE

Yunli .ASE Swatches

For Adobe Swatches & Procreate

SVG

Yunli .SVG Palette

Vector Color Palette

PNG

Yunli .PNG Image

High-Quality Palette Preview

FAQs about Yunli Honkai Star Rail Color Codes

What is the primary hair and garment color for Yunli?

Yunli’s primary garment and hair accents use Royal Purple — HEX #6F3FA0.

What is Yunli’s main outfit or robe color and overall palette style?

The main outfit palette centers on a regal purple base (HEX #6F3FA0) softened by pale lavender Soap (HEX #D7C0F0) for layered fabric depth.

Which color is used for trims, ornaments, and focal highlights on Yunli?

Warm metallic trims and focal highlights use Ronchi — HEX #F0C040 — contrasted with Charade #2B2A3A and White #FFFFFF for structure.

Copied