Radix Colors

Use an accessible 12-step color system designed for UI — pick a palette or build a custom one.

accessibilityColor Palette
Platforms
Web
Pricing Free

Radix Colors is an open-source color system for building accessible interfaces. Each color scale has 12 steps engineered for specific UI roles: backgrounds (1–2), interactive components (3–5), borders and separators (6–8), solid colors (9–10), and accessible text (11–12). The system ships with curated palettes — gray/mauve/slate/sage, plus accent scales like tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, and many more — each with light, dark, and alpha variants.

The /colors/custom page is an in-browser palette generator: pick your brand color and Radix produces a complete, accessibility-checked 12-step scale that drops directly into Radix Themes or any design system. It's a separately useful tool even if you don't use the rest of the Radix stack. Made by WorkOS as part of the broader Radix project (Themes, Primitives, Icons), free and MIT-licensed.