Colors: Hex, RGB, HSL, and Opacity

Color Formats in CSS

CSS supports several notations for specifying color. Each has its strengths: hex is compact and widely used in design tools, rgb() is explicit, and hsl() makes it easy to reason about hue, saturation, and lightness independently.

:root {
  /* Named color */
  --c-named:   tomato;

  /* Hex (6 digits) */
  --c-hex:     #6366f1;

  /* Hex with alpha (8 digits) */
  --c-hex-a:   #6366f180;

  /* RGB */
  --c-rgb:     rgb(99, 102, 241);

  /* RGB with alpha */
  --c-rgba:    rgba(99, 102, 241, 0.5);

  /* HSL — Hue 239°, Sat 84%, Light 67% */
  --c-hsl:     hsl(239, 84%, 67%);

  /* HSL with alpha */
  --c-hsla:    hsla(239, 84%, 67%, 0.5);
}

Why HSL Is Useful

HSL lets you create color palettes programmatically. To make a lighter variant, increase the lightness. To make a less saturated version, lower the saturation. This is far more intuitive than tweaking hex digits.