TOOLA full color scale from one color
Design systems rarely use a single flat colour — they use a scale of lighter and darker versions for hover states, borders, backgrounds and more. This tool takes one base colour and generates evenly-stepped tints (toward white) and shades (toward black), each with a copy-ready HEX code.
Shade vs. tint
- Tint — the colour blended with white, so it gets lighter.
- Shade — the colour blended with black, so it gets darker.
Each step mixes a fixed percentage of white or black into the base, giving a smooth, predictable range.
Where it fits
Build a matching set of hues first with the palette generator, then use these shades for states and depth. Check text stays readable on any shade with the contrast checker.
Steps are mixed in RGB, which is simple and predictable. For perceptually even scales, designers sometimes tune the darker shades by hand.
Frequently asked questions
What is the difference between a shade and a tint?
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. Together they give you a full lightness scale from one base color.
What are color shades used for?
Design systems use a scale of shades and tints of a brand color for things like hover states, borders, backgrounds and disabled elements, so everything stays visually consistent.
How are the shades calculated?
Each tint blends the base color toward white by a percentage, and each shade blends it toward black. Mixing happens on the RGB values, so the steps are evenly spaced in lightness.