Relative colors

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).

Baseline Status: Achieved Newly Available on Sep 16, 2024 across core engines.

Desktop Browser Engine Support

Google Chrome

125

Supported

Mozilla Firefox

128

Supported

Apple Safari

18

Supported

Microsoft Edge

125

Supported

Mobile Browser Engine Support

Chrome Android

125

Firefox Android

128

Safari iOS

18

Specifications and References

Specification ↗ Can I Use (css-relative-colors) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.types.calc.color_component ↗ css.types.color.color.relative_syntax ↗ css.types.color.hsl.relative_syntax ↗ css.types.color.hwb.relative_syntax ↗ css.types.color.lab.relative_syntax ↗ css.types.color.lch.relative_syntax ↗ css.types.color.oklab.relative_syntax ↗ css.types.color.oklch.relative_syntax ↗ css.types.color.rgb.relative_syntax ↗