Open source
MIT
View source →
An open-source colour system of 30 scales, each with 12 steps engineered for specific interface jobs — backgrounds, borders, hover states, text.
PriceFree
PlatformsWeb, npm
Why we recommend it
Most palettes give you pretty colours and leave contrast to you. Radix assigns a purpose to every step, so step 3 is always a hover background and step 11 is always low-contrast text, and accessible pairings fall out of the system rather than needing to be checked by hand.
Strengths
- Every scale has a matched dark-mode counterpart designed for the same steps, which makes dark mode a colour swap rather than a redesign. Automatic APCA and WCAG-conscious contrast at the documented step pairings. Framework-agnostic — plain CSS variables.
Keep in mind
- The 12-step model takes real effort to learn, and using it casually gives you no benefit over any other palette. Repository updates are infrequent (stable rather than abandoned, but do not expect frequent releases). Strongly opinionated, so it fights an existing brand palette rather than accommodating it.
Is this your tool? Claim this page for free: check the facts, reply to our review and get a badge for your site.
Claim this pageHow much does Radix Colors cost?
Free — Free.
List price, excluding tax. Compare prices across the directory.
Radix Colors alternatives and related tools
1 AI prompts for design systems & ui kits — ready-to-copy prompts for this discipline, organised alongside the directory. Browse design systems & ui kits prompts →