Modern CSS Color Functions

CSS originally provided a relatively small set of ways to describe colors, including named colors, hexadecimal notation, rgb() and hsl(). Modern CSS has expanded this system significantly by introducing additional color functions and color spaces designed for greater flexibility, wider gamuts and more predictable color manipulation.

Modern color functions allow developers to work with RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH and other color models directly in CSS. They also provide more expressive syntax for transparency, interpolation and mixing, making advanced color systems easier to implement without converting every color manually outside the browser.

What Are CSS Color Functions?

A CSS color function is a functional notation that describes a color using one or more numerical components. The browser interprets those components according to the function's associated color model or color space and converts the result into the color used for rendering.

rgb(59 130 246)
hsl(217 91% 60%)
oklch(65% 0.2 250)

Different functions are useful for different purposes. RGB is convenient for directly describing red, green and blue components, HSL is intuitive for adjusting hue and lightness, while perceptual spaces such as OKLCH can make controlled color variations more useful for modern design systems.

Modern rgb() Syntax

The modern rgb() function uses space-separated components instead of requiring commas. Each RGB component can be represented using numbers or percentages, and an optional slash can introduce an alpha value.

color: rgb(59 130 246);
color: rgb(59 130 246 / 50%);
color: rgb(23% 51% 96% / 0.75);

This syntax is more consistent with modern CSS color functions because alpha is separated from the primary color components using a slash. The older comma-based rgb() syntax remains widely encountered in existing stylesheets.

HSL and HSLA

HSL represents a color using hue, saturation and lightness. Hue is expressed as an angle around the color wheel, while saturation and lightness are percentages. HSL remains useful when a design requires intuitive adjustments to the basic appearance of a color.

color: hsl(220 90% 56%);
color: hsl(220 90% 56% / 50%);

Modern CSS does not require a separate hsla() function. Alpha can be included directly in hsl() using the slash syntax. This reduces the number of separate function names developers need to remember.

HWB Color Function

HWB stands for hue, whiteness and blackness. Instead of describing saturation and lightness, HWB starts with a hue and then controls how much white and black are added to the color.

color: hwb(220 10% 15%);
color: hwb(220 10% 15% / 70%);

HWB can be convenient when creating lighter or darker variations of a hue. It provides a straightforward mental model for adding white or black without manually calculating RGB channel values.

Lab Color Space

The lab() function represents colors in the CIE Lab color space. It uses a lightness component together with two opponent color dimensions commonly represented as a and b. Lab was designed to describe color relationships in a way that is more aligned with human perception than basic device-oriented RGB coordinates.

color: lab(60% 20 40);
color: lab(60% 20 40 / 80%);

Lab can be useful when developers need to describe colors independently from a particular RGB device model. It is especially relevant to modern color workflows where perceptual relationships and wider color gamuts matter.

LCH Color Space

LCH is a cylindrical representation related to Lab. It uses lightness, chroma and hue. Because hue is represented as an angle and chroma describes the intensity of the color, LCH can be easier to reason about when creating systematic color variations.

color: lch(60% 70 250);
color: lch(60% 70 250 / 50%);

Increasing or decreasing lightness and chroma independently can provide more predictable design adjustments than changing RGB channels directly. However, not every combination of LCH coordinates corresponds to a displayable color within every output gamut.

OKLab

OKLab is a perceptual color space designed to provide useful relationships between colors while being computationally practical for graphics and web applications. It represents colors using lightness and two color axes.

color: oklab(65% 0.1 -0.05);
color: oklab(65% 0.1 -0.05 / 75%);

OKLab is particularly useful for color interpolation and creating smooth transitions because its coordinates can produce more perceptually consistent changes than many traditional RGB-based approaches.

OKLCH

OKLCH is a cylindrical form of OKLab using lightness, chroma and hue. It has become particularly useful in modern CSS because developers can adjust perceived lightness, color intensity and hue using separate parameters.

color: oklch(65% 0.2 250);
color: oklch(65% 0.2 250 / 60%);

For design systems, OKLCH can make it easier to construct related colors by changing one component while keeping others relatively stable. For example, a palette can be designed around a consistent lightness progression while hue and chroma are adjusted for different semantic roles.

The color() Function

The color() function provides a general syntax for specifying colors in particular color spaces. It is especially important for modern wide-gamut workflows because it can address predefined spaces such as display-p3 and rec2020 in addition to other supported color spaces.

color: color(display-p3 1 0.2 0.1);
color: color(display-p3 1 0.2 0.1 / 70%);

Unlike RGB notation tied to a conventional sRGB workflow, color() can explicitly identify the color space being used. This makes the intended color representation clearer when working with displays and assets capable of reproducing colors outside the traditional sRGB gamut.

Alpha Values in Modern CSS

Most modern CSS color functions support an optional alpha component. A slash separates the main color coordinates from the alpha value, which can be written as either a number from zero to one or a percentage.

rgb(255 0 0 / 0.5)
rgb(255 0 0 / 50%)
oklch(65% 0.2 250 / 50%)

