Farben mischen
Zwei Farben in beliebigem Verhältnis in OKLab, OKLCH oder sRGB mischen. Ergebnis oder fertigen color-mix()-Ausdruck kopieren.
- HEX
- RGB
- OKLCH
CSS mit Fallback
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Stufen von der ersten zur zweiten
Dieselbe Mischung in jedem Farbraum
sRGB wird in der Mitte grau und dunkel. OKLab hält die Helligkeit gleichmäßig. OKLCH und HSL behalten die Sättigung, wandern aber über den Farbkreis.
Fragen und Antworten
Was ist color-mix() in CSS?
color-mix() ist eine CSS-Funktion, die zwei Farben in einem Farbraum deiner Wahl mischt, zum Beispiel color-mix(in oklab, #ff5733, #3b82f6 30%). Sie funktioniert in allen aktuellen Browsern. Für ältere Browser setzt du davor eine normale Farbe als Fallback, wie im Snippet oben.
In welchem Farbraum sollte ich mischen?
OKLab ist die sicherste Wahl: Die Mitte behält ihre Helligkeit und wird nicht schmutzig. OKLCH hält die Farben gesättigt, nimmt aber den kürzesten Weg über den Farbkreis, sodass Rot und Blau über Lila und Pink laufen. sRGB mischt wie ältere Tools, die Mitte wirkt dort oft grau und dunkel.
Warum mischt sich Licht anders als Farbe aus dem Malkasten?
Bildschirme addieren Licht, deshalb mittelt dieses Tool Lichtwerte: Blau und Gelb ergeben Grau oder eine blasse Farbe, kein Grün. Malfarben ziehen Licht ab, darum sieht dieselbe Mischung auf Papier grün aus. Um Malfarben vorherzusagen, brauchst du ein Modell für Farbmischung statt eines Bildschirmfarbraums.