okLCH Colors
How we rebuilt OKLCH scales for product UI, tightened alpha ramps, and kept warm paper surfaces for long reading sessions.
Color system
Foundation tokens and full OKLCH ramps. Use spectrum hues for product meaning; neutrals and alpha ramps for surfaces, borders, and overlays.
Before
After
Hues
Ruby
25
50
100
200
300
400
500
600
700
800
900
950
975
Red
25
50
100
200
300
400
500
600
700
800
900
950
975
Orange
25
50
100
200
300
400
500
600
700
800
900
950
975
Yellow
25
50
100
200
300
400
500
600
700
800
900
950
975
Gold
25
50
100
200
300
400
500
600
700
800
900
950
975
Lime
25
50
100
200
300
400
500
600
700
800
900
950
975
Green
25
50
100
200
300
400
500
600
700
800
900
950
975
Jade
25
50
100
200
300
400
500
600
700
800
900
950
975
Teal
25
50
100
200
300
400
500
600
700
800
900
950
975
Cyan
25
50
100
200
300
400
500
600
700
800
900
950
975
Blue
25
50
100
200
300
400
500
600
700
800
900
950
975
Navy
25
50
100
200
300
400
500
600
700
800
900
950
975
Indigo
25
50
100
200
300
400
500
600
700
800
900
950
975
Violet
25
50
100
200
300
400
500
600
700
800
900
950
975
Purple
25
50
100
200
300
400
500
600
700
800
900
950
975
Magenta
25
50
100
200
300
400
500
600
700
800
900
950
975
Pink
25
50
100
200
300
400
500
600
700
800
900
950
975
Neutrals
Black (Opaque)
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Gray
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Zinc
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Ash
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Sage
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Sand
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Plum
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Steel
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Utility
Black
#0b0b0b
White
#ffffff
Transparent
transparent
Alpha
Black Alpha
25
50
75
100
200
300
400
500
600
700
800
900
950
975
White Alpha
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Gray Alpha
25
50
75
100
200
300
400
500
600
700
800
900
950
975
Dataviz
iframe
Behind the scenes
Luminance targets
| L (target) | L | C | H |
|---|---|---|---|
| 98 | 97.68 | 2.5 | 199.45 |
| 96 | 95.25 | 3.1 | 201.89 |
| 91 | 90.17 | 7.5 | 195.91 |
| 86 | 86 | 9.6 | 193.86 |
| 75 | 74.84 | 11.3 | 192.84 |
| 62 | 61.81 | 10 | 193.15 |
| 52 | 52.1 | 8.7 | 192.75 |
| 46 | 45.64 | 7.1 | 197.58 |
| 36 | 35.82 | 6.1 | 199.68 |
| 31 | 30.75 | 4.5 | 206.67 |
| 25 | 24.21 | 2.6 | 215.6 |
| 22 | 21.56 | 1.8 | 212.55 |
| 20 | 19.06 | 1.9 | 221.17 |
| Step | Chroma | H | C% | Cmax |
|---|---|---|---|---|
| 25 | 2.5 | 199.45 | 55 | 4.6 |
| 50 | 3.1 | 201.89 | 56 | 5.5 |
| 100 | 7.5 | 195.91 | 50 | 14.6 |
| 200 | 9.6 | 193.86 | 66 | 12.9 |
| 300 | 11.3 | 192.84 | 88 | 10.6 |
| 400 | 10 | 193.15 | 95 | 10.5 |
| 500 | 8.7 | 192.75 | 97 | 8.9 |
| 600 | 7.1 | 197.58 | 91 | 7.8 |
| 700 | 6.1 | 199.68 | 100 | 6.1 |
| 800 | 4.5 | 206.67 | 85 | 5.3 |
| 900 | 2.6 | 215.6 | 61 | 4.3 |
| 950 | 1.8 | 212.55 | 48 | 1.8 |
| 975 | 1.9 | 221.17 | 54 | 3.5 |