CSS color-mix() Funktion

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.

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, srgbhslhwbxyz. 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);
}
Links der Ausgangswert #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. Der Browsersupport umfasst ab Mai 2023 alle Grade A-Browser (Chrome, Firefox, Safari).

Geschrieben von:

Felix Lehmann

Benutzerbild

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Maren Lange
    schrieb am 18.08.2023 um 08:58 Uhr:

    Soweit ich das im Chrome getestet habe ist die Angabe eines Zielfarbraumes Pflicht. Ohne Zielfarbraum hat es bei mir zumindest nicht funktioniert. Mit Zielfarbraum aber schon.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

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.

Schulung + Beratung