CSS Color Formats Explained: HEX, RGB, HSL, and When to Use Each

CSS supports over a dozen ways to specify colors. Choosing the right format — HEX, RGB, HSL, or HSV — affects readability, maintainability, and how easy it is to adjust colors in code. This guide explains each format, when to use it, and how to convert between them.

HEX Colors

HEX is the most common format in web development. A HEX color is a 6-digit hexadecimal number representing the red, green, and blue channels:

#RRGGBB

#ff5733   → R=255, G=87,  B=51
#1a1917   → R=26,  G=25,  B=23
#ffffff   → R=255, G=255, B=255  (white)
#000000   → R=0,   G=0,   B=0    (black)

Shorthand notation works when each channel's two digits are identical:

#fff  = #ffffff
#000  = #000000
#f53  = #ff5533

HEX supports transparency with an 8-digit form (#RRGGBBAA) where the last two digits are the alpha channel (00 = fully transparent, ff = fully opaque):

#ff573380   → 50% transparent red
#1a191780   → 50% transparent near-black

Use HEX when: you're working with design system tokens, copying colors from Figma, or writing colors that need to be compact and copy-pasteable.

RGB and RGBA

RGB expresses the same three channels as decimal numbers from 0 to 255:

rgb(255, 87, 51)      /* same as #ff5733 */
rgba(255, 87, 51, 0.5) /* 50% transparent */

CSS Color Level 4 introduced a space-separated syntax that also supports alpha without the separate rgba() function:

/* Modern CSS (Chrome 111+, Safari 15+) */
rgb(255 87 51)
rgb(255 87 51 / 50%)
rgb(255 87 51 / 0.5)

Use RGB when: you're performing math on color values in JavaScript, or working with values that come directly from image processing libraries.

HSL — The Most Intuitive Format

HSL stands for Hue, Saturation, Lightness. Unlike RGB and HEX, it's designed around how humans perceive color rather than how screens display it.

• Hue (0–360°) — the color on the color wheel: 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta, 360=red again.
• Saturation (0–100%) — color intensity. 0% is gray, 100% is full color.
• Lightness (0–100%) — brightness. 0% is black, 100% is white, 50% is the "pure" color.

hsl(0, 100%, 50%)    /* pure red */
hsl(120, 100%, 50%)  /* pure green */
hsl(240, 100%, 50%)  /* pure blue */
hsl(0, 0%, 50%)      /* medium gray */
hsl(210, 20%, 30%)   /* muted blue-gray */

The power of HSL is how easily you can create color variations by adjusting a single value:

/* Adjust lightness for hover/active states */
hsl(210, 80%, 55%)   /* base button */
hsl(210, 80%, 48%)   /* hover (darker) */
hsl(210, 80%, 40%)   /* active (darkest) */

/* Adjust saturation for muted variants */
hsl(210, 80%, 55%)   /* vibrant */
hsl(210, 30%, 55%)   /* muted */
hsl(210, 10%, 55%)   /* almost gray */

Use HSL when: building design systems, creating color scales, or generating colors programmatically (dark mode, tints, shades).

HSV / HSB — Used in Design Tools

HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — is the format used in Photoshop, Figma color pickers, and most design tools. It is not a valid CSS format but is common in design workflows.

The difference from HSL: in HSV, a color at 100% value with 100% saturation is the pure color. In HSL, the pure color is at 50% lightness. HSV's "value" represents how much black is mixed in (0% = black), while HSL's "lightness" mixes both black and white.

CSS Color Level 4 — New Formats

Modern CSS adds new color spaces for wider gamuts:

• oklch() — perceptually uniform lightness; great for generating color scales where perceived brightness is consistent.
• display-p3 — the P3 wide color gamut used by modern Apple displays and most new monitors; supports colors outside the sRGB range.
• color-mix() — mix two colors in any color space: color-mix(in hsl, red 50%, blue)

Converting Between Formats

The formulas for HEX ↔ RGB are simple arithmetic:

// HEX to RGB
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)

// RGB to HEX
const hex = '#' + [r, g, b]
  .map(v => v.toString(16).padStart(2, '0'))
  .join('')

RGB to HSL requires normalizing RGB to 0–1, finding the max/min channels, then computing hue, saturation, and lightness — a few lines of math that any color converter handles automatically.

Choosing the Right Format