An open-source colour system of 30 scales, each with 12 steps engineered for specific interface jobs — backgrounds, borders, hover states, text.
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.
Drawbacks
- 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.
Radix Colors alternatives and related tools
Figma Design Systems Kit
Figma's own reference design system file showing recommended structure and naming.
FreePreline UI
Tailwind component and template library with strong application UI coverage.
FreemiumRelume
Library of over 1,000 Webflow and Figma sections, plus an AI site-structure generator.
FreemiumDesign Lint
Figma plugin that flags inconsistent styles and detached components.
FreeAll product names, logos and brands referenced on this site are the property of their respective owners. They are used here for identification purposes only, to describe the tools being reviewed. Their use does not imply any affiliation with, endorsement by, or sponsorship of The Design Tools by those owners.