Shades and Tints Generator
Generate both shades and tints of a colour — darker and lighter variations.
Darker and lighter, from one colour
From a single colour you can derive a whole family: shades (the colour mixed toward black) and tints (mixed toward white), plus tones (mixed toward grey). This generates the shades and tints of a colour, giving you a graduated range of darker and lighter versions to build a design around.
Enter a colour to generate its shades and tints.
Shade, tint and tone
The terms are worth knowing because they describe distinct things: a shade darkens a colour toward black, a tint lightens it toward white, and a tone mutes it toward grey. A design needs the range — tints for soft backgrounds and hover states, shades for depth and emphasis, all derived from the same base so they stay coherent. Generating them from one colour keeps the family consistent, which hand-picking each variation does not. A subtlety is that naively mixing toward pure black or white can look muddy or washed out, so good shade-and-tint scales adjust more carefully to keep each variation feeling like a healthy version of the original colour rather than a greyed-out one.
Shades and Tints Generator FAQ
What is the difference between a shade and a tint?
A shade darkens a colour toward black; a tint lightens it toward white. A tone mutes it toward grey. Together they give a full range from one colour.
Why generate them from one base colour?
To keep the family coherent — tints for backgrounds and hovers, shades for depth — all consistent, which hand-picking each variation does not achieve.
Is anything uploaded?
No. The variations are generated in your browser.