Modern CSS Color Functions

Modern CSS introduces powerful colour functions that go beyond basic rgb() and hsl(), giving access to wider colour spaces and programmatic colour manipulation.

oklch()

OKLCH is a perceptually uniform colour space. oklch(lightness chroma hue) produces smooth, predictable gradients and palettes where equal numeric changes feel equal to the human eye.

color()

The color() function accesses specific colour spaces such as display-p3 (the wide gamut of modern screens), srgb, and srgb-linear.

lab() and lch()

Lab and LCH colour spaces are also perceptually uniform and supported in all modern browsers without a flag.

Example

/* OKLCH — perceptually uniform palette */
:root {
    --brand-50:  oklch(97% 0.02 250);
    --brand-400: oklch(65% 0.18 250);
    --brand-700: oklch(40% 0.18 250);
}

.btn-primary {
    background: var(--brand-400);
    color: var(--brand-50);
}

/* Wide-gamut P3 colour with sRGB fallback */
.vivid-red {
    color: #e53935;              /* sRGB fallback */
    color: color(display-p3 0.9 0.1 0.1); /* P3 wide gamut */
}

/* Perceptually uniform gradient using OKLCH */
.gradient {
    background: linear-gradient(
        to right,
        oklch(60% 0.2 0),
        oklch(60% 0.2 120),
        oklch(60% 0.2 240)
    );
}

/* LCH for accessible text colours */
.text-muted {
    color: lch(50% 10 250);
}

CSS

Full Editor

Pro Tip

When building colour palettes, use OKLCH and vary only the lightness — you get tints and shades that feel perceptually equidistant, avoiding the "muddy middle" problem common with HSL gradients.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned