HEX to RGB & HSL Color Converter

Designers hand over hex codes, CSS animations want HSL because it interpolates sensibly, and canvas work needs RGB channels. This converter takes a colour in any of those formats and produces the others, with a live swatch and the contrast ratio against black and white.

How to use it

1. Enter a colour as HEX, RGB, or HSL, or pick one with the colour input.
2. Read the equivalent values in every other format.
3. Check the contrast ratios against black and white text.
4. Copy the format you need in ready-to-paste CSS syntax.

Frequently asked questions

Why use HSL instead of HEX?

Because HSL is human-readable. Making a colour lighter means raising one number rather than recalculating three hex pairs, which makes generating a consistent palette far easier.

What contrast ratio do I need for accessibility?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1. The ratios shown here tell you at a glance whether black or white text works on the colour.

What does the fourth value in RGBA mean?

Alpha, the opacity, from 0 for fully transparent to 1 for fully opaque. Modern CSS also accepts an eight-digit hex where the last pair encodes alpha.

Why does the same hex look different on two screens?

Colour management. Displays vary in gamut and calibration, and without an explicit colour profile the same sRGB value renders differently on a wide-gamut monitor.

All free tools · Blog · About · Contact

Also available in: Español · Português · Français · Deutsch