🎨 Color Converter

Type any colour format and get all the others – plus contrast ratios against white and black for accessible text.

🔒 Runs in your browser · files never uploaded

Contrast (WCAG 2.x)

How to use the Color Converter tool

  1. Type a colour (#ff0000, rgb(), hsl(), cmyk() or a name) or use the picker.
  2. Copy any format with its Copy button.
  3. Check the WCAG AA/AAA badges before using it for text.

Frequently asked questions

What contrast ratio do I need for accessible text?

WCAG 2.x AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). AAA requires 7:1 and 4.5:1. The badges show pass or fail for each against white and black backgrounds.

Why does CMYK not match my printed colour?

The conversion here is the simple mathematical formula without an ICC colour profile. Real presses use profiles such as FOGRA39 or GRACoL, so ask your printer for exact values for brand colours.

What is the difference between HSL and HSV?

Both use hue and saturation, but HSL's lightness puts pure colour at 50% (100% is white), while HSV's value puts pure colour at 100%. Design tools like Photoshop's picker use HSV/HSB; CSS uses HSL.

Does it support transparency?

Yes – 8-digit hex (#rrggbbaa), rgba() and hsla() are read and shown with alpha; the contrast ratio uses the opaque colour.

Related tools