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

[Canonical HTML page](https://gradiently.design/guide/tints-tones-shades)

One brand colour is never enough to design with. Tints, tones and shades turn it into a whole family, and a good scale is what lets a palette carry text, buttons, backgrounds and charts.

## The short version

- Tints, tones and shades are three ways to vary one colour: a tint adds white, a tone adds grey and a shade adds black.
- Tints feel lighter and softer, tones feel calmer and more muted, and shades feel deeper and more serious.
- A colour scale is a row of tints and shades of one hue, usually numbered from 50 or 100 for the lightest to 900 for the darkest.
- Mixing in a perceptual colour space such as OKLCH keeps the steps of a scale looking evenly spaced.
- A good scale gives every step a job, such as backgrounds, borders, text and hover states, and checks contrast between the steps that will meet.

**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.

| Type | Mixed with | Effect | Example from #7c3aed |
| --- | --- | --- | --- |
| Tint | White | Lighter, softer, airier | `#b089f4` at 40 percent white |
| Tone | Grey | Muted, calmer, more natural | `#7e64ac` at 60 percent grey |
| Shade | Black | Deeper, heavier, more serious | `#4a238e` at 40 percent black |

The hue stays violet in every case. Only lightness and saturation change.

- Tint 90%: #f2ebfd
- Tint 60%: #cbb0f8
- Tint 20%: #9661f1
- Base violet: #7c3aed
- Shade 20%: #632ebe
- Shade 60%: #32175f
- Shade 80%: #190c2f

Tints to the left, shades to the right. This row is already most of a usable scale.

- Base violet: #7c3aed
- Tone 20%: #7d48d7
- Tone 40%: #7e56c1
- Tone 60%: #7e64ac
- Tone 80%: #7f7296

Tones keep roughly the same lightness and drain colour instead, which is why tone led palettes feel calm and grown up.

## 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](https://gradiently.design/guide/pastel-color-palettes) are mostly tints. Shades read as rich, serious and premium, the territory of [dark colour palettes](https://gradiently.design/guide/dark-color-palettes). Tones read as grown up and natural, the base of almost every [muted colour palette](https://gradiently.design/guide/muted-color-palettes).

- Tints: soft and open: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tones: calm and grown up: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Shades: deep and serious: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

The same violet pushed three ways. Tints lift the mood, tones quieten it and shades give it weight.

## 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. **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. **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. **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. **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. **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. **Check the pairs that will meet** Test text steps on background steps for contrast, using [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) as the guide.

| Step | Hex | Typical job |
| --- | --- | --- |
| 50 | `#f2ebfd` | Page or card background |
| 100 | `#e5d8fb` | Subtle fills, selected rows |
| 200 | `#cbb0f8` | Borders, dividers, disabled states |
| 400 | `#9661f1` | Icons, large decorative shapes |
| 500 | `#7c3aed` | Brand colour, primary buttons |
| 600 | `#632ebe` | Button hover, links |
| 700 | `#4a238e` | Headings on light backgrounds |
| 800 | `#32175f` | Body text on tints |
| 900 | `#190c2f` | Dark mode background |

A violet scale with a job for each step. White on 500 is about 5.7:1 and step 800 on step 100 is about 10.9:1, both above the 4.5:1 guideline.

## 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](https://gradiently.design/guide/oklch-explained). Browser support is broad; check [color-mix() on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) for details.

```css
: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);
}
```

Change `--brand` and every tint, shade and tone updates with it.

## 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](https://gradiently.design/guide/monochromatic-color-scheme) use the same idea for whole palettes.

- Violet, tint to shade: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violet, lit from above: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terracotta, tint to shade: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Lilac tint to violet tone: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Single hue blends. Each one borrows only from its own scale.

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.

## FAQ

### What is the difference between a tint, a tone and a shade?

A tint is a colour mixed with white, a tone is a colour mixed with grey and a shade is a colour mixed with black.

### Is a pastel a tint?

Yes. Pastels are tints: colours lightened with a lot of white, which makes them soft and low in intensity.

### How many steps should a colour scale have?

Most design systems use nine to eleven steps, numbered 50 or 100 to 900. Fewer steps can work for small projects, as long as each one has a clear job.

### How do I make a darker shade of a colour in CSS?

Use `color-mix(in oklch, yourcolour 70%, black)` and adjust the percentage. Lower percentages give darker shades.

### Why do my shades look muddy?

Mixing with pure black also drains saturation. Mix in OKLCH, and try nudging the darkest steps slightly towards blue or violet to keep them rich.