coderef

Relative colorsBaseline · Newly available

The from keyword for color functions (color(), hsl(), oklch(), etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS).

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Sep 16, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–124Not supported
125+Supportedsince May 14, 2024
Current: 155
Edge
12–124Not supported
125+Supportedsince May 17, 2024
Current: 154
Firefox
1–127Not supported
128+Supportedsince Jul 9, 2024
Current: 157
Safari
1–17.6Not supported
18+Supportedsince Sep 16, 2024
Current: 27
MobileChrome Android
18–124Not supported
125+Supportedsince May 14, 2024
Current: 155
Firefox Android
4–127Not supported
128+Supportedsince Jul 9, 2024
Current: 157
Safari iOS
1–17.6Not supported
18+Supportedsince Sep 16, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Sep 16, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using
@supports (color: color(display-p3 1 0 0)) {
  /* styles that use color */
}

/* or in JavaScript */
if (CSS.supports("color", "color(display-p3 1 0 0)")) {
  // use it
}

Specification

Usage share

Sub-features

Support for each part of the feature (9). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
<calc>.color_component11911912816.411912816.4
<color>.color.relative_syntax1191191281811912818
<color>.hsl.relative_syntax1251251281812512818
<color>.hwb.relative_syntax1251251281812512818
<color>.lab.relative_syntax11911912816.411912816.4
<color>.lch.relative_syntax1191191281811912818
<color>.oklab.relative_syntax12212212816.412212816.4
<color>.oklch.relative_syntax1221221281812212818
<color>.rgb.relative_syntax1221221281812212818