Color Guesser

#007FFF10 tints10 shades

Azure

Explore tints (mixed with white) and shades (mixed with black) for any color.

Base color

#

Variations

Export codeCSS, Tailwind, SCSS, JS, JSON, SVG

Click any swatch to copy HEX0 to 90% mix

TintsMixed with white

ShadesMixed with black

Export code

20 colors, named azure.

Format

Color values

variables.css

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

How it works

See the full range of tints and shades for any color, from near white to near black, with hex codes for every step.

01

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 nonlinear. Expect to drop a step or two at the light end.

Frequently asked

3 questions people ask about the tints and shades.

  1. 1What 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.

  2. 2How 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.

  3. 3Which 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