Use the colour picker or type a value into any field: #1f5fbf, #15f, rgb(31, 95, 191), 31 95 191 or hsl(216, 72%, 44%). The other formats update immediately and each has a copy button.
The contrast boxes show the WCAG 2 contrast ratio of the colour as text on white and on black. Normal text needs at least 4.5:1 for level AA and 7:1 for AAA; large text (about 24 px, or 19 px bold) needs 3:1. The palette row mixes the colour with white and black in 20% steps, which is a quick way to build hover states and backgrounds.
Frequently asked questions
What is the difference between HEX and RGB?
They describe the same colour. HEX writes the red, green and blue values (0–255) in base 16; RGB writes them in decimal.
What does HSL mean?
Hue (0–360° around the colour wheel), saturation and lightness (both in %). It is handy for making lighter or darker versions of a colour.
What contrast ratio do I need for accessible text?
WCAG level AA asks for 4.5:1 for normal text and 3:1 for large text.