CSS color() Function

CSS color() Function

The CSS color() function defines colors in a specified color space, including sRGB, Display P3, Adobe RGB, ProPhoto RGB, and Rec. 2020. It supports colors beyond the traditional sRGB range, allowing compatible displays to reproduce a wider range of colors. The function can also define transparency and create colors relative to an existing color.

Syntax

color(color-space channel1 channel2 channel3)
color(color-space channel1 channel2 channel3 / alpha)
color(from origin-color color-space channel1 channel2 channel3 / alpha)

The function specifies a color space followed by three color channel values and an optional alpha value.

For example:

.example {
  background-color: color(display-p3 1 0.5 0);
}

This defines an orange color using the Display P3 color space.

To add transparency:

.example {
  background-color: color(display-p3 1 0.5 0 / 0.5);
}

The alpha value of 0.5 makes the color 50% opaque.

Additional examples:

color(srgb 1 0 0)
color(srgb 0 0.5 1)
color(display-p3 0 1 0)
color(rec2020 0.8 0.2 0.1)
color(a98-rgb 0.5 0.3 0.8)
color(prophoto-rgb 0.6 0.4 0.2)
color(xyz-d65 0.3 0.4 0.2)

Color channels are separated by spaces, not commas. The optional alpha channel is separated by a forward slash.

Parameters

The color() function accepts a color space, three channel values, and an optional alpha value.

For example:

color(display-p3 0.8 0.4 0.2 / 0.75)

In this expression, display-p3 identifies the color space, the next three numbers define its red, green, and blue channels, and 0.75 sets the opacity to 75%.

The optional from keyword introduces relative color syntax, which uses an existing color as the starting point.

Supported Color Spaces

The color() function supports several predefined color spaces.

Each color space defines how its three channel values are interpreted.

For example:

color(srgb 0 1 0)
color(display-p3 0 1 0)
color(rec2020 0 1 0)

Although these expressions use identical channel values, they do not represent identical physical colors because each color space has different color primaries.

The available color space determines the range of colors that can be represented.

How It Works

The browser interprets the three channel values using the specified color space and converts the resulting color as needed for rendering.

For example:

.box {
  background-color: color(srgb 1 0 0);
}

This produces standard sRGB red, equivalent to:

.box {
  background-color: rgb(255 0 0);
}

However, the following uses a different color space:

.box {
  background-color: color(display-p3 1 0 0);
}

Display P3 can represent more saturated colors than sRGB in some regions of the color gamut.

On a compatible wide-gamut display, the difference may be visible. On a display limited to sRGB, the browser maps colors outside the display's supported gamut into colors it can reproduce.

The function does not automatically make every color more saturated. Its appearance depends on the selected color space, channel values, and display capabilities.

Color Channel Values

Each predefined color space uses three channel values.

For RGB-based color spaces, the channels represent red, green, and blue.

For example:

color(srgb 1 0 0)
color(srgb 0 1 0)
color(srgb 0 0 1)

These produce red, green, and blue in the sRGB color space.

For predefined RGB color spaces, values from 0 to 1 represent the normal channel range.

Percentages can also be used:

color(srgb 100% 0% 0%)
color(srgb 0% 50% 100%)

For RGB color spaces, 100% corresponds to 1.

Values outside the normal range are permitted, but they may describe colors outside the selected color space's gamut.

For example:

color(display-p3 1.2 0.2 0)

This is syntactically valid, but its first channel exceeds the usual in-gamut range. The browser may need to map the color before displaying it.

XYZ channel values represent color coordinates rather than red, green, and blue intensities.

Alpha Channel

The optional alpha channel controls the opacity of the specified color.

It is introduced using a forward slash after the three color channels.

For example:

background-color: color(display-p3 1 0.4 0 / 0.5);

The alpha value of 0.5 makes the color 50% opaque.

Percentages are also accepted:

color(display-p3 1 0.4 0 / 25%)
color(display-p3 1 0.4 0 / 50%)
color(display-p3 1 0.4 0 / 75%)

If the alpha channel is omitted in an absolute color, the color is fully opaque.

Alpha transparency affects only the specified color, unlike the opacity property, which affects the entire rendered element and its descendants.

Wide-Gamut Colors

A color gamut is the range of colors that a color space or display can represent.

Traditional web colors are generally defined within the sRGB gamut.

Wide-gamut color spaces, such as Display P3 and Rec. 2020, can represent colors outside that range.

For example:

