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/* .btn { background: color.adjust($brand, $lightness: 20%); } */
3
4.btn {
5 background: lighten(var(--brand), 20%);
6}
7
8/* Compile-time only; no runtime change without rebuild. */
2 background: oklch(from var(--brand) calc(l + 0.2) c h);
3}
4
5/* Lighter variant at runtime; --brand can change (e.g. theme). */
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.