Color Converter (HEX, RGB, HSL, HSV, CMYK & contrast)

Understanding the color converter — concept and principle

Designers and developers often need the same colour in several notations. This converter takes a HEX code or RGB values and gives HEX, RGB, HSL, HSV (HSB) and a simple CMYK, plus the WCAG relative luminance, the contrast with white and black text and which text colour is easier to read on it.

How it is calculated

HEX = the red, green and blue values (0–255) written in base 16

With R, G, B scaled to 0–1: max, min, Δ = max − min

Lightness L = (max + min) ÷ 2; HSL saturation = Δ ÷ (1 − |2L − 1|)

HSV value V = max; HSV saturation = Δ ÷ max

Hue from the largest channel, in degrees

CMYK (simple): K = 1 − max; C = (1 − R − K) ÷ (1 − K), likewise M and Y

Luminance = 0.2126 R + 0.7152 G + 0.0722 B (linearised); contrast = (lighter + 0.05) ÷ (darker + 0.05)

The principle

All these notations describe the same screen colour. RGB and HEX say how much light each of the three display primaries emits. HSL and HSV rearrange that into hue (position on the colour wheel), saturation and lightness or value, which is easier for people to adjust. CMYK describes ink, which subtracts light, so the simple formula is only an approximation; real printing depends on colour profiles. WCAG luminance weights green most because human eyes are most sensitive to it.

Worked example

Default input: #2F6F4E.

1. 2F, 6F, 4E in hexadecimal = rgb(47, 111, 78).
2. Scaled: 0.184, 0.435, 0.306; max 0.435, min 0.184, Δ 0.251.
3. HSL = hsl(149, 41%, 31%); HSV = 149°, 58%, 44%.
4. CMYK = 58%, 0%, 30%, 56%.
5. Relative luminance = 0.1252; contrast with white = 1.05 ÷ 0.1752 = 5.99, with black = 0.1752 ÷ 0.05 = 3.5, so white text reads better.

How to read the result

Use HEX or RGB in code, HSL for adjusting a colour's lightness or saturation, and ask your printer for CMYK values matched to their profile. For text, WCAG AA requires at least 4.5:1 for normal text, so white on this green (5.99:1) passes while black (3.5:1) would pass only for large text.

Common mistakes

• Using simple CMYK values for professional printing.
• Confusing HSL lightness with HSV value; they differ.
• Mixing 0–1 and 0–255 scales.
• Judging contrast by eye instead of measuring it.

Frequently asked questions

What is the difference between HSL and HSV?

Both use hue and saturation, but HSL uses lightness (50% is the pure colour) while HSV uses value (100% is the pure colour).

Why is my printed colour different?

Printers use inks and colour profiles; screen colours often cannot be reproduced exactly.

What does a 3-digit HEX code mean?

Each digit is doubled: #ABC equals #AABBCC.

Which text colour should I use on a background?

The one with the higher contrast ratio, as shown in the last line.

Sources: W3C, CSS Color Module Level 4 (HSL/HSV conversions, hex notation) · W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance and contrast ratio