CSS Color Functions — Complete Guide

Every modern CSS color function explained — rgb, hsl, hwb, lab, lch, oklab, oklch, color() — with browser support and guidance on when to use each.

The Full List of CSS Color Functions

CSS now supports eight major color functions, spanning multiple color spaces. This is a massive expansion from the classic hex/rgb/hsl trio:

  • rgb() — sRGB, decimal or percentage channels
  • hsl() — hue, saturation, lightness
  • hwb() — hue, whiteness, blackness (CSS Color 4)
  • lab() — CIE Lab (perceptually uniform)
  • lch() — CIE LCH (cylindrical Lab)
  • oklab() — Oklab (perceptually uniform, optimized)
  • oklch() — Oklch (cylindrical Oklab)
  • color() — specify any color space explicitly

rgb() — The Workhorse

color: rgb(21, 94, 239);
color: rgb(21 94 239);            /* space-separated (new) */
color: rgb(8% 37% 94%);           /* percentages */
color: rgb(21 94 239 / 0.5);      /* with alpha */

Supported everywhere. Use for maximum compatibility.

hsl() — Hue-Based

color: hsl(215 84% 51%);
color: hsl(215 84% 51% / 0.8);

Best for design systems because lightness is intuitive. Supported everywhere.

hwb() — Hue, Whiteness, Blackness

color: hwb(215 8% 6%);

A hue-based model similar to HSL but more intuitive for how painters think. Browser support is now good (Chrome 111+, Safari 15+, Firefox 96+). Rarely used in practice.

lab() — Perceptually Uniform CIE Lab

color: lab(45% 40 -70);

Lab is designed so equal numerical differences correspond to equal perceptual differences. Excellent for gradients and animations. Supported in modern browsers but requires fallback for older ones.

lch() — Cylindrical Lab

color: lch(45% 80 265);

LCH is the cylindrical form of Lab — lightness, chroma, hue. More intuitive than Lab for adjusting colors (like HSL but perceptually uniform).

oklab() — Optimized Perceptual Space

color: oklab(55% -0.05 -0.15);

OKLab is like Lab but better tuned for sRGB displays. Gradients in OKLab look more natural than in sRGB — no dark browns appearing in the middle of a blue-green gradient.

Widely supported now (Chrome 111+, Safari 15.4+, Firefox 113+).

oklch() — The Modern Favorite

color: oklch(55% 0.20 265);

Oklch is cylindrical Oklab — lightness, chroma, hue. It has become the default recommendation for modern CSS because:

  • Perceptually uniform (same L change looks the same across hues)
  • Intuitive hue angle (like HSL)
  • Wide gamut (supports Display P3 colors)
  • Better gradients than sRGB

Browser support: Chrome 111+, Safari 15.4+, Firefox 113+, Edge 111+. Not yet universal but growing fast.

color() — Any Color Space

color: color(display-p3 0.1 0.4 0.9);
color: color(srgb 0.08 0.37 0.94);
color: color(rec2020 0.1 0.4 0.9);

The color() function is the escape hatch — you can specify any color space explicitly. Mainly used for wide-gamut colors (Display P3, Rec. 2020).

Space-Separated Syntax

All functions now support space-separated syntax with slash for alpha:

/* Old */
color: rgb(21, 94, 239, 0.5);

/* New (recommended) */
color: rgb(21 94 239 / 0.5);

The new syntax is required for newer functions (oklch, lab, etc) and works for all existing functions.

Which Function Should You Use?

Use CaseRecommended
Maximum compatibilityrgb() or hsl() or hex
Design systemshsl() or oklch()
Natural gradientsoklch() or oklab()
Wide gamut (Display P3)color(display-p3 ...)
Print color matchinglab() or lch()

Browser Support and Fallbacks

For maximum compatibility, use CSS color functions with fallbacks:

.gradient {
  background: linear-gradient(#155EEF, #7C3AED);          /* fallback */
  background: linear-gradient(in oklch, #155EEF, #7C3AED);  /* modern */
}

Check current support at Can I Use before relying on newer functions in production.

Why oklch() Is Worth the Effort

  • Consistent lightness: Same L value looks same brightness across hues — impossible with HSL
  • Natural gradients: No ugly muddy midpoints
  • Wide gamut: Supports colors outside sRGB
  • Future-proof: The direction CSS color is heading

Convert to oklch()

Currently OmniColor's converters support HEX, RGB, HSL, HSV and CMYK. Support for oklch and other modern spaces is on our roadmap.

Frequently Asked Questions

Related Articles