How to Build a Design Token Palette From One Brand Color

A repeatable token pipeline starts from one brand color and ends with engineering-ready exports. The trick is to author the ramp in OKLCH so every step has equal perceived lightness, then layer semantic tokens on top.

Time: 10 minutes
You need: A single brand color in HEX or OKLCH

Generate a 12-step OKLCH ramp from your brand color
Drop the brand color into Design System. ColorUI sweeps lightness from L=0.97 down to L=0.12 while keeping chroma proportional - the equivalent of Tailwind's 50-950 scale, tuned to your hue.
Open /css-vars →
Map ramp steps to semantic roles
Define semantic tokens that name roles, not colors: --text-primary (step 950), --text-muted (600), --surface (50), --surface-raised (100), --brand (500), --border (200). Components only consume the semantic layer.
Mirror for dark mode
Reverse the ramp. --text-primary becomes step 50; --surface becomes step 950. OKLCH lightness is perceptually uniform, so the mirror feels balanced without manual nudging. Slightly desaturate brand colors for dark mode.
Dark mode generator →
Audit the contrast matrix
Run every text-on-surface pair through Contrast Checker matrix view. The OKLCH ramp typically passes the first time; nudge the mid-step lightness if anything fails.
Open /contrast →
Export as W3C DTCG, Style Dictionary, or Tailwind
Open Design Tokens and pick your target. The DTCG output validates against the latest draft and imports cleanly into Style Dictionary, Tokens Studio, and Figma Variables.
Open /tokens →

More how-to guides

How to Extract a Color Palette From an Image

Pull a usable, accessible color palette from any photo in under a minute. K-means clustering in OKLCH, mood presets, and a contrast sanity check.

How to Check WCAG Contrast on a Color Palette

Verify every text-on-surface pair against WCAG 2.1 AA / AAA in two minutes. Includes APCA Lc as a forward-compatible second opinion.

How to Simulate Color Blindness on a Design

Run any palette or screenshot through deuteranopia, protanopia, and tritanopia simulations to catch CVD-unsafe color choices before users do.

How to Build a Design Token Palette From One Brand Color

Time: 10 minutes
You need: A single brand color in HEX or OKLCH

Generate a 12-step OKLCH ramp from your brand color
Drop the brand color into Design System. ColorUI sweeps lightness from L=0.97 down to L=0.12 while keeping chroma proportional - the equivalent of Tailwind's 50-950 scale, tuned to your hue.
Open /css-vars →
Map ramp steps to semantic roles
Define semantic tokens that name roles, not colors: --text-primary (step 950), --text-muted (600), --surface (50), --surface-raised (100), --brand (500), --border (200). Components only consume the semantic layer.
Mirror for dark mode
Reverse the ramp. --text-primary becomes step 50; --surface becomes step 950. OKLCH lightness is perceptually uniform, so the mirror feels balanced without manual nudging. Slightly desaturate brand colors for dark mode.
Dark mode generator →
Audit the contrast matrix
Run every text-on-surface pair through Contrast Checker matrix view. The OKLCH ramp typically passes the first time; nudge the mid-step lightness if anything fails.
Open /contrast →
Export as W3C DTCG, Style Dictionary, or Tailwind
Open Design Tokens and pick your target. The DTCG output validates against the latest draft and imports cleanly into Style Dictionary, Tokens Studio, and Figma Variables.
Open /tokens →