Lighter and darker steps of any colour. Copy a value, export the scale, or take the steps into a palette.
About these scales
Perceptual lightness
Steps are spaced evenly in OKLCH lightness. The hue stays the same and colourfulness tapers towards white and black, so every step can be shown in sRGB.
Mix with white and black
The classic digital tint and shade: your colour mixed with white or black in sRGB, the way many design tools do it.
Tones
Your colour mixed step by step with a mid grey: quieter, greyer versions. Enter several colours separated by commas to see their scales together and copy them all at once.
Developer scale
Eleven steps labelled 50 to 950 for CSS variables or Tailwind’s @theme. Your colour is placed, unchanged, at the nearest step. It is a generated scale, not an official framework palette.
Not a paint formula
These are screen colours. Adding white or black paint does not produce these exact steps, and a digital value says nothing about a paint’s light reflectance.