CSS Colors Explained: HEX vs RGB vs HSL (and When to Use Each)

Every CSS tutorial starts with colors, and every CSS tutorial teaches them as four interchangeable syntaxes. They are — but interchangeable does not mean identical. The format you choose changes how easily you can build palettes, create hover states and support transparency. After years of writing CSS, I reach for one format about 90% of the time, and this article will show you why.

The four formats at a glance

All of these produce exactly the same green:

color: green;                 /* named */
color: #34d399;               /* hex   */
color: rgb(52 211 153);       /* rgb   */
color: hsl(158 64% 52%);      /* hsl   */

Named colors: fine for demos, nothing more

There are 148 named colors, from red to rebeccapurple. They are perfect for quick experiments — color: dodgerblue is easier than looking up a value. But you cannot tweak a named color, and nobody remembers what darkolivegreen actually looks like. Real projects use hex, rgb or hsl.

HEX: the industry standard

Hex colors are three (or four, with alpha) pairs of hexadecimal digits: red, green, blue. #34d399 means red=0x34, green=0xd3, blue=0x99. Shortened three-digit form works when both digits match: #fff equals #ffffff.

Hex is the default currency of design handoff — every color picker on earth speaks it, and every design system documents its palette in hex. Use hex when you are copying exact values from a designer, a screenshot tool or a brand guideline. Its weakness: it is a machine format. Look at #34d399 and #2dd4bf side by side and nothing about the numbers tells you they are similar hues.

RGB: same information, different clothes

rgb(52 211 153) is identical information to hex — just decimal instead of hexadecimal. There is no practical reason to prefer one over the other for raw colors, so pick one and be consistent. Modern CSS allows the spaces syntax shown above (with optional slash-alpha: rgb(52 211 153 / 0.5)), while the old comma syntax still works everywhere.

HSL: colors humans can edit

HSL describes a color the way people think about color: hue (position on the color wheel, 0–360), saturation (0% = grey, 100% = vivid) and lightness (0% = black, 100% = white). This is where it gets powerful:

:root {
  --brand: hsl(158 64% 52%);       /* emerald              */
  --brand-dark: hsl(158 64% 38%);  /* same color, darker   */
  --brand-pale: hsl(158 64% 92%);  /* same color, lighter  */
  --brand-muted: hsl(158 20% 52%); /* same color, greyer   */
}

Try doing that with hex and you are back to fiddling with three unrelated numbers per shade. HSL makes hover states trivial (drop lightness by 8%), builds entire tints-and-shades scales from one hue, and lets you generate accessible palettes by keeping hue fixed while adjusting lightness until contrast passes.

My rule after years of practice: hex for exact values that come from outside (designer, brand, screenshot), HSL for everything I construct myself.

Transparency in one line

All three formats accept an alpha channel in modern CSS: hex #34d39980, rgb(52 211 153 / 0.5) and hsl(158 64% 52% / 0.5) are all the same half-transparent green. No more rgba() and hsla() — the a is optional now.

Relative colors: the modern superpower

Newer browsers support relative color syntax, which derives one color from another: hsl(from var(--brand) calc(h + 40) s l) gives you a hue 40 degrees around the wheel — an adjacent palette color computed by the browser. Support is good in current Chrome, Safari and Firefox, and it is worth learning once your basics are solid.

Try it live

Reading about colors teaches less than watching them change. Open the CSS editor at CodeLive Studio, paste the HSL palette above, and drag the lightness number around — the live preview makes the relationship between the three numbers obvious in a way no diagram can. Then try building a five-step tint scale of your favourite hue without touching the hue value at all.