.standard-green {
  background-color: color(srgb 0 1 0);
}
.wide-green {
  background-color: color(display-p3 0 1 0);
}

The second declaration defines green in Display P3, which can appear more saturated on compatible hardware.

To target displays that support the P3 gamut, use the color-gamut media feature:

.example {
  background-color: #00cc66;
}
@media (color-gamut: p3) {
  .example {
    background-color: color(display-p3 0 0.85 0.4);
  }
}

The first declaration provides an sRGB fallback. The media query applies the Display P3 color when the output device reports support for at least the P3 gamut.

The color-gamut feature describes the display's approximate color reproduction capabilities. It does not guarantee that every specified color will appear identical on different devices.

Relative Colors

The color() function also supports relative color syntax, which creates a new color from an existing color.

Relative colors use the from keyword.

For example:

color(from #0066cc srgb r g b)

This converts the original color into sRGB channels and uses those channels to define the result.

Individual channels can be modified using calculations:

color(from #0066cc srgb r g calc(b * 0.7))

This reduces the blue channel to 70% of its original value.

Another example modifies the red channel:

color(from #0066cc srgb calc(r + 0.2) g b)

The resulting red channel is increased by 0.2.

Relative syntax can also change the color space:

color(from #0066cc display-p3 r g b)

The original color is converted to Display P3 coordinates before the channels are used.

To change transparency:

color(from #0066cc srgb r g b / 0.5)

The result uses the original color's sRGB channels with 50% opacity.

Relative color syntax is newer than basic color() support, so check compatibility when using it in production.

Using Custom Properties

The color() function works with CSS custom properties through var().

For example:

:root {
  --brand-color: color(display-p3 0 0.45 0.9);
}
.button {
  background-color: var(--brand-color);
  color: #fff;
}

The custom property stores the complete color value for reuse.

Individual color channels can also be stored:

:root {
  --red: 0.1;
  --green: 0.5;
  --blue: 0.9;
}
.box {
  background-color: color(display-p3 var(--red) var(--green) var(--blue));
}

Changing any custom property updates the resulting color.

For a reusable color with adjustable transparency:

:root {
  --brand-channels: 0.1 0.5 0.9;
}
.box {
  background-color: color(display-p3 var(--brand-channels) / 0.75);
}

The custom property supplies the three channels, while the alpha value controls transparency.

Color Fallbacks

Wide-gamut colors may not be supported by every browser or display.

For reliable results, provide an sRGB fallback before the advanced color declaration.

For example:

.button {
  background-color: #0066cc;
  background-color: color(display-p3 0 0.4 0.8);
}

Browsers that do not recognize color() retain the earlier hexadecimal color.

Browsers that support color() use the Display P3 declaration, converting the color as needed for the output device.

To apply a wide-gamut color only on compatible displays:

.button {
  background-color: #0066cc;
}
@media (color-gamut: p3) {
  .button {
    background-color: color(display-p3 0 0.4 0.8);
  }
}

For feature detection, use @supports:

@supports (color: color(display-p3 1 0 0)) {
  .button {
    background-color: color(display-p3 0 0.4 0.8);
  }
}

The @supports rule checks whether the browser understands the declaration, while color-gamut checks the approximate capabilities of the output device.

Example

The following example compares colors defined using sRGB and Display P3.

On a compatible wide-gamut display, the Display P3 colors may appear more saturated.

HTML:

<div class="color-function-demo">
  <div class="color-function-item">
    <span>sRGB Green</span>
    <div class="color-function-swatch color-srgb-green"></div>
  </div>
  <div class="color-function-item">
    <span>Display P3 Green</span>
    <div class="color-function-swatch color-p3-green"></div>
  </div>
  <div class="color-function-item">
    <span>sRGB Red</span>
    <div class="color-function-swatch color-srgb-red"></div>
  </div>
  <div class="color-function-item">
    <span>Display P3 Red</span>
    <div class="color-function-swatch color-p3-red"></div>
  </div>
</div>

CSS:

.color-function-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.color-function-item {
  width: 140px;
  text-align: center;
}
.color-function-item span {
  display: block;
  margin-bottom: 10px;
}
.color-function-swatch {
  width: 140px;
  height: 100px;
  border: 1px solid #ccc;
}
.color-srgb-green {
  background-color: #00ff00;
  background-color: color(srgb 0 1 0);
}
.color-p3-green {
  background-color: #00ff00;
  background-color: color(display-p3 0 1 0);
}
.color-srgb-red {
  background-color: #ff0000;
  background-color: color(srgb 1 0 0);
}
.color-p3-red {
  background-color: #ff0000;
  background-color: color(display-p3 1 0 0);
}

Each pair uses the same numeric channel values but a different color space.

The visual difference depends on the browser, operating system, and display capabilities.

Transparency Example

The following example demonstrates different alpha values using the color() function.

Each swatch uses the same Display P3 color with a different opacity.

HTML:

<div class="color-alpha-demo">
  <div class="color-alpha-item">
    <span>100% Opacity</span>
    <div class="color-alpha-swatch color-alpha-full"></div>
  </div>
  <div class="color-alpha-item">
    <span>75% Opacity</span>
    <div class="color-alpha-swatch color-alpha-75"></div>
  </div>
  <div class="color-alpha-item">
    <span>50% Opacity</span>
    <div class="color-alpha-swatch color-alpha-50"></div>
  </div>
  <div class="color-alpha-item">
    <span>25% Opacity</span>
    <div class="color-alpha-swatch color-alpha-25"></div>
  </div>
</div>

CSS:

.color-alpha-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.color-alpha-item {
  width: 140px;
  text-align: center;
}
.color-alpha-item span {
  display: block;
  margin-bottom: 10px;
}
.color-alpha-swatch {
  width: 140px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.color-alpha-full {
  background-color: color(display-p3 0 0.5 1 / 1);
}
.color-alpha-75 {
  background-color: color(display-p3 0 0.5 1 / 0.75);
}
.color-alpha-50 {
  background-color: color(display-p3 0 0.5 1 / 0.5);
}
.color-alpha-25 {
  background-color: color(display-p3 0 0.5 1 / 0.25);
}

The swatches become more transparent as the alpha value decreases.

The background pattern remains visible through the transparent portions of each swatch.

color() vs. rgb()

The color() and rgb() functions can both define RGB colors, but they differ in the color spaces they support and the scale of their channel values.

For example, these two declarations represent the same sRGB color:

color: rgb(255 0 0);
color: color(srgb 1 0 0);

However, this declaration uses a wider-gamut color space:

color: color(display-p3 1 0 0);

Use rgb() for straightforward sRGB colors and color() when explicit color-space control is required.

Common Uses

The color() function is useful when a design requires explicit color-space control or wide-gamut colors.

For example, a reusable wide-gamut brand color can be defined as:

:root {
  --brand-primary: #0066cc;
}
@media (color-gamut: p3) {
  :root {
    --brand-primary: color(display-p3 0 0.4 0.85);
  }
}
.button {
  background-color: var(--brand-primary);
}

This provides a standard fallback while allowing a Display P3 color on compatible displays.

Limitations

The color() function has several important rules and limitations.

• A supported color space must be specified before the channel values.
• Predefined color spaces require three channel values.
• Channel values are separated by spaces, not commas.
• Wide-gamut colors may appear different on displays with different capabilities.
• Colors outside the output device's gamut may require gamut mapping.
• The same numeric channels do not necessarily represent the same color in different color spaces.
• Relative color syntax may have different browser support from basic color().
• The function does not automatically guarantee sufficient contrast for readable text.

For example, this is valid:

color(display-p3 1 0.5 0)

However, this is invalid because the color space is missing:

color(1 0.5 0)

This is also invalid because commas are not supported:

color(display-p3, 1, 0.5, 0)

To use a Lab-based color model directly, use the appropriate function, such as lab(), lch(), oklab(), or oklch().

When using wide-gamut colors for text and interface controls, check contrast and readability on both wide-gamut and standard displays.

Browser Support

The CSS color() function is Baseline Widely available and has been supported across major browser engines since May 2023.

Some features, including relative color syntax and certain color spaces, have different compatibility requirements.

For a fallback, provide a standard CSS color before the advanced declaration:

.example {
  background-color: #0066cc;
  background-color: color(display-p3 0 0.4 0.85);
}

Browsers that do not support color() retain the hexadecimal fallback.

For displays with a P3 gamut, use:

@media (color-gamut: p3) {
  .example {
    background-color: color(display-p3 0 0.4 0.85);
  }
}

For current compatibility information, visit Can I Use? and search for CSS color() function or CSS wide-gamut colors.

Specifications

The color() function is defined in the CSS Color Module Level 4 .

The specification defines predefined color spaces, channel values, alpha transparency, color conversion, and gamut mapping.

Relative color syntax is further defined in the CSS Color Module Level 5 .

Related functions include rgb(), lab(), lch(), oklab(), oklch(), and color-mix().