CSS - Farben dynamisch berechnen
color-mix: eine Variable, viele Möglichkeiten
Wer kennt es nicht?
Im Projekt werden neben der eigentlichen Basisfarbe zahlreiche Abstufungen, Transparenzen und Varianten benötigt. Für jede dieser Farben eigene CSS-Variablen mit festen Farbcodes zu definieren, sorgt schnell für unnötigen Pflegeaufwand. Mit color-mix() lassen sich Farben direkt in CSS dynamisch miteinander kombinieren.
Dadurch können beispielsweise hellere oder dunklere Varianten, Transparenzen, Hover-Zustände, dezente Hintergründe oder Border-Farben direkt aus bestehenden Farbvariablen erzeugt werden – ohne zusätzliche Farbcodes manuell berechnen und verwalten zu müssen.
Grundsyntax
color-mix(in srgb, Farbe 1, Farbe 2);Unsere Grundvariablen
:root {
--background: #FFFFFF;
--color: #000000;
--primary: #297ae2;
--secondary: #21ffa2;
}Mischungsverhältnis festlegen
Du kannst für jede Farbe einen prozentualen Anteil festlegen. Dadurch bestimmst du gezielt, wie stark die jeweilige Farbe in das resultierende Farbergebnis einfließt. Das ist besonders hilfreich, wenn du eine Basisfarbe nur leicht aufhellen, abdunkeln oder mit einer zweiten Farbe kombinieren möchtest.
.button {
background: color-mix(
in srgb,
var(--primary) 70%,
var(--background) 30%
);
}Mit Transparenz
color-mix() eignet sich auch hervorragend, um eine Farbe transparenter erscheinen zu lassen, ohne dafür einen separaten rgba()- oder rgb()-Wert mit Alpha-Kanal definieren zu müssen. Dafür wird die gewünschte Farbe mit transparent gemischt. Der prozentuale Anteil bestimmt, wie stark die ursprüngliche Farbe im Ergebnis erhalten bleibt.
.card {
background: color-mix(
in srgb,
var(--color) 5%,
transparent
);
}Damit kannst du beispielsweise dezente Flächen erzeugen, ohne einen separaten RGBA-Wert berechnen zu müssen. Wie man sieht, es müssen nicht immer hunderte Variablen sein.