Color Picker

Pick a color, get every format, and see how it performs against WCAG contrast thresholds.

Tints and shadesClick any swatch to copy
Contrast against WCAG thresholds

Features

  • HEX, RGB, HSL and HSV output for every color
  • Eleven-step tint and shade ramp
  • WCAG AA and AAA contrast ratios against black and white
  • Click any swatch to copy its hex value
  • Paste a hex value to jump straight to it

How to use it

  1. Click the color field, or paste a hex value.
  2. Read off whichever format you need.
  3. Use the ramp for hover and active states.
  4. Check the contrast panel before shipping text on this color.

Reading the contrast numbers

WCAG expresses contrast as a ratio between two relative luminance values, running from 1:1 (identical) to 21:1 (black on white). Body text needs at least 4.5:1 to meet AA, and 7:1 to meet AAA. Large text, 18pt regular or 14pt bold and above, gets a lower bar of 3:1 for AA.

The panel above tells you which of black or white text passes on your chosen color. If neither reaches 4.5:1, the color is too mid-tone to carry text at all; darken or lighten it before using it as a background. Note that contrast ratio is a proxy for legibility, not a guarantee of it, it says nothing about font weight, size or the surrounding layout.

Frequently asked questions

Yes, with no limits, no account and no paid tier.
HEX, RGB, HSL and HSV for every colour, plus an eleven-step tint and shade ramp you can use for hover and active states. Every value is one click to copy.
WCAG expresses contrast as a ratio between two relative luminance values, running from 1:1 for identical colours to 21:1 for black on white. Body text needs at least 4.5:1 to meet AA, and 7:1 to meet AAA. Large text, 18pt regular or 14pt bold and above, has a lower bar of 3:1 for AA. The panel tells you whether black or white text passes on your chosen colour. If neither reaches 4.5:1, the colour is too mid-tone to carry text and should be lightened or darkened before use as a background.
Yes. Once the page has loaded once, the service worker caches it and the tool keeps working with no connection. Nothing about it depends on a server.

Related tools

Further reading

📖 Understanding Color on the Web: Hex, RGB and HSL

Read the full guide on the 123MiniApps blog.

Pick a theme

Ten hand-tuned palettes.