Tonal palette decision lab

Compare complete recipes, preserve declared anchors, and inspect light and dark output before selecting a canonical algorithm.

How to read this experiment

An algorithm version names a fixed recipe. If its behavior changes later, it needs a new version so existing themes do not silently change.Vibrancy is hue-, tone-, and mode-aware—not one chroma multiplier applied equally to every family. Exact anchors must be preserved; bounded anchors may move only within the stated ΔE; preferred anchors may move and report the difference. Anchor corrections taper through neighboring stops instead of changing one isolated swatch.Dark ramps are generated separately from light ramps. The preview deliberately uses a near-white neutral instead of pure white body text. Contrast and context still need semantic review: a palette alone cannot guarantee accessibility.Transparency and compositing are outside this generator; they belong to semantic token usage and adoption guidance.

Direct algorithm comparison

Matching ramps share an edge so differences appear in the same visual position.
Neutral
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.1/17.8 · hue drift 0.0° · mapped 0
HCT-like: min/max adjacent ΔE 4.1/17.8 · hue drift 0.0° · mapped 0
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 2.7/4.6 · hue drift 0.0° · mapped 0
HCT-like: min/max adjacent ΔE 2.7/4.6 · hue drift 0.0° · mapped 0
Blue
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.1/19.4 · hue drift 4.3° · mapped 17
HCT-like: min/max adjacent ΔE 3.5/25.0 · hue drift 21.4° · mapped 18
HCT-like: Review hue identity—blue may shift toward purple.HCT-like has materially more hue drift in this ramp.
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.2/5.0 · hue drift 4.0° · mapped 15
HCT-like: min/max adjacent ΔE 3.1/5.0 · hue drift 15.6° · mapped 16
HCT-like: Review hue identity—blue may shift toward purple.HCT-like has materially more hue drift in this ramp.
Red
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.2/19.9 · hue drift 4.0° · mapped 14
HCT-like: min/max adjacent ΔE 2.8/29.5 · hue drift 3.5° · mapped 17
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.2/5.3 · hue drift 4.0° · mapped 10
HCT-like: min/max adjacent ΔE 2.9/5.4 · hue drift 2.5° · mapped 15
Orange
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.3/19.3 · hue drift 25.9° · mapped 18
HCT-like: min/max adjacent ΔE 4.2/21.8 · hue drift 25.5° · mapped 15
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.3/5.3 · hue drift 26.0° · mapped 15
HCT-like: min/max adjacent ΔE 3.3/5.1 · hue drift 26.9° · mapped 15
Yellow
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.3/18.1 · hue drift 8.3° · mapped 15
HCT-like: min/max adjacent ΔE 4.0/20.0 · hue drift 35.4° · mapped 14
HCT-like: Review hue identity—yellow may shift toward orange/brown.HCT-like has materially more hue drift in this ramp.
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.0/6.9 · hue drift 8.2° · mapped 14
HCT-like: min/max adjacent ΔE 2.8/6.6 · hue drift 36.6° · mapped 11
HCT-like: Review hue identity—yellow may shift toward orange/brown.HCT-like has materially more hue drift in this ramp.
Green
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.1/19.1 · hue drift 1.9° · mapped 4
HCT-like: min/max adjacent ΔE 3.4/21.9 · hue drift 2.5° · mapped 10
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 2.9/7.0 · hue drift 1.1° · mapped 1
HCT-like: min/max adjacent ΔE 2.9/7.3 · hue drift 1.6° · mapped 7
Teal
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.2/18.2 · hue drift 1.7° · mapped 12
HCT-like: min/max adjacent ΔE 3.5/21.3 · hue drift 19.1° · mapped 14
HCT-like has materially more hue drift in this ramp.
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 2.9/6.7 · hue drift 1.4° · mapped 10
HCT-like: min/max adjacent ΔE 2.9/7.5 · hue drift 19.9° · mapped 11
HCT-like has materially more hue drift in this ramp.
Cyan
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.2/18.3 · hue drift 1.4° · mapped 15
HCT-like: min/max adjacent ΔE 3.6/21.6 · hue drift 21.0° · mapped 17
HCT-like has materially more hue drift in this ramp.
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 2.8/5.4 · hue drift 2.6° · mapped 13
HCT-like: min/max adjacent ΔE 3.1/6.1 · hue drift 21.1° · mapped 15
HCT-like has materially more hue drift in this ramp.
Purple
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.6/20.0 · hue drift 0.6° · mapped 5
HCT-like: min/max adjacent ΔE 2.1/28.0 · hue drift 8.7° · mapped 12
HCT-like has materially more hue drift in this ramp.
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.6/5.5 · hue drift 0.9° · mapped 5
HCT-like: min/max adjacent ΔE 3.3/5.7 · hue drift 7.6° · mapped 10
Pink
Light
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 4.2/19.8 · hue drift 1.1° · mapped 12
HCT-like: min/max adjacent ΔE 2.6/30.5 · hue drift 14.7° · mapped 16
HCT-like has materially more hue drift in this ramp.
Dark
OKLCH
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
HCT-like
0
5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95
100
OKLCH: min/max adjacent ΔE 3.1/5.3 · hue drift 1.0° · mapped 8
HCT-like: min/max adjacent ΔE 2.5/5.4 · hue drift 12.4° · mapped 14
HCT-like has materially more hue drift in this ramp.
OKLCH contexts
Light context
Context preview only—not an accessibility approval.
Blue
Yellow
Green
Dark context
Context preview only—not an accessibility approval.
Body text uses the generated near-white neutral. Pure white is intentionally avoided because it can feel harsh or “vibrate” on a dark surface.
Blue
Yellow
Green
HCT-like contexts
Light context
Context preview only—not an accessibility approval.
Blue
Yellow
Green
Dark context
Context preview only—not an accessibility approval.
Body text uses the generated near-white neutral. Pure white is intentionally avoided because it can feel harsh or “vibrate” on a dark surface.
Blue
Yellow
Green