A good scale looks like steps of one colour, evenly spaced to the eye. Choose how lightness and chroma behave, and see where a screen runs out of colour.
| Step | Colour | HEX | L | On white | On black | Gamut |
|---|---|---|---|---|---|---|
| 1 | #eff6ff | 97 | 1.1:1 | 19.3:1 | Reduced, lost 63% chroma | |
| 2 | #c3deff | 89 | 1.4:1 | 15.2:1 | Reduced, lost 30% chroma | |
| 3 | #97c5ff | 81 | 1.8:1 | 11.8:1 | Reduced, lost 13% chroma | |
| 4 | #6aabfc | 73 | 2.4:1 | 8.8:1 | Fits | |
| 5 | #4892ea | 65 | 3.2:1 | 6.6:1 | Fits | |
| 6 | #2a79d3 | 58 | 4.4:1 | 4.8:1 | Fits | |
| 7 | #1061b5 | 50 | 6.2:1 | 3.4:1 | Fits | |
| 8 | #004b93 | 42 | 8.7:1 | 2.4:1 | Fits | |
| 9 | #00366e | 34 | 12.0:1 | 1.8:1 | Reduced, lost 1% chroma | |
| 10 | #032348 | 26 | 15.7:1 | 1.3:1 | Fits | |
| 11 | #051222 | 18 | 18.8:1 | 1.1:1 | Fits |
This is the same seed with white and black mixed in. Compare how the middle holds its colour, and how the ends go chalky or dirty.
Use it for interface colour ramps, tonal charts, and tonal outfits or rooms where you want to see how one hue behaves from pale to deep.
Even steps here are even on a screen. Paint, fabric and print have their own limits, and a scale of pale tints can shift hue in a real pigment even when the numbers are steady.
Step contrast is a measurement, not a guarantee. Check real text sizes and pairs with the contrast checker. There is no fixed meaning to a step name, so nothing here assumes the numbering of any framework.
Mixing with white and black changes chroma and hue as well as lightness, which is why blue tints drift towards purple and yellow shades go green-brown. OKLCH separates lightness, chroma and hue, so each can be set on its own and a step of lightness looks about the same at any hue.
Each step takes a planned lightness and chroma. If that colour does not exist in sRGB, chroma is reduced until it fits, keeping lightness and hue, and the table shows how much was lost. Chroma taper eases the ends, where a screen has the least room.