v131 · css

Support currentcolor in Relative Color Syntax

Allow relative colors in CSS (using the 'from' keyword) to use 'currentcolor' as a base. This will make it easy for web developers to set complementary colors, based on an element's text color, for that element's borders, shadows, backgrounds, etc.

concepts

  1. currentcolor in RCS

    Relative color syntax accepts currentcolor as the base. Lets components derive variants from the inherited text color.

  2. Component palette switcher

    One card markup re-theming every part (border, badge fg/bg, body, divider) from a single inherited color.

  3. Dark-mode reskin

    Four themes (light, dark, sepia, high-contrast) — every shade on the cards (border, divider, pill) is derived from a single color.

  4. Hover/active/disabled state shades

    A button derives every interactive state from one brand colour via oklch(from currentcolor ...). Pick a brand colour and try the states.

  5. Gradients from currentcolor

    Three brand cards whose gradient backgrounds, borders, and shadows are all derived from a single color via oklch(from currentcolor l c h). A color picker updates the entire palette instantly.

  6. Link State Palette

    All five link states (normal, visited, hover, active, focus) derive their colors from a single brand color via relative color syntax. Pick a hue to shift the whole palette.

why it shipped

Relative Color Syntax was selected for Interop 2024 with a large fraction of non-passing tests covering use of currentcolor. Without this feature, web developers have to resort to sub-optimal workarounds such as passing the base color in a CSS Variable.

references