Color Converter

HEX, RGB and HSL, all in sync.

Convert a color between HEX, RGB and HSL notation.

How it works

HEX and RGB describe the same red, green and blue channels (0–255) in different notations; HSL re-expresses the color as hue (0–360°), saturation and lightness percentages.

When it helps

Designers and developers switch notations constantly. HSL is easier for adjusting a shade, while HEX is compact for CSS.

Worked example

Take the blue #3498DB. The pairs of hex digits are the red, green and blue channels: 34 = 52, 98 = 152 and DB = 219, so the RGB value is rgb(52, 152, 219). In HSL it's about hsl(204, 70%, 53%): a hue of 204° on the color wheel (between cyan and blue), fairly saturated, and a little lighter than middle lightness.

Converting is exact between HEX and RGB. HSL values are rounded to whole numbers, so converting back can shift a channel by one step — not a difference you can see.

Why HSL is easier to adjust

In RGB, making a color 'a bit darker' means changing three numbers in a coordinated way. In HSL you just lower the lightness. To create a hover state for a button, keep the hue and saturation and reduce lightness by 5–10%. For a muted version, lower the saturation.

That's why many design systems define their colors in HSL and only convert to HEX at the end.

Frequently asked questions

Which format should I use in CSS?

All three work in modern browsers. HSL is easiest to tweak by hand.

What does a 3-digit HEX mean?

It's shorthand: #0af equals #00aaff.

What about transparency?

Transparency is added as a fourth value — an alpha channel — in formats like rgba(), hsla() or 8-digit HEX. This tool focuses on the solid color.

Tools In Orbit · About · Contact · Privacy · Terms