HEX, RGB, HSL: CSS Color Formats Explained

CSS gives you multiple ways to express the same color — HEX, RGB, RGBA, HSL, HSLA, and newer formats like oklch. Each format has a job: HEX is what you copy from design tools, RGB maps to hardware, and HSL makes programmatic color manipulation readable. Knowing how they relate saves time when converting between design files, code, and accessibility tools.

HEX — the design-tool default

Hexadecimal colors encode red, green, and blue channels as two hex digits each, prefixed with #. The range per channel is 00–FF (0–255 decimal).

#RRGGBB       → 6-digit standard
#RGB          → 3-digit shorthand (each digit doubled: #ABC = #AABBCC)
#RRGGBBAA     → 8-digit with alpha channel (CSS Colors Level 4)
#RGBA         → 4-digit shorthand with alpha

/* Examples */
#ff0000       → red
#00ff00       → green
#0000ff       → blue
#ffffff       → white
#000000       → black
#ff000080     → red at ~50% opacity

HEX is compact and universally supported but not human-readable — you cannot intuit what #3a7bd5 looks like without a color picker. It is the format Figma, Sketch, and most design tools export by default.

RGB and RGBA — the hardware model

RGB expresses each channel as a decimal 0–255 (or 0–100% in newer CSS). RGBA adds an alpha channel for opacity as a 0–1 float.

rgb(255, 0, 0)          → red
rgb(58, 123, 213)       → a medium blue
rgba(58, 123, 213, 0.5) → same blue at 50% opacity

/* CSS Colors Level 4 — space-separated, optional alpha */
rgb(58 123 213)
rgb(58 123 213 / 50%)

RGB maps directly to how monitors display color (additive mixing). It is the format used by canvas APIs, WebGL, and image processing code. rgb(0,0,0) is black; rgb(255,255,255) is white. Equal values of R, G, B always produce a grey.

HSL and HSLA — the intuitive model

HSL stands for Hue, Saturation, Lightness. It describes color in terms that match how humans think about it:

• Hue — the color angle on a color wheel, 0–360°. 0° = red, 120° = green, 240° = blue.
• Saturation — 0% is grey; 100% is the full color.
• Lightness — 0% is black; 50% is the pure color; 100% is white.

hsl(0, 100%, 50%)       → red
hsl(120, 100%, 50%)     → green
hsl(240, 100%, 50%)     → blue
hsl(240, 100%, 25%)     → dark blue
hsl(240, 100%, 75%)     → light blue
hsl(0, 0%, 50%)         → medium grey

hsla(240, 100%, 50%, 0.3)  → blue at 30% opacity

HSL shines for programmatic color manipulation. To darken a button on hover, subtract lightness. To create a color palette, vary hue while keeping saturation and lightness constant. To generate accessible text colors, check lightness against the background.

Conversion formulas

HEX and RGB are the same data in different notation — converting between them is simple arithmetic. HEX FF = decimal 255. HSL requires trigonometry to convert to/from RGB, but any color picker or CSS library handles this.

// HEX → RGB in JavaScript
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16),
  } : null;
}

hexToRgb("#3a7bd5") // → { r: 58, g: 123, b: 213 }

Modern CSS color formats

CSS Colors Level 4 and 5 introduce additional formats now widely supported in modern browsers:

• oklch(L C H) — perceptual lightness, chroma, hue. Changing hue does not shift perceived brightness, making it ideal for accessible design systems.
• color(display-p3 R G B) — the Display P3 wide-gamut color space used by modern Apple and Samsung displays. Covers more saturated reds and greens than sRGB.
• color-mix(in srgb, red 50%, blue) — mix two colors in CSS without JavaScript.

When to use which format

Accessibility: contrast and color

WCAG 2.1 defines contrast ratio requirements: 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for enhanced contrast (AAA). Contrast ratio is calculated from relative luminance — a function of the linear RGB values. HSL lightness is a shortcut heuristic, not a precise predictor of WCAG contrast. Use a dedicated contrast checker and favor oklch for color systems where consistent perceived contrast matters.