Color Converter
Convert a color between HEX, RGB, and HSL. Edit any field and the others update automatically.
Preview
HEX
RGB
HSL
How the three formats relate
HEX packs red, green, and blue values (each 0–255) into pairs of hexadecimal digits (#RRGGBB). RGB expresses the same three values in plain decimal. HSL describes color differently — as hue (position on a color wheel, 0–360°), saturation (color intensity, 0–100%), and lightness (how light or dark, 0–100%) — which often makes it more intuitive for adjusting a color's shade or brightness without changing its underlying hue.
Frequently asked questions
Which format should I use in my CSS? All three are valid in modern CSS — HEX is the most compact and common for fixed brand colors, RGB(A) is convenient when you need to control transparency, and HSL is often easiest for programmatically generating color variations (like a lighter or darker shade of the same hue).
Why does adjusting "lightness" in HSL feel more predictable than adjusting RGB values? Because HSL separates color identity (hue) from brightness (lightness), changing lightness alone shifts a color toward black or white while keeping the same hue — adjusting RGB channels individually doesn't isolate brightness the same way.
What does a 3-character hex code like #FFF mean? It's shorthand where each character is duplicated — #FFF expands to #FFFFFF (white) — a convenience some tools and stylesheets use for simple colors.