Was ist CSS-Color-Mix-Generator?
CSS-Color-Mix-Generator ist ein Browser-Tool für diese Aufgabe: Generiere CSS color-mix()-Aufrufe für Hover, Rahmen, Hintergrunde und zuruckhaltenden Text. Die Ausgabe bleibt lesbar, damit du sie vor dem Einbau in eine Live-Seite prüfen kannst.
Quick answer
Use color-mix() to blend two colors in a specified color space, such as oklab or srgb. It is useful for creating tint, shade, and hover variants from a single base color without a preprocessor.
Limitations
- color-mix() requires Chrome 111+, Edge 111+, Safari 16.2+, and Firefox 113+. Older browsers do not support it and will ignore the declaration.
- The oklab color space produces more perceptually uniform results than srgb. Mixing in srgb can create muddy intermediates.
- color-mix() may not reference CSS custom properties that contain color-mix() output in some older browser versions due to property cycle detection.
So nutzt du dieses Tool
- Öffne das Tool und trage die relevanten Werte ein.
- Prüfe die erzeugte Ausgabe im Ergebnisfeld.
- Kopiere nur den Teil, der zu deiner Seite passt.
- Teste die Änderung im Browser, bevor du sie veröffentlichst.
Wofür du es nutzen kannst
- Wiederkehrende Publishing-Aufgaben schneller erledigen.
- Markup, CSS oder Checklisten vor einem Launch vorbereiten.
- Kleine Fehler vermeiden, die bei statischen Websites leicht übersehen werden.