Colour picker and converter
HEX, RGB, HSL, contrast and shade scale.
How to use: colour picker and converter
Pick a colour and get its HEX, RGB and HSL values ready to copy into your CSS. It includes a WCAG contrast check against white and black text and a shade scale to help you build palettes.
What minimum contrast does accessibility require?
WCAG AA asks for a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
What is the difference between HEX, RGB and HSL?
They are three ways of writing the same colour: HEX in hexadecimal (#ff7a5c), RGB with red, green and blue, and HSL with hue, saturation and lightness, which is more intuitive for making variations.