RunTheTests
/

Colour Picker

Pick a colour, get every format, its tints and shades, and its real contrast.

What you provide

CSS custom properties

--color-shade-3: #073c92;
--color-shade-2: #0a5adb;
--color-base-2: #3c83f6;
--color-tint-1: #85b2f9;
--color-tint-2: #cee0fd;

Result

#3C83F6 — with its tints and shades

The steps either side of the base are lightness variations at the same hue and saturation — the usual source of hover, border and disabled states. Note the contrast figures rather than the swatches: this colour passes for large text on white but not for body text — use a darker shade for paragraphs.

Aa

Shade 3

#073C92 · 10.1:1 on white

Aa

Shade 2

#0A5ADB · 6.0:1 on white

Aa

Base

#3C83F6 · 3.6:1 on white

Aa

Tint 1

#85B2F9 · 2.2:1 on white

Aa

Tint 2

#CEE0FD · 1.3:1 on white

Diagnostic telemetry
Hex
#3C83F6
RGB
rgb(60, 131, 246)
HSL
hsl(217, 91%, 60%)
Contrast on whiteWCAG AA needs 4.5:1 for body text, 3:1 for large text
3.64:1
Contrast on black
5.77:1

What this cannot tell you

  • Contrast figures use the WCAG 2 relative-luminance formula. It is the standard everyone tests against and it is known to be imperfect for very dark colours and thin type — treat a marginal pass as marginal.
  • Tints and shades are lightness steps in HSL, which is not perceptually uniform. Two swatches at the same lightness value can look markedly different in brightness, so check the ratios rather than the swatches.
  • The screen eyedropper is a Chromium feature. Where it is missing, the colour field and the text input work everywhere — nothing else about the tool changes.
  • Colours are handled in sRGB. Wide-gamut displays, colour profiles and print reproduction will all shift what you see from what a hex value specifies.

Take this with you

How this processes your file

Pick a colour with the swatch, type any hex, rgb() or hsl() value, or use the screen eyedropper where the browser has one. The tool converts between formats and generates the lightness steps either side of it — the tints and shades most interfaces need for hover, border and disabled states. Alongside every swatch is its contrast against white and against black, calculated with the WCAG relative-luminance formula, because the single most useful thing to know about a colour is not its hue but whether text can sit on it.

What the results mean

Contrast on white
WCAG AA wants 4.5:1 for body text and 3:1 for large text. Below 3:1 the colour cannot carry text on white at any size — but it can still be a background.
HSL
Hue, saturation, lightness. Easier to reason about than hex for building variations, and what the tints and shades are generated in.
Tints and shades
The same hue and saturation at higher and lower lightness. The usual source of hover states, borders and disabled variants from one brand colour.
sRGB
The colour space the web assumes. A hex value is a coordinate in it, and a wide-gamut display may show it more vividly than a standard one.

Common problems and fixes

My brand colour fails contrast for text
Use it as a background or a border and take text from one of the darker shades. Very few vivid brand colours pass as body text on white, and darkening the text version is standard practice rather than a compromise.
The eyedropper button does nothing
The screen eyedropper only exists in Chromium browsers. Everywhere else, take a screenshot and read the colour there, or paste the value in directly.
The colour looks different in my design tool
Check the colour profile. A hex value is sRGB by definition; a document in Display P3 or Adobe RGB will render the same numbers differently.

Frequently asked questions

What is the difference between hex, RGB and HSL?

They describe the same sRGB colour three ways. Hex and RGB are the same numbers in different notation — red, green and blue channels from 0 to 255. HSL restates that as hue, saturation and lightness, which is far easier to work with when you want a lighter version of the same colour rather than an unrelated one.

How do I make lighter and darker versions of a colour?

Change the lightness in HSL and leave hue and saturation alone, which is what the steps above do. Mixing with white or black in RGB instead tends to wash the colour out, because it drags saturation down at the same time.

Is this colour accessible?

That question only has an answer for a pair of colours. The ratios above tell you whether this colour works as text on white or on black; for any other background, the contrast checker takes both colours and gives the pass or fail directly.

More in Colour