Colour picker and palettes

Colour formats

Contrast, for readable text

The web accessibility guidelines (WCAG) ask for a contrast of at least 4.5:1 for normal text (level AA) and 7:1 for level AAA. Large text only needs 3:1. The tool calculates the contrast of your colour on white and on black: you know straight away whether it works for text.

Building a palette

• Shades: the same hue from lightest to darkest, for backgrounds, borders and hover states.
• Complementary: the opposite colour on the colour wheel, for strong contrast.
• Analogous: neighbouring hues, for a soft, harmonious set.
• Triadic and tetradic: three or four hues spread around the wheel, for richer palettes.

On a computer, the eyedropper picks the colour of any point on your screen, when your browser supports it.

Frequently asked questions

How do I convert a HEX code to RGB?

Paste the HEX code into the field: the tool immediately shows its RGB, HSL and CMYK values, each with a copy button.

What contrast is needed for readable text?

At least 4.5:1 between text and background for normal text, 3:1 for a large heading. The tool shows whether your colour reaches these thresholds.

Are the CMYK values exact for printing?

They are indicative: the exact conversion depends on the printer's colour profile. Ask for their profile for a faithful result.