Color Converter

Type HEX, RGB or HSL and get the other two formats instantly. The swatch shows the colour, and everything stays in your tab.

Color

Notes

Accepted input: #rgb, #rrggbb, rgb(r, g, b), rgba(r, g, b, a) and hsl(h, s%, l%). Alpha is kept when present.
Luminance and contrast use the WCAG relative luminance formula; 4.5:1 is the usual AA threshold for body text.
The short HEX form only exists when every channel is a doubled byte, for example #ffcc00, not #3b82f6.

What this color converter does

Colour values arrive in three shapes: hex from design tools, rgb from CSS and canvas output, hsl from anyone thinking in hue and lightness. Typing one of them here rewrites the other two, so you can hand the same colour to a stylesheet, a chart library or a database column without doing arithmetic by hand.

It also shows the WCAG relative luminance and the contrast ratio against white and black. That is the number an accessibility check cares about: body text normally wants 4.5:1, large text 3:1, so a quick look here tells you whether a brand colour is usable for text or only for backgrounds.

Parsing is strict on purpose. A typo like rgb(59, 130) or a hex string with a stray character is reported instead of silently becoming black, which is what usually happens when a converter guesses.

Need a tool that is not here? Ask for one.

Format	Value
HEX
HEX (short)
RGB
RGBA (alpha 1)
HSL
Luminance (WCAG)
Contrast vs white / black