Tints, tones and shades: how to build a colour scale

Tints, tones and shades are the three ways to change a colour without changing its hue. A tint is the colour mixed with white, so it gets lighter and softer. A shade is the colour mixed with black, so it gets deeper. A tone is the colour mixed with grey, so it gets quieter and more muted. Think of tints tones and shades as white, grey and black added to one hue. Put a run of tints and shades in order and you have a colour scale: the tool that turns a single brand colour into something you can actually design with.

Tint vs tone vs shade, side by side

The easiest way to see the difference is to start from one colour and push it three ways. Here the base is a violet, #7c3aed, mixed in 20 percent steps.

What tints, tones and shades do to a design

Each direction changes the mood as much as the colour. Tints read as gentle, young and open, which is why pastel colour palettes are mostly tints. Shades read as rich, serious and premium, the territory of dark colour palettes. Tones read as grown up and natural, the base of almost every muted colour palette.

How to build a colour scale from one hex

Most design systems number their scale from 50 or 100 (lightest) to 900 (darkest), with the brand colour somewhere near 500. Consistency matters more than the numbers: every colour in your system should have the same steps, so 200 always means a light background and 700 always means text. Five well chosen steps beat eleven that nobody can tell apart, and you can add the in between steps once real designs show where they are missing.

1. 1

   Place your brand colour

   Decide which step it belongs to. A mid colour like #7c3aed sits at 500; a very dark brand navy might sit at 800.

2. 2

   Make the light end

   Mix towards white for 400 down to 50. The lightest step should be barely coloured, light enough for a page background.

3. 3

   Make the dark end

   Mix towards black for 600 up to 900. The darkest step should be dark enough for body text on the lightest one.

4. 4

   Even out the steps

   Look at the row from a distance. If two neighbours look almost identical and another gap looks like a jump, adjust them by eye.

5. 5

   Shift hue slightly at the ends

   Pure black can make shades look dirty. Many designers nudge dark steps a few degrees towards blue or violet and light steps towards warm.

6. 6

   Check the pairs that will meet

   Test text steps on background steps for contrast, using colour contrast and accessibility as the guide.

Make tints and shades in CSS

You no longer need to calculate every step by hand. CSS color-mix() mixes two colours in a chosen colour space, so a whole scale can follow one variable. Mixing in OKLCH keeps the steps more even to the eye than plain sRGB, a point covered in OKLCH explained. Browser support is broad; check color-mix() on MDN for details.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Tints and shades in gradients

The cleanest gradients are often just one hue moving from tint to shade. Because nothing crosses the colour wheel, there is no grey band in the middle, and the result reads as light falling on a single material. Monochromatic colour schemes use the same idea for whole palettes.

A Gradiently Mark works in a similar way: a recipe of related colours with light running through it. When you design on one, the colours near your words deepen or lift so text stays readable without a box behind it.