What it is

Open-source colour system of 32 scales, each with 12 steps mapped to a specific job: steps 1-3 backgrounds, 4-6 interactive component states, 7-8 borders and separators, 9-11 solid fills, 12 accessible text. Ships matched light and dark scales plus alpha variants, as CSS or a JS object.

Why it earns a slot

Removes all guesswork about which grey a hover state should be. Because every scale shares the same step semantics, you can swap blue for violet across an entire app by changing one import.

Know before you commit

The step numbers are the API — step 9 means 'solid brand fill', not 'ninth darkest'. Wiring it into Tailwind needs a community plugin or hand-written theme keys; the package itself just gives you CSS custom properties.

Getting started

npm i @radix-ui/colors

Field notes

0 from the community

Sign in to add a field note. Reading is always open.

Loading notes…

Field check

Unverified

Sign in to confirm this entry is still accurate.

Pricing snapshot

Free · MIT licensed

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate Radix Colors (https://www.radix-ui.com/colors) for this project, then use it only if it fits what we are already building.
Context: Accessible 12-step colour system. Open-source colour system of 32 scales, each with 12 steps mapped to a specific job: steps 1-3 backgrounds, 4-6 interactive component states, 7-8 borders and separators, 9-11 solid fills, 12 accessible text. Ships matched light and dark scales plus alpha variants, as CSS or a JS object.
Reviewer notes (general, not written for this codebase): Removes all guesswork about which grey a hover state should be. Because every scale shares the same step semantics, you can swap blue for violet across an entire app by changing one import.
Watch out for: The step numbers are the API — step 9 means 'solid brand fill', not 'ninth darkest'. Wiring it into Tailwind needs a community plugin or hand-written theme keys; the package itself just gives you CSS custom properties.
Pricing: Free · MIT licensed
Setup: npm i @radix-ui/colors
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/radix-colors