Was ist CSS-Color-Mix-Generator?
Die CSS-Funktion color-mix() mischt zwei Farben in einem bestimmten Farbraum. Damit lassen sich Farbvariationen direkt in CSS ohne einen Präprozessor wie Sass erstellen. Die Verwendung von oklab erzeugt perceptuell gleichmäßigere Ergebnisse als srgb. Typische Anwendungen sind Hover-Zustände, Rahmen, subtile Hintergründe und gedeckte Textfarben.
Kurze Antwort
Verwenden Sie color-mix(), um zwei Farben in einem bestimmten Farbraum wie oklab oder srgb zu mischen. Es ist nützlich für Abstufungen, Schattierungen und Hover-Varianten aus einer Basisfarbe ohne Präprozessor.
Last updated: 2026-05-25
Einschränkungen
- color-mix() erfordert Chrome 111+, Edge 111+, Safari 16.2+ und Firefox 113+. Ältere Browser ignorieren die Deklaration.
- Der oklab-Farbraum erzeugt perceptuell gleichmäßigere Ergebnisse als srgb. Mischen in srgb kann matschige Zwischenwerte erzeugen.
- color-mix() kann in einigen älteren Browserversionen aufgrund von Property-Zyklus-Erkennung keine CSS-Custom-Properties referenzieren, die color-mix()-Ausgabe enthalten.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Geben Sie eine Basis-Farbe als Hex-Wert ein.
- Prüfen Sie die berechneten color-mix()-Varianten mit Weiß, Schwarz oder Transparent.
- Kopieren Sie jede color-mix()-Deklaration in Ihr CSS.
- Verwenden Sie die generierten Custom Properties für konsistentes Farb-Theming.
Wofür du es nutzen kannst
- Erstellen Sie Hover-Zustände durch Mischen einer Farbe mit Weiß oder Schwarz.
- Generieren Sie subtile Hintergrundtöne aus einer Markenfarbe.
- Bauen Sie Rahmenfarben, die etwas dunkler als der Hintergrund sind.