Radix 12 Scale Generator

Generate a complete 12-step palette for Radix UI / shadcn — naming, semantics and contrast requirements fully aligned with the Radix spec

Pick Color

CSS Variable Name --brand-1 … -12

12-Step Scale

Click to copy HEX; Step 9 shows white text contrast

Light

Dark

123456 789101112

1–2 Background 3–5 Component 6–8 Border 9–10 Solid 11–12 Text

Semantic Reference

Each step's official semantics, typical uses and contrast verification

UI Preview

About Radix Color Scale

Generate 12-step semantic color scales following the Radix Colors spec. Each step covers a defined semantic use case from backgrounds to text. Radix UI compatible. Each of the 12 steps maps to a defined semantic role, from backgrounds to text, so there is no guessing which step belongs where.

Well suited for teams already using Radix UI components, or anyone borrowing its color system as a foundation for their own design system.

Common questions

What is a Radix color scale? A 12-step semantic scale following the Radix Colors spec, with steps mapped to roles — backgrounds, components, borders, and text — for accessible UI.

What do the 12 steps represent? Roughly: 1–2 backgrounds, 3–5 component backgrounds, 6–8 borders and separators, 9–10 solid colors, and 11–12 text — a consistent system across hues.

Is this compatible with Radix UI? Yes — the scale follows the same step semantics as Radix UI components, so generated colors slot into that system directly.