color-mix()-Rechner
Zwei Farben mit CSS color-mix() mischen: Anteil, Farbraum und Farbton-Interpolation wählen, Ergebnis als HEX, RGB und OKLCH.
Der color-mix()-Rechner mischt zwei Farben mit der CSS-Funktion color-mix(). Du stellst den Anteil der ersten Farbe, den Farbraum und bei polaren Räumen die Farbton-Interpolation ein. Der Browser berechnet das Ergebnis selbst; du erhältst den CSS-Ausdruck, den Mischwert als HEX, RGB, HSL und OKLCH sowie eine Skala von 0 bis 100 Prozent.
100 % Farbe 2100 % Farbe 1
CSS-Ausdruck
color-mix(in oklch, #2563eb 50%, #f97316)
So funktioniert color-mix()
color-mix(in oklch, #2563eb 60%, #f97316) mischt 60 % der ersten mit 40 % der zweiten
Farbe im Farbraum OKLCH. Fehlt eine Prozentangabe, gilt 50 %. Die Funktion lässt sich überall einsetzen,
wo eine Farbe stehen darf, auch mit CSS-Variablen.
| Ziel | Ausdruck |
|---|---|
| Dunklerer Hover-Ton | color-mix(in oklch, var(--primary) 85%, black) |
| Hellere Fläche | color-mix(in oklch, var(--primary) 15%, white) |
| Halbtransparent | color-mix(in srgb, var(--primary) 50%, transparent) |
Feste Farbskalen erzeugst du im OKLCH-Farbskala-Generator, Farbwerte rechnest du im Farbumrechner um.
Häufige Fragen
Welcher Farbraum ist der beste?
Für Übergänge zwischen kräftigen Farben liefert oklch die lebendigsten Ergebnisse, oklab die gleichmäßigsten. srgb entspricht dem klassischen Mischen und erzeugt zwischen Komplementärfarben oft graue, matte Mitten.
Wofür nutze ich color-mix() im Alltag?
Für Varianten einer Markenfarbe direkt im CSS, etwa Hover-Töne mit color-mix(in oklch, var(--primary) 85%, black) oder transparente Flächen mit color-mix(in srgb, var(--primary) 15%, transparent).
Was bedeutet die Farbton-Interpolation?
In polaren Räumen wie oklch oder hsl liegt der Farbton auf einem Kreis. shorter nimmt den kürzeren Weg, longer den längeren und erzeugt so regenbogenartige Zwischentöne; increasing und decreasing legen die Drehrichtung fest.
Wird color-mix() überall unterstützt?
Ja, alle aktuellen Browser unterstützen color-mix() seit 2023. Für sehr alte Browser kopierst du den berechneten HEX-Wert als Fallback davor.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.