HEX to RGB to HSL: A Designer's Quick Guide to Color Formats

You are copying a color from Figma and need it in HEX for your CSS. Then the developer asks for RGB. And the designer wants HSL so they can tweak the saturation. Three formats, same color.

A color converter handles all the conversions instantly. Pick a color with the wheel, paste any format, or adjust sliders — and get the values in every format at once.

HEX: The Web Standard

HEX (#3B82F6) is a 6-character string representing RGB values in hexadecimal. The first two characters are red (3B = 59), next two are green (82 = 130), last two are blue (F6 = 246).

It is compact, universally supported, and the default for CSS. Use HEX for most web work — backgrounds, text colors, borders. Shorthand HEX works when each pair has matching digits: #336699 can become #369.

8-digit HEX adds an alpha channel: #3B82F6FF where the last two digits (FF) represent full opacity. This is equivalent to rgba(59, 130, 246, 1.0).

RGB/RGBA: When You Need Transparency

RGB (rgb(59, 130, 246)) is the functional notation. Each value is 0-255. It is less compact than HEX but more readable when you need to understand the color values.

RGBA adds the alpha channel: rgba(59, 130, 246, 0.5). The alpha value goes from 0 (fully transparent) to 1 (fully opaque). This is how you make semi-transparent overlays, shadows, and hover effects. CSS also supports the modern syntax: rgb(59 130 246 / 0.5).

HSL: The Designer's Format

HSL (hsl(217, 91%, 60%)) represents color the way humans think about it, not the way screens display it.

• Hue (217): where the color sits on the color wheel, 0-360 degrees. 0=red, 120=green, 240=blue.
• Saturation (91%): how vivid the color is. 0% is gray, 100% is pure color.
• Lightness (60%): how bright. 0% is black, 100% is white, 50% is the pure hue.

HSL is the best format for creating color palettes. Keep the hue, vary the saturation and lightness. Or shift the hue by 30 degrees for analogous colors, 180 degrees for complementary. This is dramatically easier than doing the same thing with RGB values.

The free color converter shows all three formats at once with a live preview. Adjust any slider and watch the others update in real time.