CSS color-mix() Funktion
Von Felix Die funktionale Schreibweise color-mix() kombiniert zwei Farbwerte und gibt das Ergebnis der Mischung dieser Werte in einem bestimmten Farbraum zurück.
Mit der nativen CSS color-mix() Funktion können zwei Farbwerte miteinander gemischt werden und zusätzlich der Farbraum für die Rückgabe des errechneten Farbwertes bestimmt werden.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
CSS Farbmischung mit Präprozessor
Um in CSS zwei Farbwerte miteinander zu mischen, waren wir bisher auf Präprozessoren wie SASS oder LESS angewiesen. In SASS zum Beispiel steht uns die mix()-Funktion zur Verfügung, die zwei Farbwerte und eine Prozentangabe zum Mischverhältnis annimmt. Daraus wird der neue Farbwert generiert. Wir schreiben also:
button {
background: mix(#147c85, white, 20%);
}und im generierten CSS steht dann:
button {
background: #d0e5e7;
}Native CSS-Farbmischung
Mit der nativen CSS Funktion color-mix() wird die mix()-Funktion von SASS obsolet. Zusätzlich können wir noch den Farbraum mit angeben. Folgende stehen zur Auswahl: lch, lab, srgb, hsl, hwb, xyz. Wobei lch der Standard ist und verwendet wird, wenn kein Farbraum angegeben wird. Als Farbe kann jeder im Web valide Farbcode angegeben werden (#d0e5e7, rgb(20, 124, 133), lightseagreen, etc.) – auch eine CSS-Variable.
Folgender Anwendungsfall: Wir haben einen Petrol-Farbton mit dem HEX-Wert #147c85. Diesen möchten wir um 80% aufhellen – ihn mit weiß mischen. Dazu schreiben wir:
button {
background: color-mix(#147c85 20%, white);
}
#147c85 und rechts der gemischte Farbwert mit Weiß im Verhältnis 20% zu 80%.Um einen Schritt weiter zu gehen, können wir außerdem den Ziel-Farbraum in sRGB ändern, indem wir die Angabe in srg hinzufügen:
button {
background: color-mix(in srgb, #147c85 20%, white);
}wird vom Browser wie folgt interpretiert:
button {
background-color: color-mix(in srgb, rgb(20, 124, 133) 20%, white);
}Die color-mix()-Funktion ist Teil der CSS Spezifikation Color Module Level 5 und muss zum Zeitpunkt des Verfassens dieses Artikels explizit im Browser aktiviert werden.
Geschrieben von Felix Lehmann
Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.
Feedback & Ergänzungen – Schreibe einen Kommentar
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →