Topaz & Numby Color Codes | HEX Palette Guide

Topaz & Numby present a striking fusion of organic warmth and engineered precision, translating character and function into a concise HEX palette designers can use. The primary Cream Can (#F5C84C) anchors the silhouette as a luminous gem core, while Fire Bush (#E8A22B) supplies utilitarian trim and Numby’s plating accents. Muted teal William (#3A6B6E) introduces cool technological contrast and depth, with White (#FFFFFF) offering clean separations. For anyone searching Topaz & Numby color codes or a ready-made palette for UI/UX mockups, this guide highlights practical HEX pairings and visual intent suitable for game art and interface design.

Cream Can

#F5C84C

Fire Bush

#E8A22B

William

#3A6B6E

Old Copper

#6B4A2B

White

#FFFFFF

Topaz & Numby Honkai Star Rail Color Codes: HEX, RGB, CMYK

Color Name	HEX	RGB	CMYK
Cream Can	#F5C84C	245, 200, 76	0, 18, 69, 4
Fire Bush	#E8A22B	232, 162, 43	0, 30, 81, 9
William	#3A6B6E	58, 107, 110	47, 3, 0, 57
Old Copper	#6B4A2B	107, 74, 43	0, 31, 60, 58
White	#FFFFFF	255, 255, 255	0, 0, 0, 0

Topaz & Numby CSS & Tailwind Color Variables

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

:root {
/* Topaz & Numby Honkai Star Rail Palette */
--topaz-&-numby-honkai-star-rail-cream-can: #F5C84C;
--topaz-&-numby-honkai-star-rail-fire-bush: #E8A22B;
--topaz-&-numby-honkai-star-rail-william: #3A6B6E;
--topaz-&-numby-honkai-star-rail-old-copper: #6B4A2B;
--topaz-&-numby-honkai-star-rail-white: #FFFFFF;
}

More Honkai: Star Rail Color Codes (Yellow Palette)

Trailblazer — Honkai Star Rail Color Codes, Palette & HEX Reference

Topaz & Numby CSS Gradients

Beautiful gradient backgrounds inspired by Topaz & Numby’s aesthetic. Click to copy the CSS code.

Click to Copy CSS

Cream Can to Old Copper#F5C84C → #6B4A2B

Click to Copy CSS

William to Cream Can#3A6B6E → #F5C84C

Topaz & Numby Color Scheme Breakdown

Cream Can#F5C84C

Bright golden-yellow used for Topaz’s gemstone core and central armor panels, signalling the character’s gem-inspired identity and warmth, dominating the silhouette as the primary visual focal point and energetic thematic color.

Fire Bush#E8A22B

Deep amber-orange appears on secondary clothing trim, belt accents and Numby’s plating, providing a warm mid-tone contrast to the primary gold and reinforcing the mineral, earthy feel of the design and functional practicality.

William#3A6B6E

Muted teal serves as accent on inner garments, mechanical joints and small LED indicators on Numby, delivering cool contrast to warm yellows while suggesting technological sophistication and visual depth without relying on highlights.

Old Copper#6B4A2B

Warm brown leather appears on straps, boots and utility pouches, grounding the design with rugged practicality and tactile texture, emphasizing functional adventurer motifs and complementing the golden palette with organic tones.

White#FFFFFF

Clean white is used for inner lining, small detailing and Numby’s core highlights, offering neutral separation between colored elements, increasing legibility of forms and conveying a crisp, engineered aesthetic without glossy sheen.

Topaz & Numby 60-30-10 Design Rule

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

60% Background
#FFFFFF

30% Primary
#6B4A2B

10% Accent
#F5C84C

Use White (#FFFFFF) for large background spaces, Old Copper (#6B4A2B) for primary text and structural UI elements, and vibrant Cream Can (#F5C84C) exclusively for call-to-action buttons and important highlights.

Topaz & Numby UI Component Preview

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

Topaz & Numby

Gem-Core Companion

“Stay bright — let the gems guide the way.”

Topaz & Numby 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 Topaz & Numby’s aesthetic.

Main LED: 245, 200, 76
Accent LED: 232, 162, 43

The Design Philosophy behind Topaz & Numby’s Palette

The design philosophy behind Topaz & Numby leverages a tight, five-color system to communicate story, role, and readability. Cream Can (#F5C84C) functions as the narrative focal point—gem-powered warmth and visual hierarchy—while Fire Bush (#E8A22B) reinforces utilitarian detail and mid-tone contrast that reads well in animation and low-light scenes. William (#3A6B6E) acts as a cool counterpoint, implying mechanics and circuitry without overpowering the gem motif; Old Copper (#6B4A2B) adds tactile, leather-like grounding; White (#FFFFFF) preserves legibility and separates elements. This restrained HEX palette balances chromatic contrast and accessibility, making it effective for both character art and UI components where clear color codes and consistent visual language are essential.

Best Topaz & Numby Color Combinations

Gem & Tech Contrast

Bright Cream Can paired with muted William yields high visual contrast, balancing warmth with a cool, technical accent ideal for focal highlights and UI indicators.

Earthbound Trim

Fire Bush and Old Copper create a cohesive earthy duo that emphasizes functional details like straps and belts while preserving a rugged, grounded feel.