🎨
← Back to Guides

Modern CSS Color Functions: rgba(), hsl(), oklch(), and Beyond

· Tags: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Modern CSS Color Functions: rgba(), hsl(), oklch(), and Beyond

CSS color functions have evolved dramatically. What was once a choice between hex, rgb(), and hsl() is now a rich ecosystem of color spaces and manipulation functions that give developers unprecedented control over color representation, interpolation, and accessibility.

This guide covers every major CSS color function available in 2026, from the familiar to the cutting-edge.

RGB and RGBA: The Workhorses

The rgb() function defines colors using the red-green-blue additive color model. It has been part of CSS since CSS1 and is supported in every browser ever made.

/* Legacy comma-separated syntax */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Modern space-separated syntax (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Percentage values */
color: rgb(100% 0% 0%);

Key Changes in Modern RGB

CSS Color Level 4 introduced two important improvements:

  1. Space-separated instead of comma-separated — The rgb() function now accepts values separated by spaces or slashes
  2. Unified alpha syntax — The rgba() alias is deprecated (but still supported). rgb() now natively accepts an alpha channel

This modern syntax is supported in all browsers released since 2020. For new projects, use the modern syntax and skip the rgba() alias entirely.

RGB Channels

Each RGB channel accepts:

  • An integer from 0 to 255
  • A percentage from 0% to 100%
  • The none keyword for missing channels (CSS Color Level 4)

The none keyword is useful when interpolating colors — it tells the browser not to interpolate that specific channel.

HSL and HSLA: Intuitive Color Control

HSL stands for Hue, Saturation, Lightness. It uses a cylindrical coordinate system that maps naturally to how humans think about color.

/* H is hue angle (0-360), S is saturation (0-100%), L is lightness (0-100%) */
color: hsl(0 100% 50%);        /* Pure red */
color: hsl(0 100% 50% / 0.5);  /* Red at 50% opacity */

/* Hue angles with units */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Hue Angle Reference

| Hue | Color | Hex | |-----|---------|----------| | 0 | Red | #FF0000 | | 30 | Orange | #FF8000 | | 60 | Yellow | #FFFF00 | | 120 | Green | #00FF00 | | 180 | Cyan | #00FFFF | | 240 | Blue | #0000FF | | 300 | Magenta | #FF00FF |

HSL is the best choice for generating color palettes programmatically because changing only the lightness or saturation channel creates consistent visual variants.

HWB: Mixing with White and Black

HWB (Hue, Whiteness, Blackness) is a more intuitive alternative to HSL. You pick a hue, then add whiteness and blackness to create tints and shades.

color: hwb(0 0% 0%);    /* Pure red */
color: hwb(0 40% 0%);   /* Tinted red (added white) */
color: hwb(0 0% 40%);   /* Shaded red (added black) */
color: hwb(0 20% 20%);  /* Tone (white + black) */

HWB is simpler than HSL for one specific use case: creating tint and shade variations of a brand color. You never need to think about saturation curves — just add white or black.

Browser support: HWB is supported in all modern browsers (Chrome 101+, Firefox 96+, Safari 15+).

LAB and LCH: Perceptually Uniform Spaces

LAB (Lightness, A-axis, B-axis) and LCH (Lightness, Chroma, Hue) are perceptually uniform color spaces. This means the Euclidean distance between two color values corresponds to the perceived visual difference — something RGB and HSL cannot do.

color: lab(50% 50 0);        /* Medium red */
color: lch(50% 50 0);        /* Same color in cylindrical form */

Why perceptual uniformity matters:

  • Gradients — Interpolating in LAB or LCH produces smooth, natural transitions without the dull "muddy zone" that RGB gradients create
  • Color difference measurement — Delta E (the perceptual difference measure) is meaningful in LAB space
  • Accessibility — Perceptual uniformity helps predict how colors will be perceived by users with color vision deficiencies

Limitations: LAB and LCH can produce colors outside the sRGB gamut. These colors will be clipped when displayed on sRGB screens but are accessible on wider-gamut displays (DCI-P3, Rec. 2020).

Browser support: Supported in Chrome 111+, Firefox 113+, Safari 15+. No IE or legacy Edge support.

OKLAB and OKLCH: Modern Perceptual Standard

OKLCH is an improved version of LCH developed by Bjorn Ottosson. It fixes perceptual non-uniformities in LCH, particularly for blue hues. OKLCH has become the recommended default color space for new CSS projects in 2025-2026.

color: oklch(60% 0.2 30);
/* Lightness: 0-100%, Chroma: 0-~0.4, Hue: 0-360 */

Why OKLCH Is the Best Color Space for CSS

  1. Best perceptual uniformity — Equal numeric changes produce equal visual changes across all hues
  2. Predictable lightness — Colors at the same lightness value genuinely look equally bright
  3. No muddy gradients — Interpolation stays clean across the entire hue range
  4. sRGB-safe by default — Most OKLCH values produce in-gamut sRGB colors
  5. Intuitive channels — Like HSL but with actual perceptual accuracy

OKLCH in Practice

/* Creating a balanced color scale with OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Notice that each step changes by roughly the same lightness value (20 percentage points). Because OKLCH is perceptually uniform, these steps appear evenly spaced to the human eye — something that is difficult to achieve with HSL.

Browser support: OKLCH is supported in Chrome 111+, Firefox 113+, Safari 15.4+. It has rapidly become the most recommended modern color space.

Color-Mix: Blend Colors in CSS

The color-mix() function blends two colors in a specified color space:

/* Mix red and blue equally in sRGB */
color: color-mix(in srgb, red, blue);

/* 30% primary, 70% white — a tint */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mix with perceived color space for smooth results */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

The in <color-space> parameter lets you control the interpolation space. For most cases, in oklch produces the best visual results.

Use cases:

  • Creating tints and shades without preprocessor functions
  • Building component variants from a single color token
  • Generating hover and active states dynamically
  • Creating gradient-like effects in a single function

Relative Color Syntax: Modify Existing Colors

CSS Color Level 4 allows you to derive new colors from existing ones by modifying individual channels:

--primary: #3366cc;

/* Using OKLCH channels */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Using HSL channels */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

The from <color> keyword unpacks the source color's channels into the destination function's channels, which you can then adjust with arithmetic.

Channel Keywords per Color Space

Each color space exposes specific channel keywords:

| Color Space | Keywords | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Browser Support Overview (2026)

| Function | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | All | All | All | All | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Relative color syntax | 111+ | 113+ | 16.2+ | 111+ |

All modern color functions are safe to use in 2026 for projects not requiring Internet Explorer support. For broader compatibility, use a build step that converts modern syntax to hex or legacy rgb().

Practical Recommendations

  • For existing projects — HSL remains the best balance of readability and capability
  • For new projects — Use OKLCH as your primary color space for its perceptual accuracy
  • For gradients — Always interpolate in OKLCH to avoid muddy transitions
  • For design systems — Store base colors in OKLCH, generate variants with color-mix() or relative syntax
  • For canvas/WebGL — Stick with RGB, which is native to the rendering pipeline

Conclusion

Modern CSS color functions have transformed what you can do with color on the web. OKLCH provides perceptual uniformity that makes color system design predictable. color-mix() and relative color syntax eliminate the need for preprocessor color functions. Together, these tools give web developers the same color power that design tools have offered for years — now directly in the browser.

Use our free online color converter to convert between all modern CSS color formats including OKLCH, LAB, HWB, and classic HEX/RGB/HSL.