How to use the tints and shades generator
- Pick the Base colour.
- Set Steps each way between 1 and 12. The result updates as you change it.
- Choose Mix in: sRGB or OKLab.
- Tick Include tones (mixed with grey) if you also want muted versions.
- Copy swatches directly, or download the All values table as a CSV file.
What it does and when to use it
One brand colour is rarely enough. Buttons need a darker hover state, alerts need a pale background, and charts need lighter and darker steps of the same hue. This tool builds those steps by mixing your colour with white, black and grey in equal increments, so every step has a clear, repeatable rule behind it.
It suits quick work such as backgrounds for a callout, borders, or a short ramp for a chart. If you want named 50–900 steps for a design system, the Material tonal palette follows that convention. To nudge one colour by a set amount, use lighten / darken. For a pale, soft version of a strong colour, try the pastel generator.
How it works
For N steps each way, the mix fractions are t = 1/(N+1), 2/(N+1) … N/(N+1). Each step is an interpolation between the base and the target:
result = base + (target − base) × t
The target is white for tints, black for shades and #808080 for tones. In sRGB this happens on the usual 0–255 channel values. In OKLab it happens on perceptual lightness and colour axes, and the result is converted back to sRGB.
Worked examples
These come straight from the generator.
Pure red, 3 steps, sRGB. Tints are #ff4040 (25%), #ff8080 (50%) and #ffbfbf (75%). Shades are #bf0000, #800000 and #400000. Each value is just the channel arithmetic: half of 255 toward black is 128, which is 80 in hex.
Sky blue #0ea5e9, 3 steps, sRGB versus OKLab.
| Step | sRGB | OKLab |
|---|---|---|
| Tint 50% | #87d2f4 | #9ed3f6 |
| Shade 50% | #075375 | #023d5a |
| Tone 50% | #4792b4 | #6094b4 |
OKLab gives a slightly lighter mid tint and a clearly darker mid shade.
Limits and tips
- Mixing with white also lowers saturation, so pale tints can look washed out. For pale colours that keep more of their colour, use the pastel generator.
- Steps are equal in mix amount, not in contrast. Check text pairs in the contrast checker before you use a step for type.
- Very dark or very light base colours leave little room on one side; their tints or shades will bunch together.
- It all runs in your browser.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
How are the steps spaced?
Should I choose sRGB or OKLab?
Which grey is used for tones?
Can I get the values into a spreadsheet?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.