Color in depth: hex, rgb and hsl

Several ways to say the same color

CSS offers several models to express a color. They can all produce the exact same blue; what changes is the convenience depending on what you're doing. It's like telling the time: "quarter past three" or "15:15" point to the same moment, but one fits better in each conversation.

Hexadecimal (#rrggbb)

The most common one. Two hex digits per channel red, green and blue (0–255).

.a { color: #ff0000; }   /* pure red */
.b { color: #1f2937; }   /* dark bluish gray */
.c { color: #f00; }      /* 3-digit shorthand = #ff0000 */

rgb() and rgba()

The same channels, but in decimal. rgba() adds a fourth value: the alpha (opacity), from 0 (transparent) to 1 (opaque).

.a { color: rgb(255, 0, 0); }
.b { background: rgba(0, 0, 0, 0.5); }  /* black at 50% */

hsl() and hsla() — the most intuitive

HSL describes color the way a person thinks of it:

• H (hue): degrees on the color wheel, 0–360 (0 red, 120 green, 240 blue).
• S (saturation): 0% gray, 100% vivid.
• L (lightness): 0% black, 50% pure, 100% white.

.a { color: hsl(0, 100%, 50%); }       /* red */
.b { color: hsl(210, 80%, 55%); }      /* a pleasant blue */
.c { background: hsla(210, 80%, 55%, 0.2); }

Want a lighter variant of the same color? Raise the L. Another shade keeping the "character"? Change only the H. That is why HSL is ideal for building palettes and themes: adjusting the hue is trivial.

opacity and currentColor

.ghost {
  opacity: 0.4;          /* transparency of the WHOLE element (0–1) */
}
.icon {
  color: #2563eb;
  border: 2px solid currentColor;  /* reuses the text color */
}

• opacity affects the entire element (text, background, children). rgba/hsla only affect that specific color.
• currentColor is a magic keyword: it equals whatever color is on that element. Great for keeping borders or icons in step with the text.

⚠️ Classic trap: light gray text on a white background "because it looks elegant." If the contrast is low, lots of people can't read it and you'll fail accessibility. Before you fall in love with a color, check that it actually reads.

Examples

The same blue in three models

.hex  { color: #3b82f6; }
.rgb  { color: rgb(59, 130, 246); }
.hsl  { color: hsl(217, 91%, 60%); }