Farbmischer

Was bedeutet Farbenmischen?

Zwei Farben zu mischen heißt, sie entlang einer geraden Linie in irgendeinem Farbraum zu mischen, sodass jeder Zwischenton zwischen ihnen entsteht. Die Wahl des Raums spielt eine Rolle: Mischung in rohem sRGB (den Werten in einem Hex-Code) wirkt intuitiv, erzeugt aber matte, graue Mittelpunkte – weil sRGB gamma-codiert ist, nicht linear. Mischung in linearem RGB – was dieses Tool standardmäßig macht – ergibt hellere, genauere Mittelpunkte, die der physikalischen Lichtaddition entsprechen. Der Unterschied ist am sichtbarsten, wenn du eine gesättigte Farbe mit Weiß oder mit einer anderen gesättigten Farbe mischst: lineare Mischung hält den Mittelpunkt lebhaft, während naive sRGB-Mischung ihn flach macht.

So nutzt du diesen Mixer

Wähle zwei Farben mit den Pickern (oder füge Hex-Codes ein), dann ziehe den Verhältnis-Schieberegler, um zu wählen, wie viel B in A gemischt wird. Der Ergebnisblock aktualisiert sich live und zeigt Hex-, RGB- und HSL-Werte. Aktiviere 11 Zwischenstopps zeigen, um einen elfteiligen Verlaufsstreifen zwischen den beiden zu rendern – praktisch, um interpolierte Farben für Diagrammachsen oder Animations-Frames auszuwählen. Klicke einen Stopp, um seinen Hex-Wert zu kopieren.

Wann was nutzen

Nutze diesen Mixer, um Markenfarben für Hover-/Aktiv-Zustände zu mischen, interpolierte Diagramm-Reihen an benutzerdefinierten Positionen abzuleiten, datengebundene Verläufe zu bauen (Heatmap von Kalt nach Warm) oder schnell zu prüfen, ob zwei Farben einen matschigen Mittelpunkt ergeben, bevor du dich auf einen Verlauf festlegst. Für UI-Zustände geben Zwischenstopps bei 25 %, 50 % und 75 % eine stimmige Rampe ohne visuelle Lücken. Für Datenvisualisierung entsprechen 11 Stopps einer typischen 0–100-Skala (alle 10 %) – ohne Zusatzrechnung.

So wird die Mischung berechnet

Jede Eingabefarbe wird in lineares sRGB gamma-decodiert: Werte unter 0,04045 werden durch 12,92 geteilt, der Rest läuft durch ((c + 0,055) / 1,055)2,4. Die beiden linearen Werte werden dann pro Kanal linear interpoliert: out = A·(1−t) + B·t, wobei t die Schiebereglerposition ist. Schließlich wird das Ergebnis zurück nach sRGB gamma-codiert und auf den 0–255-Byte-Bereich gemappt. Das ist dieselbe Pipeline, die moderne Bildbearbeitungs-Programme für genaues Verlaufs-Rendering nutzen.

Mischen in verschiedenen Farbräumen

Naives sRGB: schnell, intuitiv, erzeugt aber dunkle/matschige Mittelpunkte – für lebhafte Mischungen meiden. Lineares sRGB (was wir nutzen): physikalisch akkurate Lichtaddition; Mittelpunkte bleiben hell. HSL: gut für Farbton-Rampen, interpoliert aber schlecht durch Bereiche niedriger Sättigung. OKLCH: wahrnehmungsmäßig gleichförmig; der Goldstandard für Design-Tokens, aber komplexer zu berechnen. Für alltägliches Farbenmischen trifft lineares sRGB die richtige Balance zwischen Genauigkeit und Einfachheit.

Häufig gestellte Fragen