ToolsMaxxing

Color converter

Convert a colour between HEX, RGB, HSL, HSV and CMYK, and check its text contrast.

HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
CMYK
cmyk(66%, 69%, 0%, 10%)

Text contrast (WCAG)

White text on this colour
6.29:1 Passes AA
Black text on this colour
3.34:1 Large text only

Your files stay on your device

How it works

  1. 1Type a colour in any format, or pick one with the colour picker.
  2. 2Read the same colour in HEX, RGB, HSL, HSV and CMYK.
  3. 3Copy the format you need.
  4. 4Check the contrast lines to see whether white or black text is readable on it.

What the options do

Accepted input
#rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() and CSS colour names such as tomato.
Contrast
The WCAG ratio against white and black. 4.5:1 meets AA for normal text, 3:1 for large text.

Privacy

Everything runs in your browser. Nothing you type is sent to a server.

Questions people ask

Is the CMYK value exact for printing?

No. It is a simple mathematical conversion from RGB. Printers use colour profiles, so a print shop proof will look different, especially for bright blues and greens.

What is the difference between HSL and HSV?

Both describe hue, saturation and a brightness axis. In HSL, lightness 100 percent is always white. In HSV, value 100 percent is the brightest version of the colour. Design tools often use HSV, CSS uses HSL.

What does the eight-digit hex mean?

The last two digits are opacity, from 00 (clear) to ff (solid). #4f46e580 is about 50 percent opaque.

Why does a colour name not work?

Only CSS named colours are recognised, such as tomato or rebeccapurple. Names from design tools are not.

What contrast do I need?

WCAG AA asks for 4.5:1 for body text and 3:1 for large text and interface parts. AAA asks for 7:1 for body text.

Related tools