2 FARBEN · 3 FARBRÄUME · 7 STUFEN · LOKAL
Mische zwei HEX-Farben mit einem exakten Verhältnis von 0 bis 100, vergleiche drei Interpolationsfarbräume, prüfe die Ergebniswerte und kopiere eine direkt nutzbare CSS-color-mix()-Deklaration. Dieser Farbmischer rechnet vollständig im Browser und zeigt alle Zwischenfarben, bevor du sie in einer Palette, Oberfläche, Illustration oder Cartoon-Farbstudie einsetzt.
Aktualisiert am 11. August 2026
Farbmischer
Dieser Farbmischer berechnet eine mathematische Interpolation zwischen zwei deckenden sRGB-Endfarben. Bestimme den Anteil beider Endpunkte und wähle sRGB für vertrautes Web-Mischen, lineares sRGB für lichtintensitätsbezogenes Mischen oder OKLCH für einen wahrnehmungsbezogen geordneten Weg. Das Ergebnis ändert sich, weil die drei Farbräume unterschiedliche Koordinaten interpolieren.
Beim voreingestellten Verhältnis 50/50 ergeben #FF5A5F und #2F80ED in sRGB #976DA6, in linearem sRGB #BE6FB8 und in OKLCH #C060D6. Alle drei Antworten sind für ihre Methode gültig. Der Farbmischer erstellt zusätzlich sieben gleichmäßig positionierte Felder und wandelt den gewählten Punkt in HEX, RGB und HSB um.
Farbmischer
Eine einzelne Mittelfarbe verdeckt leicht die wichtigste Entscheidung: das Koordinatensystem für den Weg zwischen den Endpunkten. Der Vergleich hilft, eine zum visuellen Zweck passende Mischung zu wählen, statt einen unerklärten Standard zu übernehmen.
Farbmischer
Der Farbmischer nennt den Interpolationsraum direkt am Ergebnis. Du wechselst die Methode, ohne Endpunkte oder Verhältnis zu verändern; sichtbare Unterschiede stammen daher aus dem Rechenweg. Diese kontrollierte Gegenüberstellung lässt sich in Designkritik und technischer Übergabe verständlich begründen.
Farbmischer
Jede Mischung steht als HEX in Großbuchstaben, modernes RGB, gerundetes HSB und CSS-color-mix() bereit. Der Farbmischer zeigt außerdem eine Sieben-Stufen-Rampe für Zustände, Diagramme, Illustrationsübergänge und Palettenideen, ohne dass Zwischenanteile von Hand berechnet werden müssen.
Farbmischer
Endpunkte, Verhältnis, Ergebnisse und kopierte Werte bleiben in der aktuellen Browser-Sitzung. Der Farbmischer lädt keine Datei hoch und verlangt kein Konto. So kannst du unveröffentlichte Markenfarben, Kundenpaletten oder frühe Farbideen für Figuren testen, ohne sie an einen Dienst zu senden.
Farbmischer
Lege zwei HEX-Endpunkte und das Verhältnis fest und vergleiche dieselbe Mischung in drei Farbräumen.
Farbmischer
CSS COLOR 5
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)Nutze das berechnete HEX als Fallback, wenn deine Browser-Richtlinie es verlangt.
Farbmischer
Wähle ein Farbfeld, um seinen HEX-Wert zu kopieren.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80EDPrivat konzipiert: Alle Farben werden nur in diesem Browser gemischt.
Farbmischer
Behandle die Ausgabe als reproduzierbare Designentscheidung: zuerst Endpunkte festlegen, dann Farbräume vergleichen und schließlich das Resultat im echten Kontext statt auf einem isolierten Farbfeld prüfen.
Farbmischer
Füge für beide Endpunkte einen drei- oder sechsstelligen HEX-Wert ein oder nutze die nativen Farbfelder. Gib ihnen semantische Rollen wie Fläche und Akzent, statt sie nur links und rechts zu nennen. Stabile Rollen machen spätere Verhältnisänderungen leichter besprechbar und dokumentierbar.
Farbmischer
Beginne bei 50/50, schalte zwischen sRGB, linearem sRGB und OKLCH um und bewege das Verhältnis anschließend in Ein-Punkt-Schritten. Beobachte Helligkeit, Chroma und Farbton getrennt. Der Farbmischer hält beide Endpunkte fest, damit der Vergleich kontrolliert bleibt.
Farbmischer
Kopiere den Wert in die echte Komponente, Illustration oder Grafik. Prüfe vor der Veröffentlichung Kontrast, Nachbarfarben, helle und dunkle Themes sowie unterstützte Browser. Eine attraktive Mittelfarbe ist nicht automatisch eine zugängliche Textfarbe oder ein belastbarer Produktionstoken.
Farbmischer
Gleiche Endpunkte und Prozentwerte können sichtbar andere Mittelfarben erzeugen. Die Tabelle zeigt, was jede Methode interpoliert, wofür sie geeignet ist und was vor der Nutzung geprüft werden sollte.
| Methode | Interpoliert | Geeignet für | Vor Nutzung prüfen |
|---|---|---|---|
| sRGB | Gammacodierte Rot-, Grün- und Blaukanäle | Historisches Webverhalten und vertraute Schnellmischungen | Mitteltöne können zu dunkel oder grau wirken |
| Lineares sRGB | Zur Lichtintensität lineare Rot-, Grün- und Blauwerte | Lichtähnliche Komposition und energiebezogene Übergänge | Das Ergebnis kann heller als eine übliche UI-Mischung erscheinen |
| OKLCH | Wahrnehmungshelligkeit, Chroma und kürzester Farbtonweg | Gleichmäßige Rampen und chromabewusste Paletten | Stark gesättigte Farben können bei sRGB-Ausgabe beschnitten werden |
Farbmischer
Farbmischer
Das Verhältnis wirkt wie der einfachste Teil des Farbmischers, sollte aber genau gelesen werden. Bei 0% erscheint der erste Endpunkt, bei 100% der zweite und bei 50% tragen beide gleich viel bei. Ein Wechsel von 50% zu 60% bedeutet nicht 60% mehr Helligkeit oder Sättigung. Er bedeutet, dass der zweite Endpunkt 60% zu den interpolierten Koordinaten des gewählten Farbraums beiträgt.
Farbmischer
Arbeite in kleinen Schritten, wenn die Mischung ihrer vorgesehenen Rolle schon nahekommt. Zwei oder drei Punkte können einen Hover-Zustand vom Normalzustand trennen, während zehn Punkte in der Sieben-Stufen-Rampe deutlicher auffallen. Der Farbmischer zeigt beide Gewichte gleichzeitig und hält ihre Summe bei 100%. Dadurch bleibt die Formel in einem Review oder Tokendokument eindeutig.
Farbmischer
Bei asymmetrischem Verhältnis sind Endpunkte nicht austauschbar. 20% Blau in Koralle beschreibt eine andere Position als 20% Koralle in Blau. Die Tauschfunktion dreht deshalb die Farben um und ergänzt zugleich den Prozentwert, sodass die sichtbare Mischung gleich bleibt. Eine freigegebene Farbe kann so ohne stille Änderung in die Variablenreihenfolge des Projekts gebracht werden.
Farbmischer
Farbmischer
Vertraute HEX- und rgb()-Werte sind codierte sRGB-Werte. Ihre Zahlenkanäle wurden für Anzeige und Kompatibilität entworfen, nicht als gleiche Schritte ausgestrahlten Lichts. Mittelt ein Farbmischer diese codierten Kanäle direkt, wirkt die Mitte oft dunkler als nach einer Umwandlung in lineares Licht. Keine Antwort ist ein Eingabefehler; beide definieren den Weg zwischen den Endfarben unterschiedlich.
Farbmischer
Lineares sRGB entfernt zunächst die sRGB-Übertragungskurve, interpoliert Werte proportional zur Lichtintensität und codiert das Ergebnis anschließend wieder für die Anzeige. Das passt zu farbigem Licht oder energiebezogener Komposition. Bei den voreingestellten Endfarben ergibt 50% den Wert #BE6FB8, sichtbar heller als #976DA6 in sRGB. Der Unterschied kann Kontrast und Hierarchie einer Palette verändern.
Farbmischer
Wähle sRGB, wenn die Übereinstimmung mit einer historischen Mischung oder einem gammacodierten Ablauf entscheidend ist. Wähle lineares sRGB, wenn Lichtverhalten zählt. Keine Methode ist universell richtig. Dokumentiere den Farbraum mit dem Wert, denn ein einzelner HEX-Code zeigt seinen Ursprung nicht und ein anderer Farbmischer kann einen anderen Standard verwenden.
Farbmischer
Bevor eine erzeugte Mischung zum Produktionswert wird, prüfe Eingaben, Methode, Ausgabebedingungen und semantische Rolle. So bleibt aus einem attraktiven Experiment kein unerklärter Token zurück.
Farbmischer
Dieser Farbmischer interpoliert Bildschirmkoordinaten. Reale Pigmente reagieren durch Absorption, Streuung, Deckkraft, Bindemittel, Konzentration und Untergrund; zwei Anstriche können daher ein Ergebnis liefern, das kein RGB- oder OKLCH-Mittelpunkt vorhersagt. Nutze Aufstriche oder Herstellerdaten für materielle Farbentscheidungen.
Farbmischer
Methoden und Begriffe dieser Seite folgen dem veröffentlichten Interpolationsmodell der Webplattform. Die Zahlenbeispiele lassen sich mit den sichtbaren Endpunkten reproduzieren und machen die Methodenwahl prüfbar.
CSS Color Module Level 4 erklärt:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
Farbmischer
Farbmischer
Farbmischer
Es gibt keinen universell besten. Nutze sRGB für vertrautes historisches Webverhalten, lineares sRGB für Lichtintensität und OKLCH für wahrnehmungsbezogene Gleichmäßigkeit oder Chroma. Vergleiche alle drei mit denselben Endpunkten, bevor du dich entscheidest.
Farbmischer
Jeder Modus mittelt andere Koordinaten. Gammacodierte sRGB-Kanäle, lineare Lichtkanäle und OKLCH-Helligkeit, -Chroma und -Farbton beschreiben nicht denselben Weg. Deshalb können gleiche Endpunktgewichte sichtbar andere Mittelfarben ergeben.
Farbmischer
Ja. Gib drei- oder sechsstellige HEX-Werte ein. Dieser Farbmischer rechnet im Browser, speichert keine Palette auf einem Server und benötigt weder einen Bild-Upload noch ein Konto.
Farbmischer
Er nennt einem unterstützenden Browser den Interpolationsraum, beide Endfarben und ihre Prozentanteile. Verwende den Wert in einer CSS-Farbeigenschaft und ergänze bei Bedarf einen getesteten statischen Fallback davor.
Farbmischer
Nutze sie als Ausgangspunkt. Weise jeder behaltenen Stufe eine echte Rolle zu, prüfe Kontrast und Nachbarzustände und entferne ungenutzte Werte. Gleichmäßiger Abstand in einem Farbmodell erzeugt nicht automatisch zugängliche oder pflegbare Tokens.
Farbmischer
Nein. Er interpoliert digitale Koordinaten und modelliert keine Pigmentchemie, spektrale Reflexion, Deckkraft oder Untergründe. Mische und prüfe reale Materialien, wenn das Endprodukt Farbe, Tinte, Farbstoff oder ein anderes Material ist.