Newly availableHelpful when Relative colors improves stylesheet organization, fallback behavior, or cascade control.
Syntax and cascade Newly available

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

Syntax and cascade

Overview

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

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.calc.color_component
119
119
128
16.4
119
16.4
CSS type
color.relative syntax

Relative `color()` syntax
119
119
128
18
119
18
hsl.relative syntax

Relative HSL colors
125
125
128
18
125
18
hwb.relative syntax

Relative HWB colors
125
125
128
18
125
18
lab.relative syntax

Relative Lab colors
119
119
128
16.4
119
16.4
lch.relative syntax

Relative LCH colors
119
119
128
18
119
18
oklab.relative syntax

Relative Oklab colors
122
122
128
16.4
122
16.4
oklch.relative syntax

Relative Oklch colors
122
122
128
18
122
18
rgb.relative syntax

Relative RGB colors
122
122
128
18
122
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with channel values do not work correctly, requiring values to be specified as percentages with units (`%`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with channel values do not work correctly, requiring values to be specified as percentages with units (`%`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • `s` and `l` channel values incorrectly resolve to numbers between 0-1 rather than 0-100. As a result, channel value calculations require `s` and `l` values to be specified as decimal percentage equivalents (e.g. 0.2 for 20%). See bug 330096624.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • `s` and `l` channel values incorrectly resolve to numbers between 0-1 rather than 0-100. As a result, channel value calculations require `s` and `l` values to be specified as decimal percentage equivalents (e.g. 0.2 for 20%). See bug 330096624.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with channel values do not work correctly, requiring values to be specified with units (`deg` for `h`, `%` for `s` and `l`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • `s` and `l` channel values incorrectly resolve to numbers between 0-1 rather than 0-100. As a result, channel value calculations require `s` and `l` values to be specified as decimal percentage equivalents (e.g. 0.2 for 20%). See bug 330096624.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with channel values do not work correctly, requiring values to be specified with units (`deg` for `h`, `%` for `s` and `l`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • `w` and `b` channel values incorrectly resolve to numbers between 0-1 rather than 0-100. As a result, channel value calculations require `w` and `b` values to be specified as decimal percentage equivalents (e.g. 0.2 for 20%). See bug 330096624.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • `w` and `b` channel values incorrectly resolve to numbers between 0-1 rather than 0-100. As a result, channel value calculations require `w` and `b` values to be specified as decimal percentage equivalents (e.g. 0.2 for 20%). See bug 330096624.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with channel values do not work correctly, requiring values to be specified with units (`deg` for `h`, `%` for `w` and `b`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • `w` and `b` channel values incorrectly resolve to numbers between 0-1 rather than 0-100. As a result, channel value calculations require `w` and `b` values to be specified as decimal percentage equivalents (e.g. 0.2 for 20%). See bug 330096624.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with channel values do not work correctly, requiring values to be specified with units (`deg` for `h`, `%` for `w` and `b`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with `h` channel values do not work correctly, requiring values to be specified with units (`deg`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with `h` channel values do not work correctly, requiring values to be specified with units (`deg`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • `l` channel values incorrectly resolve to numbers between 0-100 rather than 0-1. As a result, channel value calculations require `l` values to be specified as percentage numbers without units (e.g. 20 for 0.2). See bug 40940488.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • `l` channel values incorrectly resolve to numbers between 0-100 rather than 0-1. As a result, channel value calculations require `l` values to be specified as percentage numbers without units (e.g. 20 for 0.2). See bug 40940488.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • `l` channel values incorrectly resolve to numbers between 0-100 rather than 0-1. As a result, channel value calculations require `l` values to be specified as percentage numbers without units (e.g. 20 for 0.2). See bug 40940488.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • `l` channel values incorrectly resolve to numbers between 0-100 rather than 0-1. As a result, channel value calculations require `l` values to be specified as percentage numbers without units (e.g. 20 for 0.2). See bug 40940488.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • `l` channel values incorrectly resolve to numbers between 0-100 rather than 0-1. As a result, channel value calculations require `l` values to be specified as percentage numbers without units (e.g. 20 for 0.2). See bug 40940488.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with `h` channel values do not work correctly, requiring values to be specified with units (`deg`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • `l` channel values incorrectly resolve to numbers between 0-100 rather than 0-1. As a result, channel value calculations require `l` values to be specified as percentage numbers without units (e.g. 20 for 0.2). See bug 40940488.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, calculations with `h` channel values do not work correctly, requiring values to be specified with units (`deg`).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • Channel values incorrectly resolve to numbers between 0-1 rather than 0-255. As a result, channel value calculations require values to be specified as decimal percentage equivalents (e.g. 0.3 for 30%, which would be equivalent to a 76.5 `<number>` value). See bug 41490327.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • Channel values incorrectly resolve to numbers between 0-1 rather than 0-255. As a result, channel value calculations require values to be specified as decimal percentage equivalents (e.g. 0.3 for 30%, which would be equivalent to a 76.5 `<number>` value). See bug 41490327.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, channel value calculations do not work correctly, requiring values to be specified as percentages with units (e.g. 30%, which would be equivalent to a 76.5 `<number>` value). See bug 267647.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (122)
Implementation note
  • Channel values incorrectly resolve to numbers between 0-1 rather than 0-255. As a result, channel value calculations require values to be specified as decimal percentage equivalents (e.g. 0.3 for 30%, which would be equivalent to a 76.5 `<number>` value). See bug 41490327.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Implementation based on older spec version. As a result, channel value calculations do not work correctly, requiring values to be specified as percentages with units (e.g. 30%, which would be equivalent to a 76.5 `<number>` value). See bug 267647.

Syntax

CSS 
/* Increase the brightness of the original color */
.lighter {
  --base: oklch(0.5 0.15 250);
  color: oklch(from var(--base) calc(l + 0.2) c h);
}

/* Reduce saturation */
.desaturated {
  color: hsl(from var(--brand) h calc(s - 30%) l);
}

/* Rotate hue */
.rotated {
  color: oklch(from var(--base) l c calc(h + 180));
}

/* Add opacity */
.faded {
  color: rgb(from var(--text) r g b / 0.5);
}

Live demo

lightnessbarie-tion

Relative color syntax lightnessbarie-tion demo.

PreviewFullscreen

Colorphaserotate

Relative color syntax Colorphaserotate demo.

PreviewFullscreen

opacityadd

Relative color syntax opacityadd demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use Relative colors to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links

Powered by web-features