Why are the families named after objects?

That is Radix's own naming — tomato, crimson, plum and so on. It keeps similar hues distinguishable, and the tomato ramp sits further towards orange than a plain red would.

Where are the twelve steps?

Not on this page. The published scale runs to twelve, with the final steps intended for text and borders; this reference shows ten steps per family.

Are alpha variants included?

No. Radix ships translucent versions of every family for layering, and this reference covers only the solid ramp.

Do the hex values come from the framework itself?

Each family's base is Radix's published colour. The ten numbered steps are generated from it at fixed lightnesses, so they preview the ramp rather than copy the published scale.

Do the families sit at the same lightness from step to step?

Yes — every family is generated on the same lightness ladder, so step 500 in one family sits at the same lightness as step 500 in another, which is what makes cross-family comparison meaningful.

Radix Color Reference

tomato

#ffc09c

100

#ffaf8c

200

#ff9776

300

#ff7656

400

#ed5536

500

#c9310e

600

#ad0500

700

#950000

800

#720000

900

#4f0000

red

#ffbcb7

100

#ffaba7

200

#ff9391

300

#ff7272

400

#ee5154

500

#ca2c37

600

#ad0020

700

#950007

800

#720000

900

#4f0000

crimson

#ffb1ec

100

#ffa0db

200

#ff88c5

300

#ff66a5

400

#ef4387

500

#cb1569

600

#ae0053

700

#950040

800

#720027

900

#4f0010

pink

#ffb6ff

100

#ffa6ff

200

#ff8eea

300

#ff6dc9

400

#e24ca9

500

#bf268b

600

#a30073

700

#8b005e

800

#690042

900

#470028

plum

#ffc8ff

100

#ffb7ff

200

#ffa0ff

300

#e480f3

400

#c261d1

500

#a241b1

600

#882597

700

#720381

800

#540063

900

#360045

purple

#ffd3ff

100

#ffc2ff

200

#ebabff

300

#cb8bff

400

#ab6ce6

500

#8c4cc4

600

#7533aa

700

#611993

800

#450073

900

#2c0054

violet

#f0e0ff

100

#e0cfff

200

#c9b8ff

300

#aa98ff

400

#8d78f4

500

#7059d2

600

#5b3fb7

700

#4928a0

800

#32007f

900

#1f0060

indigo

#bbefff

100

#abdeff

200

#96c6ff

300

#78a5ff

400

#5b85ff

500

#4065df

600

#2b4bc4

700

#1c34ac

800

#0c0b8b

900

#0c006b

blue

#8bfbff

100

#7aeaff

200

#62d2ff

300

#3db1ff

400

#0190ff

500

#0070dd

600

#0057c1

700

#0040aa

800

#001e89

900

#000069

cyan

#8fffff

100

#7df7ff

200

#64e0ff

300

#3dbfe5

400

#009fc4

500

#0080a4

600

#00688b

700

#005376

800

#003758

900

#001c3c

teal

#96fffb

100

#84feea

200

#6ce6d3

300

#46c5b3

400

#13a594

500

#008677

600

#006e60

700

#005a4c

800

#003e32

900

#00231a

green

#a3ffd2

100

#93ffc2

200

#7be8ac

300

#59c78d

400

#34a76f

500

#008852

600

#00703c

700

#005b29

800

#003f0e

900

#002400

You Might Also Need

Material Design Color Reference

Browse the Material Design palette

The Radix color palette reference shows twelve Radix families — tomato, crimson, plum, violet, indigo and the rest — each as a ten-step ramp with the base hex and every step value printed.

What is Radix Color Reference?

Twelve families are laid out one block each: tomato, red, crimson, pink, plum, purple, violet, indigo, blue, cyan, teal and green.
Every block carries ten tiles with the hex printed under each swatch, and the step labels run 50, 100, 200, 300, 400, 500, 600, 700, 800 and 900.

The family names are the most distinctive thing about this reference and the reason it is worth having separately from the other colour-system pages. Radix names its families after objects as often as after hues — tomato, crimson, plum — and the tomato ramps towards orange-red in a way that a family called red would not. Anyone reading a Radix-themed interface runs into those names constantly, and this page is where they can be resolved into values.

Each family is anchored on Radix's published base: tomato at #e54d2e, red at #e5484d, crimson at #e93d82, plum at #ab4aba, violet at #6e56cf, blue at #0090ff, teal at #12a594. Those anchors are the framework's own colours and can be used as they stand; the ten steps around each one are generated at fixed lightnesses from the base's hue and chroma, so they approximate the ramp rather than reproducing the package's published scale.

Two differences from the framework's real system are worth stating plainly, because both will be noticed by anyone who uses Radix every day. The published scale runs to twelve steps rather than ten, with the last steps reserved for text and borders against a coloured surface. And it ships alpha variants of every family for layering over images and gradients. Neither is present here: this is the hue family from pale to deep, which covers the common case of picking a colour and noting its value.

Used as a reference, the page pays off when a project needs to know what a family looks like before committing to it, or when two similar names — pink and crimson, plum and purple — have to be told apart. Twelve ramps stacked in one scroll also show how much of the system is spent on the cool half of the wheel.

Comparing the families is the other half of the use. Radix deliberately spaces its hues close together in the purple and pink region — plum, purple, violet and crimson sit within a few degrees of each other — and far apart in the greens and blues, which is a choice a reader only notices when the ramps are stacked. For a product that needs several distinguishable accents, that spacing is useful information before a palette is committed to, and it is easier to judge from twelve rows of tiles than from twelve separate pages of documentation.

Limits: no search, no copy buttons, no alpha variants, no twelve-step scale and no naming beyond the family itself, so a class or token name cannot be looked up here.
Within those bounds, as a radix color palette reference it delivers the radix colors list with each radix color scale printed in full, which is what anyone comparing radix ui colors or wiring radix themes colors needs from a lookup page.

How to use Radix Color Reference

Find the family by its Radix name — tomato, crimson, plum and the rest.
Read the ten steps from 50 at the lightest to 900 at the darkest.
Note the hex for the step you need, or use the base colour that anchors the family.

When to use Radix Color Reference vs related tools

Use this when a project follows Radix and a family's name has to be resolved to values, or when comparing families before choosing one. Use the Radix colour exporter when the output needs to be a token file for a project rather than a reference to read. The nearest system to compare step spacing against is the Open Color reference, and the measured lightness and chroma behind any ramp are what the palette balance analyzer reports.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.