What it does: HEX and RGB color picker

Pick a colour with the visual picker or type its code to instantly get its HEX, RGB and HSL values, ready to paste into CSS or your design tool.

You'll also see whether the colour works as a background for white or black text according to the WCAG AA and AAA contrast levels.

How to use it

#8E73FF is rgb(142, 115, 255) and hsl(252, 100%, 73%).

Raise the HSL lightness while keeping hue and saturation to get a lighter version of the same colour.

HEX accepts 3, 4, 6 or 8 digits; 4 and 8 include transparency (alpha).
HSL values are rounded to whole numbers, so HEX → HSL → HEX may shift by one unit.
WCAG 2.x requires at least 4.5:1 contrast for normal text (AA) and 7:1 for AAA.

What's the difference between RGB and HSL?

RGB says how much red, green and blue a colour has; HSL describes it by hue, saturation and lightness, which is more intuitive for making variations.

Why is my HEX code invalid?

It needs 3, 4, 6 or 8 characters from 0–9 and A–F. Letters like G or O don't exist in hexadecimal.

What does AA mean?

It's the accessibility conformance level most regulations require: text that's readable for most people with low vision.

Related guides

Size, contrast, quiet zone, error correction and content types: the checklist before you print a QR code.

What 4.5:1, AA and AAA mean, how to check them and how to build a palette everyone can read.