Zum Inhalt springen

Farbmischer: zwei Farben mischen und das Ergebnis sehen

Wähle zwei Farben, passe das Verhältnis an und erhalte sofort den resultierenden Farbton in HEX, RGB und OKLCH, mit Zwischenskala und CSS-Code zum Kopieren.

Ergebnis#598FE550%50%

Farben

Anteil von Farbe B

50%
A 50% · B 50%

Mischraum

Zwischenschritte
10
Paletten-Balance
background: color-mix(in srgb, #2C71DE 50%, #85ADEC);
/* = #598FE5 */

Farbumwandlung

Beliebte Mischungen

Welche Farbe ergibt sich aus Rot und Blau? Lade ein klassisches Paar und passe es nach Wunsch an.

Wofür das Mischen zweier Farben gut ist

Der Farbmischer kombiniert zwei Farben im gewünschten Verhältnis und berechnet den exakten resultierenden Farbton. Das ist etwas anderes, als Harmonien von einer einzigen Grundfarbe aus zu erkunden – das macht der Farbkreis: Hier gehst du von zwei festgelegten Farben aus und suchst den Punkt dazwischen.

Besonders nützlich ist das, um einen Übergangston zwischen zwei Markenfarben zu finden, eine Skala von Zwischentönen für Oberflächenzustände (Hover, Hintergründe, Rahmen) aufzubauen oder das CSS der Mischung zu erzeugen, ohne Prozente von Hand zu rechnen: Das Werkzeug liefert dir sowohl das native color-mix() als auch den Verlauf linear-gradient().

Zwei Farben in drei Schritten mischen

  1. Die zwei Farben wählen

    Klicke auf Farbe A oder Farbe B und passe sie über Farbton, Helligkeit, Pipette oder Eingabe des Codes an. Der Tauschen-Button kehrt die Reihenfolge um.

  2. Verhältnis einstellen

    Ziehe den Regler oder nutze die Schnellwahl 25, 50 und 75 %. Bei 0 % erhältst du reine Farbe A, bei 100 % Farbe B.

  3. Ergebnis kopieren

    Kopiere die Farbe mit einem Klick in HEX oder den color-mix()-Code, den Verlauf oder die Tailwind-Klassen. Darunter findest du dieselbe Farbe in RGB, HSL, CMYK, LAB und weiteren Formaten.

Warum ergeben Blau und Gelb am Bildschirm kein Grün?

In der Schule haben wir gelernt, dass Blau und Gelb Grün ergeben. Bei Malfarbe stimmt das: Pigmente absorbieren Licht, und wenn man sie kombiniert, wird nur reflektiert, was keines der beiden absorbiert – hier Grün. Das ist eine subtraktive Mischung.

Ein Bildschirm mischt keine Pigmente, sondern Licht. Mittelt man die RGB-Kanäle von Blau und Gelb, gleichen sie sich aus und das Ergebnis ist Grau. Willst du das Verhalten von Malfarbe, füge selbst Grün als Zwischenfarbe hinzu oder vergleiche das Ergebnis im wahrnehmungsbasierten Modus (OKLab), der die Helligkeit besser erhält.

RGB oder wahrnehmungsbasiert: welcher Mischraum

Dasselbe Farbpaar kann je nach Farbraum, in dem gerechnet wird, unterschiedliche Mischungen ergeben. Das Werkzeug lässt dich zwischen den zwei gebräuchlichsten wählen – denselben, die auch die CSS-Funktion color-mix() akzeptiert.

50 % = #800080

RGB (sRGB)

Mittelt die Kanäle Rot, Grün und Blau. Die klassische Berechnung, die die meisten Editoren nutzen. Zwischen gesättigten Gegenfarben fällt die Mitte oft dunkler und trüber aus.

50 % = #8C53A2

Wahrnehmungsbasiert (OKLab)

Interpoliert in einem Farbraum, der danach gestaltet ist, wie wir Farbe wahrnehmen. Die Schritte verlaufen gleichmäßiger und die Mitteltöne bleiben heller. Die empfohlene Option für Skalen und Verläufe in Oberflächen.

Der Unterschied zwischen Mischen und Harmonien erzeugen

Zwei Farben mischen

Interpoliert direkt zwischen zwei konkreten Farben, die du wählst. Das Ergebnis hängt von den Ausgangsfarben und dem Verhältnis ab: ideal, wenn du schon zwei feste Farben hast und den Punkt dazwischen brauchst.

Harmonien erzeugen

Wird mathematisch aus der Position einer einzigen Farbe im Farbkreis berechnet (analog, komplementär, triadisch …). Dient dazu, eine komplette Palette aufzubauen, nicht einen Zwischenton zwischen zwei gegebenen Farben.

Häufige Fragen

Jede Komponente der Farbe wird gemäß dem gewählten Verhältnis interpoliert. Im RGB-Modus werden die Kanäle Rot, Grün und Blau gemittelt; im wahrnehmungsbasierten Modus (OKLab) werden die Helligkeit und die beiden Farbachsen von OKLab interpoliert, was gleichmäßigere Übergänge ergibt.

Mit Malfarbe Grün. Am Bildschirm, in RGB zu 50 % gemischt, ein neutrales Grau (#808080 bei reinem Blau und Gelb), weil sich Licht additiv mischt und die Kanäle sich ausgleichen. Brauchst du ein Grün, füge es als Zwischenfarbe hinzu.

Ein Violett. Mit reinem Rot und Blau zu 50 % in RGB erhältst du #800080; im wahrnehmungsbasierten Modus fällt das Violett heller aus. Je mehr Gewicht du Blau gibst, desto kühler wird das Ergebnis.

Eine native CSS-Funktion, die zwei Farben direkt im Browser mischt, zum Beispiel color-mix(in srgb, #E53935 50%, #1E88E5). Sie funktioniert in allen modernen Browsern. Das Werkzeug erzeugt diesen Code und zusätzlich die entsprechende HEX-Farbe, falls du einen festen Wert brauchst.

Ja. Der Tab Verlauf erzeugt einen linear-gradient() zwischen Farbe A, der Mischung und Farbe B. Brauchst du mehr Stopps oder radiale und konische Verläufe, nutze den Verlaufsgenerator.

Der Farbkreis berechnet verwandte Farben ausgehend von einer einzigen Grundfarbe nach den Regeln der Farbenlehre. Der Farbmischer kombiniert zwei konkrete Farben, die du wählst, und berechnet den Punkt dazwischen, keine komplette Palette.

Die Schritte legen fest, wie viele Töne die Skala zwischen A und B hat, von 3 bis 12. Die Balance verschiebt diese Töne zu einer der beiden Farben – nützlich, wenn du mehr Nuancen nahe Farbe A oder Farbe B willst. Klicke auf einen Ton der Skala, um ihn zu kopieren.

Ja. Unter dem Werkzeug findest du die Mischfarbe in RGB, HSL, HSB, CMYK, LAB, LCH und weiteren Formaten, und der Button Farben exportieren lädt die komplette Skala für Tailwind, Figma oder CSS herunter.

Weitere Tools