So nutzt du: Farbmischer
- Gib Farbe A und Farbe B ein oder wähle sie aus.
- Lege fest, wie viele Schritte du willst (inklusive beider Enden).
- Wähle einen Interpolationsraum — OKLab ergibt den weichsten und gleichmäßigsten Übergang.
- Klicke auf ein Farbfeld, um eine Farbe zu kopieren, oder kopiere alle Farben als CSS-Variablen,
color-mix()oder JSON.
Was macht ein Farbmischer?
Er berechnet gleichmäßig verteilte Farben zwischen zwei Endpunkten. Mit 5 Schritten zwischen Blau und Bernstein erhältst du Blau, drei Übergangsfarben und Bernstein — nützlich für Verläufe mit mehreren Stopps, Skalen in der Datenvisualisierung, Fortschrittsanzeigen, dezente Rahmen zwischen zwei Oberflächenfarben und thematische Hover-Zustände.
Warum der Interpolationsraum wichtig ist
| Raum | Ergebnis | Ideal für |
|---|---|---|
| OKLab | Wahrnehmbar gleichmäßige Schritte, keine trübe Mitte | Die meisten UI-Arbeiten, Verläufe, Diagrammskalen |
| OKLCH | Wandert über das Farbrad und hält Farben leuchtend | Regenbogenartige und markenbezogene Verläufe |
| sRGB | Der klassische Browser-Standard; Mittelwerte können grau oder dunkel werden | Bestehende ältere Designs nachbauen |
| Lineares sRGB | Physikalisch korrekte Lichtmischung, hellere Mittelwerte | Echte Lichtmischung simulieren |
| HSL | Farbtonbasiert, ungleichmäßig wahrgenommene Helligkeit | Schnelle Farbtonverläufe |
Werden Komplementärfarben wie Blau und Gelb in sRGB gemischt, entsteht in der Mitte ein stumpfes Grau; OKLab hält den Übergang sauber. Deshalb erlaubt modernes CSS, den Raum explizit zu wählen.
Farben mit nativem CSS mischen
Alle aktuellen Browser unterstützen color-mix() und Interpolationshinweise in Verläufen. Oft kannst du so auf fest codierte Werte komplett verzichten:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Generierte Schritte sind trotzdem praktisch für Design-Tools, E-Mail-Vorlagen, Diagramme in Canvas/SVG und überall dort, wo CSS-Funktionen nicht verfügbar sind. Um aus einer Farbe eine komplette Skala von Hell bis Dunkel zu bauen, nutze den Tailwind-Farbgenerator; für Verlaufscode mit mehreren Stopps eignet sich der CSS-Gradient-Generator.
Auch gesucht als: farben mischen, farbinterpolation, farbverlauf schritte, color-mix, zwei farben mischen, farbabstufung generator.
Passende Tools zu: Farbmischer
- OKLCH Farbkonverter — Erkunde den wahrnehmungsgleichmäßigen OKLCH-Farbraum mit Live-Reglern, prüfe, ob eine Farbe in sRGB passt, und kopiere passende HEX-, RGB- und HSL-Fallbacks.
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- Farbname-Finder — Füge einen HEX-Code ein, um den nächstliegenden, gut lesbaren Farbnamen und passende Token-Namen für dein CSS, SCSS, JavaScript oder deine Tailwind-Konfiguration zu erhalten.
- HEX zu RGBA Konverter — Füge einen HEX-Code ein, zieh den Deckkraft-Regler und kopiere das genaue CSS, das du brauchst: klassisches rgba(), modernes rgb( / alpha) oder 8-stelliges HEX.
Häufige Fragen
Welchen Interpolationsraum sollte ich verwenden?
Sind die Endfarben in der Schrittanzahl enthalten?
Was ist color-mix() in CSS?
color-mix(in oklab, red, blue 30%) mischt zwei Farben direkt im Browser. Es wird in allen aktuellen Browsern unterstützt und funktioniert mit CSS-Variablen, sodass sich Mischungen automatisch an dein Theme anpassen.