Color Converter — HEX, RGB, HSL

Convert between HEX, RGB, HSL and CMYK, and check the WCAG contrast ratio at the same time. All processing happens in your browser; your input is never sent to the server.

The same colour has a different notation in every context: HEX in CSS, RGB in canvas code, HSL when you want to adjust lightness without changing the hue, CMYK in print. This converter shows all four at once from any input, and calculates the WCAG contrast ratio against white and black so you know immediately whether text on that colour will be readable.

How to use it

  1. Type a colour in any format — #0e5a66, rgb(14, 90, 102) or hsl(188, 76%, 23%) — or use the picker.
  2. The preview bar shows the actual colour and every notation updates together.
  3. Copy whichever format your code needs.
  4. Check the two contrast rows before using the colour for text. A ratio below 4.5:1 fails WCAG AA for normal-size text.

Frequently asked questions

What counts as a passing contrast ratio?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA raises normal text to 7:1. The tool marks AA for you.
Why use HSL instead of HEX?
HSL separates hue, saturation and lightness, so you can build a palette by changing one number. Making a colour 10 percent lighter in HEX means recomputing three values.
Is the CMYK conversion print-accurate?
No, and no browser tool can be. It is the standard naive conversion. Real print work needs an ICC profile for the specific paper and press.
Are 3-digit HEX codes supported?
Yes. #0cf expands to #00ccff, exactly as CSS does.
Developer Tools