How to convert HEX, RGB and HSL colours and check contrast
Designers use HEX, CSS uses RGB and HSL, and accessibility requires enough contrast. Color converter handles all three.
Steps
- Enter a colour as HEX, RGB or HSL.
- Read the same colour in each format.
- Check the contrast grades against white and black.
The formats
- HEX
#1a73e8: three pairs of hexadecimal digits for red, green and blue. - RGB
rgb(26, 115, 232): the same values in decimal, 0-255. - HSL
hsl(217, 82%, 51%): hue (colour wheel angle), saturation and lightness. Easiest for making lighter or darker variants.
Contrast grades
Contrast ratio compares brightness of text and background. The tool grades it as:
- AAA at 7 or above: best for body text.
- AA at 4.5 or above: the common target for normal text.
- AA large text only at 3 or above: acceptable for big, bold text.
- Fails below 3.
Tips
- Mid-tone colours are often poor on both white and black; pick lighter or darker versions.
- Do not rely on colour alone to convey meaning; add labels or icons.
- For QR codes, keep a dark foreground on a much lighter background so phones scan reliably: QR code guide.