What is the difference between a tint and a shade?

A tint is the color mixed with white, making it lighter. A shade is the color mixed with black, making it darker.

How many tints and shades do I need for a design system?

Around nine steps in total covers most needs: three or four tints for backgrounds and surfaces, the base color, and four or five shades for borders, hover states, and text.

Which shade should I use for text on a light background?

Start about two thirds of the way toward black and check it with a contrast checker. Body text needs 4.5:1 against the background under WCAG AA.

Color Tool

Tints & Shades

Explore tints (mixed with white) and shades (mixed with black) for any color. Click any swatch to copy its hex value.

Export Code

:root {
  --color-tint-0: #007FFF;
  --color-tint-10: #1A8CFF;
  --color-tint-20: #3399FF;
  --color-tint-30: #4DA5FF;
  --color-tint-40: #66B2FF;
  --color-tint-50: #80BFFF;
  --color-tint-60: #99CCFF;
  --color-tint-70: #B3D9FF;
  --color-tint-80: #CCE5FF;
  --color-tint-90: #E6F2FF;
  --color-shade-0: #007FFF;
  --color-shade-10: #0072E6;
  --color-shade-20: #0066CC;
  --color-shade-30: #0059B3;
  --color-shade-40: #004C99;
  --color-shade-50: #004080;
  --color-shade-60: #003366;
  --color-shade-70: #00264D;
  --color-shade-80: #001933;
  --color-shade-90: #000D1A;
}

Building a usable range

Tints go toward white, shades go toward black. Together they give you the vertical axis of a color system: backgrounds from the tints, borders and hover states from the near steps, text from the deep shades.

Steps are not perceptually even. The difference between the two lightest tints is much harder to see than the same numeric gap in the middle, because perception of lightness is non-linear. Expect to drop a step or two at the light end.

Frequently asked

What is the difference between a tint and a shade?: A tint is the color mixed with white, making it lighter. A shade is the color mixed with black, making it darker.
How many tints and shades do I need for a design system?: Around nine steps in total covers most needs: three or four tints for backgrounds and surfaces, the base color, and four or five shades for borders, hover states, and text.
Which shade should I use for text on a light background?: Start about two thirds of the way toward black and check it with a contrast checker. Body text needs 4.5:1 against the background under WCAG AA.

Related tools

← All tools