UsefulTab

How to convert between HEX, RGB and HSL

A design tool hands you #3366CC, a CSS snippet wants rgb(), and you'd like to nudge the color a shade lighter — which is easiest in hsl(). They're all the same colors in different clothes. This guide explains what each format is for and how to move between them with the free Color Converter.

The three formats

When to use which

Reach for HSL when you're tuning a color: raise the lightness to lighten it, drop the saturation to mute it, or rotate the hue to find a neighbour. Each knob maps to something you can picture. Keep HEX or RGB for the final CSS, since that's what tools and teammates expect.

The alpha channel

Add opacity with an 8-digit HEX (#3366CC80) or rgba(51, 102, 204, 0.5). Alpha runs from fully transparent to fully opaque and is what you want for overlays, drop shadows, and layered interface elements.

How exact are the conversions?

HEX and RGB are exact equivalents and round-trip perfectly. HSL involves rounding, so converting to HSL and back can shift a number by one unit — invisible in practice, but keep HEX or RGB as your source of truth if you need it pixel-exact.

Building a palette or pulling a color from an image

Need a set of colors that work together? The Palette Generator builds one. Want the exact color from a photo or screenshot? The Image Color Picker reads it off the pixel and gives you the code in every format.

A note on privacy

Nothing to upload — the Color Converter is pure math done in your browser.

Open the Color Converter →

Common questions

What's the difference between HEX, RGB, and HSL?

They describe the same colors in different notations. HEX (#3366CC) and RGB (rgb(51,102,204)) both specify red, green, and blue amounts — HEX in base-16, RGB in plain numbers. HSL (hsl(220,60%,50%)) describes hue, saturation, and lightness, which is easier to adjust by eye.

When should I use HSL instead of HEX?

Use HSL when you want to tweak a color intuitively — make it lighter, more muted, or shift the hue — because each part maps to something you can picture. HEX is more compact and is what most design tools hand you, so it's common in final CSS.

What does the alpha channel (the 8-digit HEX or RGBA) do?

Alpha controls opacity, from fully transparent to fully opaque. An 8-digit HEX like #3366CC80 or rgba(51,102,204,0.5) adds that transparency to the color, which matters for overlays, shadows, and layered UI.

Are the conversions exact?

HEX and RGB are exact equivalents — they round-trip perfectly. HSL involves rounding, so converting to HSL and back can shift a value by one unit. For most UI work that's invisible; keep HEX or RGB as the source of truth if you need precision.

Is anything uploaded when I convert a color?

No. It's pure math on the values you enter, done entirely in your browser.