Color Picker

Understanding colour codes

Pick a colour and get its HEX, RGB and HSL values, ready to paste into CSS, design tools or documents. A HEX code such as #FF5733 is three pairs of hexadecimal digits for red, green and blue. FF is 255, 57 is 87 and 33 is 51, so the same colour in RGB is rgb(255, 87, 51).

Choosing colours that people can read

• Text needs enough contrast against its background. The WCAG accessibility guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text.
• Do not use colour alone to carry meaning, because some people cannot tell red from green.
• Limit a design to a primary colour, one accent and neutral shades so it looks consistent.

HSL for adjusting colours

HSL describes hue, saturation and lightness, which makes it easy to create lighter or darker variants of the same colour by changing only the lightness.