What the ten steps are for
Ten steps per hue is enough to build a whole component without leaving the column: pick one hue for the brand, then walk down it for backgrounds, borders and text. The convention below is what the scale was designed around.
- 0 – 1
- Page and section backgrounds
- 2 – 3
- Cards, hovers, inset panels
- 4 – 6
- Borders, dividers, disabled states
- 7 – 8
- Secondary and body text
- 9
- Headings, icons, the one emphasis colour
Because every hue shares the same ten lightness stops, mixing two hues at the same step keeps them in balance — blue 7 and red 7 carry the same visual weight, which is what makes the system usable for text and icons rather than just decoration.
Where this data comes from
Open Color is an open-source colour scheme by Yeun (heeyeun), released in 2016 under the MIT licence. The hex values here are copied verbatim from the upstream JSON — nothing was adjusted, re-tinted or averaged. RGB, CMYK, LAB and HSL are computed once at seed time, and the black-or-white text on each swatch is decided by relative luminance.
Source: yeun.github.io/open-color · github.com/yeun/open-color · MIT, © 2016 heeyeun.