Shades and tints
Build a full scale from one colour, light through dark.
Tints — mixed towards white
Shades — mixed towards black
Tones — mixed towards grey
One brand colour is never enough: you need a lighter one for a background, a darker one for a hover state and something muted for a border. This produces all three families at once. Tints are mixed towards white, shades towards black, tones towards grey, and each step is copied with a click.
How to use it
- Enter your colour.
- Read across the three scales.
- Click any swatch to copy its hex.
Why use this tool
Completely private
Everything runs inside your browser. Your files and text are never sent to a server.
Free, with no limits
No sign-up, no watermarks and no cap on how many times you can use it.
Instant results
There is no upload or queue to wait for, so results appear as fast as your device can work.
Works on any device
Runs in any modern browser on phone, tablet or desktop. Nothing to install.
Frequently asked questions
- What is the difference between a tint, a shade and a tone?
- A tint adds white and gets lighter. A shade adds black and gets darker. A tone adds grey and gets quieter without getting much lighter or darker, which is often what a border or a disabled state wants.
- Are these ready to use as a design scale?
- They are a good starting point and evenly spaced by construction. For a real interface scale, check the steps you will put text on with the contrast checker; even spacing and readable spacing are not the same thing.
- Why do some steps look closer together than others?
- Because the eye is not linear. Mixing in equal amounts does not produce equally different-looking colours, particularly near white where small changes are hard to see.