Farben mischen

Mit diesem Tool können Sie Farben mischen und die Mischfarbe sofort als HEX, RGB und HSL ablesen. Dazu lassen sich Farben aufhellen, abdunkeln oder abtönen und ein Farbverlauf in bis zu 15 Stufen erzeugen.

Quelle: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Stand: 1. Oktober 2026.

Was soll passieren?

Farbe 1

HEX wie #E63946 oder rgb(230, 57, 70) oder hsl(...)

Farbe 2

HEX, rgb() oder hsl()

Anteil der zweiten Farbe

0 % = nur Farbe 1, 100 % = nur Farbe 2; beim Aufhellen: Anteil Weiß

Mischraum

Stufen im Verlauf

von 2 bis 15 Farben von Farbe 1 bis zur Zielfarbe

Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Ergebnis

Mischfarbe (HEX): #965A72
RGB: rgb(150, 90, 114)
HSL: hsl(336, 25%, 47%)
CSS (color-mix): color-mix(in srgb, #E63946 50%, #457B9D 50%)
Verlauf in Stufen: #E63946
#BE4A5C
#965A72
#6D6B87
#457B9D

So wird gerechnet

Das Tool mischt Bildschirmfarben, also Lichtwerte – nicht Malfarben aus Pigmenten. Rot und Blau ergeben deshalb Violett (#800080), Blau und Gelb dagegen ein neutrales Grau und nicht Grün wie beim Malen mit Wasserfarben.

So wird gemischt

Für jeden Farbkanal wird ein Zwischenwert berechnet. Wie genau, bestimmt der Mischraum:

sRGB: der einfache Mittelwert der Kanalwerte – so mischt auch CSS standardmäßig und so rechnen die meisten Grafikprogramme.
Lineares Licht: mischt in physikalischen Lichtmengen. Das Ergebnis ist heller und entspricht dem, was zwei überlagerte Lichtquellen tatsächlich ergeben.
Oklab: ein wahrnehmungsnaher Farbraum. Verläufe wirken gleichmäßiger, ohne graue Mitte zwischen kräftigen Farben.

Aufhellen, abdunkeln, abtönen

Wer eine Farbe mit Weiß mischt, hellt sie auf (Tint); mit Schwarz wird sie dunkler (Shade), mit Grau gedämpfter (Tone). Mit dem Prozentwert steuern Sie die Stärke, mit den Stufen erhalten Sie eine ganze Reihe – etwa für Hover-Zustände oder Farbskalen.

Der Ausdruck color-mix() lässt sich direkt ins Stylesheet kopieren. Passende Paletten erzeugt die Farbpalette, Formate wandelt der Farbumrechner um, und ob der Text lesbar bleibt, prüft der Kontrastprüfer.

Häufige Fragen

Was ergibt Blau und Gelb gemischt?

Am Bildschirm ein neutrales Grau (sRGB-Mittel #808080), weil Lichtfarben gemischt werden. Beim Malen mit Wasser- oder Acrylfarben ergibt Blau mit Gelb Grün, denn Pigmente wirken subtraktiv.

Wie mische ich zwei Farben zu gleichen Teilen?

Beide Farben eingeben und den Anteil der zweiten Farbe auf 50 % lassen. Für ein Drittel Farbe 2 tragen Sie 33 ein.

Wie kann ich eine Farbe aufhellen oder abdunkeln?

Oben „Farbe aufhellen“ oder „abdunkeln“ wählen und den Prozentwert anpassen: Bei 20 % Weiß wird die Farbe leicht heller, bei 80 % fast weiß.

Welchen Mischraum soll ich wählen?

sRGB entspricht dem Standardverhalten von CSS und den meisten Programmen. Oklab liefert gleichmäßigere Verläufe, lineares Licht entspricht überlagerten Lichtquellen.

Wie übernehme ich das Ergebnis in CSS?

Der Wert unter „CSS (color-mix)“ lässt sich kopieren und in jedem modernen Browser als Farbe verwenden; oder Sie nehmen den HEX-Wert.

Quellen und Rechtsgrundlagen

CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
Björn Ottosson – A perceptual color space for image processing (Oklab)
CSS Color 4: W3C – CSS Color Module Level 4: sRGB-Übertragungsfunktion und lineares Licht

Stand: 1. Oktober 2026 · So prüfen wir

Mischfarbe