Color Shades, Tints & Mixer
Turn any colour into tint, shade and tone ramps, or blend two colours into a stepped mixing scale — the basis of a systematic design palette.
Click any swatch to copy its hex code.
Even tint percentages give badly uneven shades
The obvious way to build a tint scale is to mix the base colour with white in even steps — 20%, 40%, 60%, 80%. Those steps are even in the code and are not even on screen, because sRGB values are not proportional to light.
Measuring the change in perceived lightness across each step of that ramp:
| Base | Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Largest ÷ smallest |
|---|---|---|---|---|---|---|
| Red | 0.063 | 0.108 | 0.160 | 0.219 | 0.282 | 4.5× |
| Blue | 0.083 | 0.125 | 0.173 | 0.225 | 0.280 | 3.4× |
| Green | 0.084 | 0.106 | 0.131 | 0.157 | 0.185 | 2.2× |
| Orange | 0.084 | 0.103 | 0.124 | 0.146 | 0.169 | 2.0× |
Every ramp accelerates — each step is larger than the one before — and the red ramp's final step is 4.5 times its first. The scale creeps at the dark end and lurches at the light end, which is exactly why hand-built palettes so often have two shades that are hard to tell apart and then a jump.
It is worth ruling out the obvious suspect, because it is not guilty. Mixing toward white or black does not shift the hue at all — measured across four base colours at ten mix levels, the drift is zero to the limits of floating point. Linear interpolation toward pure white or pure black preserves the relationships that define hue. The problem is entirely in the spacing, not the colour.
Even steps need uneven percentages
Solving for the mix fractions that do produce equal lightness steps, for that same red:
| Step 1 | Step 2 | Step 3 | Step 4 | |
|---|---|---|---|---|
| Naive | 20% | 40% | 60% | 80% |
| For even steps | 39.4% | 60.2% | 75.8% | 88.8% |
Naive 20/40/60/80 — note the crowding at the left
Corrected — evenly spaced to the eye
The first real step is nearly double the naive one, and by the end the two have converged. A ramp built from those fractions comes out 1.00× uneven — flat — against 4.5× for the naive version. The same correction flattens the ramp for every base colour tried, so it is a property of the arithmetic rather than of one hue.
If you are generating a scale by hand, front-loading it like that gets much closer than even
spacing does. If you would rather not think about it, pick colours in a perceptual space
instead — oklch() is supported in every current browser, and there equal steps in
the lightness channel really are equal steps to the eye, which is the whole thing sRGB never
promised.
How to use
- Pick a base colour.
- Choose tints, shades, tones or a two-colour blend.
- Set how many steps you want.
- Copy the values as hex or CSS variables.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint adds white, a shade adds black, and a tone adds grey. They are distinct operations with distinct results: tinting keeps a colour bright while lightening it, toning reduces its intensity without necessarily changing its lightness much.
Why do my evenly spaced steps not look evenly spaced?
Because perceived lightness is not linear in the values you are adjusting. Stepping the lightness channel by equal amounts in a naive colour space produces ramps that bunch at one end. Working in a perceptually uniform space such as OKLCH gives steps that actually look even.
How many steps should a colour scale have?
Nine to eleven is the common convention in design systems, which gives enough range for backgrounds, borders, text and hover states without becoming unwieldy. Naming them by number rather than by adjective avoids the trap of running out of words between light and lighter.
Should every colour in my system have the same scale?
Ideally, yes, with steps that correspond in lightness across hues. That way swapping a component from blue to red keeps the same contrast relationships and nothing breaks. Achieving it needs a perceptual colour space, since equal lightness in different hues does not mean equal channel values.
What is the difference between mixing and interpolating?
Mixing usually means combining two colours as pigments or light would combine; interpolating means stepping between them mathematically in some colour space. Which space you interpolate in changes the result dramatically — blue to yellow through one space passes through grey, and through another through green.
Can I use these shades for text?
Only after checking contrast. A ramp gives you related colours, not accessible ones, and the middle of any scale is usually the danger zone — too dark for a light background and too light for a dark one. Check each pairing you intend to use for text.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.