What it does
Radix Colors supplies coordinated scales for backgrounds, component states, borders and text. It includes light, dark and transparent variants, with CSS files and JavaScript objects for implementation.
Import the scales the interface needs, then apply their numbered CSS variables to components. Adding a dark class to a parent switches to the imported dark scale without changing those variable names.
The steps have intended roles: 1 and 2 serve backgrounds; 3 through 5 cover normal, hover and selected component states; 6 through 8 handle borders. Steps 9 and 10 provide solid fills, followed by two text levels.
The documented APCA text targets apply to steps 11 and 12 over step 2 from the same scale. That is a defined pairing, not a guarantee for every combination. Transparent variants help components blend with coloured backgrounds.
Radix Colors is MIT licensed. Retain the accompanying notices when redistributing its files.
Strengths
- The same variable names support light and dark component styling.
Watch out for
- Published text-contrast targets apply to specified pairings within a scale.
Best for
- Design systems with consistent component states and theme switching
Sources
- Radix Colors overview (Oct 27, 2026)
- Radix Colors usage (Oct 27, 2026)
- Radix scale roles and contrast pairings (Oct 27, 2026)
- Radix Colors MIT licence (Oct 27, 2026)