Tool · Radix Colors

Radix-style 12-step scale from any brand color.

Drop a brand hex - get the canonical 12-step scale used by shadcn/ui and Radix Themes, plus a matching gray, alpha siblings, and an auto-tuned dark variant. Ready to paste into globals.css or a Radix Themes config.

All tools

light scale

12 steps · solid
accentsolid
graysolid

dark scale

12 steps · solid
accentsolid
graysolid
light UI sample

Roadmap Q3

Shipping in the next two weeks.

New
"We just synced Radix tokens from The Color Tools - devs are happy, designers are happy." - Sample testimonial.
dark UI sample

Roadmap Q3

Shipping in the next two weeks.

New
"We just synced Radix tokens from The Color Tools - devs are happy, designers are happy." - Sample testimonial.

What is the radix colors generator?

Radix Colors is a 12-step color scale system used by Radix UI, where each step has a defined role: backgrounds (1 and 2), interactive components (3 to 5), borders (6 to 8), solid fills (9 and 10) and text (11 and 12). This tool generates a custom Radix-style scale from any color, in light and dark, with P3 variants.

Generating a custom Radix scale

Enter a brand color and the tool fits it to step 9 (the solid fill), then derives the other eleven steps to match the lightness and chroma curve of the official Radix scales. Step 12 is guaranteed to meet contrast on step 1 and 2 backgrounds. Output is a CSS file in the same variable naming as the official package, so a custom scale drops into an existing Radix project without renaming.

Radix Colors Generator FAQ

What are the 12 steps in Radix Colors used for?

1 and 2 app and subtle backgrounds; 3, 4 and 5 component backgrounds in normal, hover and active states; 6, 7 and 8 borders and separators; 9 and 10 solid backgrounds and their hover; 11 and 12 low-contrast and high-contrast text.

Can I generate a Radix scale from my brand color?

Yes. The generator maps your color to step 9 and builds the rest of the scale around it, in light, dark and P3 versions.

Is the output compatible with the official @radix-ui/colors package?

The variable names and step structure match, so a custom scale can be used alongside or in place of an official one.

Related color tools