Color variants without Sass functions
The old way used Sass functions like lighten(), darken(), and saturate() at compile time. Relative color syntax derives variants from a variable at runtime with oklch(from var(--x) ...).
2 background:
3 oklch(from var(--brand) calc(l + 0.2) c h);
4}
5
6/* Runtime. Updates when --brand changes. */
2/* Sass: color.adjust($brand, $lightness: 20%) */
3
4.btn {
5 background: lighten(var(--brand), 20%);
6}
7
8/* Compile-time only. No runtime updates. */
Relative color syntax Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Runtime
Variants are computed from CSS variables when the style is applied. Change --brand and all derivatives update.
No preprocessor
No Sass or build step. Pure CSS, works with any pipeline and in browser devtools.
Full control
Adjust lightness (l), chroma (c), or hue (h) in oklch. Same idea as lighten/darken but with a proper color model.
How it works
The old way was Sass (or similar): lighten($brand, 20%), darken($brand, 10%), saturate($brand, 5%). Those run at compile time and output static hex or rgb. If --brand changes at runtime (e.g. theme switch), you need to precompute every variant and output separate values.
The modern way is relative color syntax. You write something like oklch(from var(--brand) calc(l + 0.2) c h): take the value of var(--brand), interpret it in oklch, and create a new color with lightness increased by 0.2 and chroma and hue unchanged. It runs in the browser. Change --brand and the variant updates. No preprocessor required.