Shades & Tints Generator
Generate lighter tints and darker shades of any color — perfect for hover states and design systems.
This tool generates lighter tints and darker shades of any colour, giving you a full scale from one base. A tint is your colour mixed with white; a shade is mixed with black. A consistent set of tints and shades becomes your hover states, borders, backgrounds and disabled states — the backbone of any design system.
A practical scale has about 9–10 steps from very light to very dark, like the 50–900 scales in popular design systems. As tints get lighter, remember to keep enough contrast for any text placed on them.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a colour mixed with white (lighter); a shade is a colour mixed with black (darker). A tone is mixed with grey (more muted).
How many shades should I generate?
Around 9–10 steps from very light to very dark gives you enough range for backgrounds, borders, text and interactive states.
What are shades and tints used for?
Hover and pressed button states, section backgrounds, borders and disabled elements — all in the same colour family for a coherent UI.
Does this upload my colours?
No, everything is calculated in your browser. Nothing is stored or transmitted.