Colors · Learn · Guide

Tonal palettes

A tonal palette is one hue rendered at every tone — perceived lightness from 0 (black) to 100 (white). Tone is the load-bearing idea of the entire color system: contrast between two colors is decided by their tone distance, never by their hue.

Your primary palette · 24 canonical tones and every tone your roles read

Dots mark the tones your scheme actually uses — e.g. primary is tone 40 in light, tone 80 in dark.

Tone distance = contrast · try it

Background tone tone 40 Content tone tone 100

≥ 40 apart

Guaranteed 3:1 — large text, icons, UI shapes.

≥ 51 apart

Guaranteed 4.5:1 — body text at any size.

< 40 apart

No guarantee — fine for decoration only.

Grumpy wizards

make toxic brew for the evil queen and jack.

6.49:1 ✓ 4.5 Δ 60

Why some tones look duller

Not every hue can be vivid at every lightness — there is no bright dark-yellow. When a requested chroma doesn't exist at a tone, the system keeps the tone and gives up chroma instead. Lightness always wins, because contrast depends on it.