Tints, shades and how this tool makes them
Painters have used the words for centuries: a tint is a colour with white mixed in, a shade is a colour with black mixed in. On screen the mixing is arithmetic. Each of the red, green and blue channels is nudged towards 255 to make a tint, or towards 0 to make a shade, by a chosen strength:
This tool generates five of each, at strengths of one sixth, two sixths, three sixths, four sixths and five sixths, which is roughly 17%, 33%, 50%, 67% and 83%. Even spacing means the swatches form a usable scale rather than bunching up near the original, and stopping short of a full mix means the last tint is nearly white and the last shade nearly black without wasting a swatch on either extreme. Every result is rounded to a whole channel value and shown as a hex code you can copy with a click.
Worked examples
Where a colour scale earns its keep
One good colour is rarely enough to build with. An interface needs the same blue as a solid button, a paler blue for its hover state, a whisper of blue behind a selected row, a darker blue for the pressed state and a near-navy for text that has to sit on the pale versions. Reaching for new hues for each of those jobs makes a design feel patched together; stepping a single hue up and down keeps it coherent. That is exactly what a tint and shade scale gives you, and it is why design systems publish colours as numbered ramps (blue-100 through blue-900) rather than as one swatch. The light end of your scale also doubles as accessible backgrounds: a 17% or 33% tint behind dark text usually passes contrast requirements easily, whereas coloured text on a coloured background needs checking with a contrast checker before you commit.
Tips for picking from the scale
Skip steps deliberately. Adjacent swatches can be too close to tell apart in real use, so pairing the 33% tint with the 50% shade, say, gives a clearer relationship than neighbouring steps. Remember that tints drain saturation, which flatters backgrounds but can make large filled areas look chalky; if a tint feels lifeless, generate the scale again from a slightly more saturated base. Shades do the opposite and can drift towards mud on warm colours like orange and yellow, where a small hue shift towards red often looks richer than pure darkening. And if you need ten related colours rather than ten strengths of one colour, a palette generator is the better tool for the job. Everything here runs in your browser and no colour you pick is sent anywhere.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is your colour mixed with white, so it gets lighter. A shade is your colour mixed with black, so it gets darker. There is a third term, tone, for a colour mixed with grey, which mutes it without much changing how light it is.
How are the tints and shades calculated?
Each red, green and blue channel is moved towards 255 for tints or towards 0 for shades, in five equal steps of one sixth. That gives mixes of roughly 17%, 33%, 50%, 67% and 83%, so the last swatch in each row is close to white or black but never quite reaches it.
Why do my tints look washed out?
Mixing white into a colour lowers its saturation as well as raising its lightness, so strong brand colours can turn pastel quickly. That is often exactly what you want for backgrounds. If you need a lighter colour that keeps its intensity, try raising lightness in HSL instead and nudging saturation back up.
What are shades and tints actually used for?
They are the workhorses of interface design. Tints make hover states, selected rows, subtle backgrounds and disabled states, while shades make borders, pressed buttons and text that sits on the tinted versions. Using steps of one colour keeps a design coherent instead of introducing new hues.
Why does black only produce grey swatches?
Tints of black are simply greys, because mixing white into pure black raises all three channels equally. The same happens in reverse with white, whose shades are the same greys. Every neutral grey behaves this way, since there is no hue to preserve.