Build a 10-Step Colour Scale From One Brand Colour
A 50–900 scale from #2563eb with each step's contrast on white, and which steps work for text.
By the TurantTools Dev team · Updated October 27, 2026 · 3 min read
Design systems use a scale of 10 shades per colour, from 50 (near white) to 900 (near black). You can build a usable one from a single brand colour by keeping its hue and stepping the lightness.
A scale from #2563eb
| Step | Colour | Contrast on white | AA text on white |
|---|---|---|---|
| 50 | #ecf2fd | 1.12 | Fail |
| 100 | #d5e1fb | 1.31 | Fail |
| 200 | #abc3f7 | 1.76 | Fail |
| 300 | #789ef3 | 2.63 | Fail |
| 400 | #4479ee | 4.02 | Fail |
| 500 | #1558ea | 5.80 | Pass |
| 600 | #1248c0 | 7.73 | Pass |
| 700 | #0e3a9a | 10.04 | Pass |
| 800 | #0b2c75 | 12.87 | Pass |
| 900 | #071e4f | 16.05 | Pass |
- Use the steps that pass AA (here 500 and darker) for text on white; lighter steps for backgrounds and borders.
- Equal HSL lightness steps don't look equally spaced to the eye; OKLCH gives more even scales if your tools support it.
- Check yellows and cyans carefully: they need much darker steps to pass.