Rad UI colors

A color atlas for interfaces that have to work.

The palette is organized by job: surfaces, controls, edges, emphasis, and text. Pick a family for tone, then use the same scale numbers to keep interaction, contrast, and hierarchy predictable.

31
families
12
steps each
5
role bands

Every family follows the same ramp, so a component can carry its structure from a neutral theme into expressive product color.

Scale roles

Read the scale like a UI sentence.

The same twelve numbers repeat across every family. Their meaning stays steady, which keeps product teams from turning color into guesswork.

Canvas

50-100

2 steps

Page backgrounds, subtle panels, and ambient surfaces.

50
100

Controls

200-400

3 steps

Interactive fills that can lift, press, and communicate state.

200
300
400

Structure

500-700

3 steps

Borders, separators, focus edges, and visible scaffolding.

500
600
700

Emphasis

800-900

2 steps

Solid accents for selections, badges, and primary moments.

800
900

Text

950-1000

2 steps

Readable foregrounds for supporting and primary copy.

950
1000

Specimens

Families in context, not just chips.

Each specimen uses the same family for surface, border, state, accent, and text so the relationship between steps is visible at a glance.

Gray

gray
sample ui

Gray can move from quiet surface to confident text without changing families.

ActionState

Ruby

ruby
sample ui

Ruby can move from quiet surface to confident text without changing families.

ActionState

Blue

blue
sample ui

Blue can move from quiet surface to confident text without changing families.

ActionState

Jade

jade
sample ui

Jade can move from quiet surface to confident text without changing families.

ActionState

Amber

amber
sample ui

Amber can move from quiet surface to confident text without changing families.

ActionState

Plum

plum
sample ui

Plum can move from quiet surface to confident text without changing families.

ActionState

Step map

One number system across the whole palette.

50
100
200
300
400
500
600
700
800
900
950
1000

The numbers mean role before they mean shade. Once a component uses a role consistently, you can swap from blue to amber or jade without relearning the scale.

Explore docs

Complete atlas

All families, grouped by temperament.

The full palette remains scannable without becoming a spreadsheet. Each row keeps the complete 50 to 1000 scale and the token name you use in Tailwind classes.

Neutrals

6 families, each with the same 12-step contract.

Gray
gray
Mauve
mauve
Slate
slate
Sage
sage
Olive
olive
Sand
sand

Warm signal

8 families, each with the same 12-step contract.

Tomato
tomato
Red
red
Ruby
ruby
Crimson
crimson
Pink
pink
Orange
orange
Amber
amber
Yellow
yellow

Cool signal

7 families, each with the same 12-step contract.

Purple
purple
Violet
violet
Iris
iris
Indigo
indigo
Blue
blue
Cyan
cyan
Sky
sky

Organic signal

6 families, each with the same 12-step contract.

Teal
teal
Jade
jade
Green
green
Grass
grass
Lime
lime
Mint
mint

Earth

4 families, each with the same 12-step contract.

Bronze
bronze
Gold
gold
Brown
brown
Plum
plum