An alpha value of zero represents full transparency, while an alpha value of one or 100% represents full opacity. Intermediate values allow colors to blend with the content behind them.

Color Spaces vs Color Models

Color model and color space are related but not identical concepts. A color model describes how color components are organized, while a color space defines those components within a particular interpretation and gamut. For example, RGB is a model, while sRGB and Display P3 are specific color spaces built around RGB concepts.

sRGB and Wide-Gamut Colors

Traditional web colors are commonly associated with the sRGB color space. Modern CSS also supports wider-gamut spaces that can represent colors outside the sRGB gamut on compatible displays.

Display P3 is one important example. It provides a wider range of reproducible colors than sRGB, allowing compatible displays to show more saturated colors. Using wide-gamut colors can improve visual richness, but developers should still account for devices and environments that cannot reproduce the full gamut.

Color Gamut

A color gamut is the range of colors that a particular color space, device or display can represent. A color can be valid in a wide-gamut color space while falling outside the range that a smaller-gamut display can reproduce.

When a color is outside the target display gamut, the browser or rendering system must map it into a displayable range. This process can change the final appearance, which is why wide-gamut colors should be tested across realistic devices.

Color Interpolation

CSS often needs to calculate colors between two defined values, such as during gradients, transitions and animations. The color space used for interpolation can affect the path between the colors and therefore the appearance of the intermediate states.

RGB interpolation can sometimes produce intermediate colors that appear less natural than expected. Perceptual color spaces such as OKLab and OKLCH can provide more useful interpolation behavior for certain design tasks because their coordinates are designed around perceptual relationships.

The color-mix() Function

The color-mix() function allows CSS to mix two colors directly. It can optionally specify the color space in which the mixing should occur, giving developers more control over the resulting color.

color: color-mix(in srgb, blue 60%, white);
color: color-mix(in oklch, blue 60%, white);

The selected interpolation space can produce noticeably different results. This makes color-mix() particularly useful for design systems where colors need to be generated from base colors rather than manually maintained as separate hexadecimal values.

Modern Color Functions in Design Systems

Modern color functions can simplify design systems by allowing colors to be expressed as relationships rather than isolated values. Instead of defining dozens of unrelated shades, a system can establish a base hue and systematically adjust lightness, chroma or transparency.

:root {
  --brand: oklch(65% 0.2 250);
  --brand-light: oklch(85% 0.12 250);
  --brand-dark: oklch(45% 0.18 250);
}

This approach can make themes easier to maintain because related colors share an understandable structure. It also makes it easier to experiment with light and dark variants without manually recalculating every RGB or hexadecimal component.

Fallbacks for Older Browsers

When adopting modern CSS color features, developers may need to consider environments that do not support every function or color space. A common strategy is to provide a broadly supported fallback first and then override it with a more modern declaration.

.button {
  background: #2563eb;
  background: oklch(60% 0.2 250);
}

The browser uses the declaration it understands according to normal CSS parsing and cascade behavior. This pattern allows modern color improvements while retaining a usable fallback for environments with incomplete support.

Choosing the Right Color Function

Common Mistakes

Modern CSS color syntax provides considerable flexibility, but using more advanced functions does not automatically produce better colors. Developers still need to understand color spaces, gamut limitations, accessibility and browser support.

• Assuming every color space represents the same range of colors.
• Treating HSL as a fully perceptual color space.
• Ignoring wide-gamut display differences.
• Using transparency without checking the resulting contrast.
• Assuming RGB and OKLCH interpolation produce equivalent results.
• Using advanced color functions without appropriate fallbacks.
• Choosing colors only by their numerical values instead of their rendered appearance.

Best Practices

• Use the color function that matches the design task.
• Prefer modern syntax with explicit alpha values when appropriate.
• Consider OKLCH for systematic perceptual color adjustments.
• Use color() when an explicit wide-gamut color space is required.
• Test wide-gamut colors on different display types.
• Provide fallbacks when browser support requirements justify them.
• Check contrast using the final rendered colors.
• Keep color definitions consistent across the design system.

Frequently Asked Questions

Helpful Color Tools

A Color Converter helps transform colors between different supported representations, a CSS Gradient Generator creates gradients using modern CSS color syntax, a HEX Color Picker makes it easy to inspect and choose hexadecimal colors, an RGB Color Picker provides direct control over RGB components, and an HSL Color Picker helps create colors by adjusting hue, saturation and lightness.

Conclusion

Modern CSS color functions have expanded color handling far beyond traditional hexadecimal and RGB notation. Developers can now work directly with HSL, HWB, Lab, LCH, OKLab, OKLCH and wide-gamut color spaces, while functions such as color-mix() provide new ways to generate and interpolate colors. RGB and HSL remain practical for many everyday tasks, while perceptual spaces such as OKLCH are valuable for systematic palette design and controlled color adjustments. The best approach is to choose the color representation that matches the task, consider browser and display support, provide fallbacks when necessary and always evaluate important colors in their final rendered context.