Radix Colors
Use an accessible 12-step color system designed for UI — pick a palette or build a custom one.
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.
Similar Tools
Colorhex.io
This tool provides detailed information about specific colors, including their hexadecimal codes and related color values.
UI Colors
Generate and customize beautiful Tailwind CSS color palettes with an intuitive tool.
RandomA11y
Generate random WCAG-compliant color combinations to pick accessible foreground/background pairs.