HEX, RGB, and HSL: How CSS Color Formats Actually Work

//: # ()

Need to convert a color right now? Use our free Color Converter — HEX, RGB, HSL, and instant tints and shades, entirely in your browser.

Same color, three different ways to write it down

CSS lets you specify a color in several formats. They all describe exactly the same 24-bit color space — 16.7 million possible colors — just organized differently, and each format makes certain tasks easier.

color: #3755be;
color: rgb(55, 85, 190);
color: hsl(227, 55%, 48%);

All three lines above produce the identical shade of blue.

HEX: compact, but opaque to edit

#3755be

Six hexadecimal digits: two each for red, green, and blue, each ranging 00-ff (0-255 in decimal). It's the most compact text representation and the one most design tools hand you by default. Its weakness: you cannot look at #3755be and predict what #3755d0 looks like without mentally converting hex to decimal first. Hex is great for storing and pasting a color, bad for reasoning about one.

RGB: the same numbers, easier to read

rgb(55, 85, 190)

Same three channels as hex, just written in decimal instead of hexadecimal — easier to eyeball ("mostly blue, some green, a little red") but no easier to adjust. Want this color 20% lighter? There's no single number to change; you'd have to scale all three channels proportionally and recompute each one.

HSL: designed for humans adjusting colors

hsl(227, 55%, 48%)

Hue (0-360°, position on the color wheel), Saturation (0-100%, how vivid vs. gray), Lightness (0-100%, how close to black vs. white). This is the format that actually matches how people think about adjusting a color:

• Want the same color, but lighter or darker? Change only L.
• Want the same color, but more muted or more vivid? Change only S.
• Want a different but related color, like a complementary accent? Rotate H.

This is exactly why generating a set of tints and shades for a design system — the lighter and darker variants of a brand color used for hover states, disabled states, and backgrounds — is a matter of holding H and S constant and sweeping L from low to high, rather than any hex or RGB arithmetic.

A quick conversion reference

Modern CSS (rgb() and hsl() in the CSS Color Module Level 4 spec) also supports an optional fourth alpha value directly in the same function — rgb(55 85 190 / 50%) — replacing the older separate rgba()/hsla() functions, though both syntaxes still work everywhere.

Try it

Paste any HEX, RGB, or HSL value into the Color Converter to see it in all three formats plus HSB/HSV, along with an instant 5-step tint-and-shade ramp you can click to reuse.