color-mix() für Farbvarianten

Als Sass-Nutzer habe ich unter anderem die Farb-Funktionen, um eine Farbe aufzuhellen (lighten()) oder abzudunkeln (darken()) geliebt. Als ich dann auf Custom Properties umstieg, war ich ziemlich enttäuscht, dass es dafür keine nativen CSS-Funktionen gab.

Doch Zeiten ändern sich zum Glück (siehe Browser-Support). Mit color-mix() lassen sich (schon eine ganze Weile) relativ einfach Abstufungen einer Farbe erzeugen. Hier ein Beispiel:

--color-red: #f00;
--color-red-dark: color-mix(in srgb, var(--color-red), #000 20%);

Auch halbtransparente Farben sind damit möglich:

--color-red: #f00;
--color-red-dark: color-mix(in srgb, var(--color-red), transparent 50%);

Mehr über color-mix(): Simplify Your Color Palette With CSS Color-Mix()