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.
Related tools
Colour mixer
Mix two colours and see what you actually get.
Palette generator
Five colours that go together. Lock the good ones, reroll the rest.
CSS gradient generator
Build a gradient that stays colourful in the middle.
Colour picker
One colour, every code, and what goes with it.
Contrast checker
Check whether text can actually be read on its background.
Colour from an image
Take any colour out of a picture, or the whole palette at once.
Black and white
Turn a picture monochrome, or adjust brightness and contrast.