HEX, RGB, and HSL: Understanding CSS Color Models

The same color can be written three different ways in CSS, and each format tells a different story. A designer hands you #FF6B35; a stylesheet might use rgb(255, 107, 53); a well-organized design system increasingly prefers hsl(16, 100%, 60%). They all paint the same orange — so why do three formats exist, and when should you use each? This guide makes it clear.

HEX: compact and copy-pasteable

Hexadecimal color is the most familiar format on the web. It packs red, green, and blue into six hex digits, two per channel:

#FF6B35
 |  |  |
 |  |  +-- blue  = 35 (53)
 |  +----- green = 6B (107)
 +-------- red   = FF (255)

Each pair ranges from 00 (none of that color) to FF (full, 255). So #FF0000 is pure red, #000000 is black, and #FFFFFF is white. There is also a three-digit shorthand — #F60 expands to #FF6600 by doubling each digit. HEX is concise and unambiguous, which is why it dominates design handoffs.

RGB: the same idea in decimal

RGB expresses the exact same three channels, but in plain decimal numbers from 0 to 255:

rgb(255, 107, 53)

It is functionally identical to HEX — just easier to read for humans and easier to manipulate in code. Its real advantage is the alpha (transparency) variant, rgba():

rgba(255, 107, 53, 0.5)   /* 50% transparent */

(Modern CSS also allows an alpha in hex with an eighth and ninth digit, and even rgb(255 107 53 / 50%), but rgba() remains widely used.)

HSL: the format humans actually think in

HSL is the most intuitive of the three because it matches how we describe color in words. It stands for Hue, Saturation, Lightness:

hsl(16, 100%, 60%)
    |    |     |
    |    |     +-- lightness  (0% black → 100% white)
    |    +-------- saturation (0% grey → 100% vivid)
    +------------- hue        (0-360° around the color wheel)

• Hue is the color itself, as an angle: 0° is red, 120° is green, 240° is blue.
• Saturation is how intense it is, from grey to fully vivid.
• Lightness is how bright, from black through the pure color to white.

Why HSL makes better design systems

Here is HSL's killer feature. Suppose you have a button color and want a darker shade for its hover state. In HEX or RGB you would have to recalculate all three channels. In HSL you just lower the lightness:

--button:       hsl(16, 100%, 60%);
--button-hover: hsl(16, 100%, 50%);   /* 10% darker, same color */

Building a whole palette — tints, shades, related accent colors — becomes simple arithmetic on hue and lightness. This is why modern design tokens and theming systems lean heavily on HSL.

So which should you use?

• HEX for design handoffs, brand guidelines, and quick one-off colors.
• RGB / RGBA when you need transparency or are computing colors in JavaScript.
• HSL / HSLA when building a palette, theming, or programmatically adjusting shades.

The good news: they are fully interchangeable, and converting between them is instant. Paste any color — HEX, RGB, or HSL — into the converter below and get all three formats at once, with a live preview swatch.