Convert between HEX, RGB, and HSL values and preview the selected color.
Enter a HEX color code (with or without the leading #) and click Convert Color. The tool shows a live swatch preview alongside the equivalent RGB and HSL values, so you can move between formats without doing the math by hand.
CSS accepts all three formats, but different contexts favor different ones: HEX is compact and common in design tools, RGB makes each channel's value explicit for code that manipulates color programmatically, and HSL (hue, saturation, lightness) is often easier to reason about when you want to keep a color's hue but adjust how light or saturated it is.
Adjusting a color while keeping its overall character consistent is far simpler in HSL than in HEX or RGB. Convert this page's default #33cc66, and you get hsl(140, 60%, 50%). To create a slightly darker version of that exact same green — for example a hover or pressed state on a button — just lower the lightness value, to something like 40%, while hue and saturation stay exactly as they were. Doing the equivalent adjustment directly in HEX or RGB means recalculating all three channels from scratch, since none of them isolates "how light or dark" on its own.
Enter the full 6-digit HEX code (for example #33cc66) for reliable results.
This tool converts starting from a HEX input only. To go the other direction, use an HSL or RGB value's equivalent HEX code as your starting point.
No, conversions are for solid HEX, RGB, and HSL values without an alpha channel.
HSL makes targeted adjustments much easier. The default #33cc66 on this page converts to hsl(140, 60%, 50%) — to get a slightly darker shade of that exact same green for a hover state, just lower the lightness to, say, 40%, leaving hue and saturation untouched. Making the same adjustment directly in HEX or RGB means recalculating all three channels by hand.