Farbmischer
Mische zwei beliebige Farben per Schieberegler und erhalte den wahrnehmungsgerechten Zwischenwert – dazu eine Abstufungsleiste für Verläufe und Diagrammskalen. Gemischt wird in OKLab, damit die Mitte stimmig aussieht statt schlammig. Kostenlos und 100 % im Browser.
| Format | Wert | Kopieren |
|---|---|---|
| HEX | #8a939a | |
| RGB | rgb(138, 147, 154) | |
| HSL | hsl(205.5, 7.2%, 57.3%) | |
| OKLCH | oklch(65.87% 0.0144 239.58) |
Gleichmäßige Abstufungen von A nach B
Hilfe zum Farben-Anmischen – für Maler (Beta)
Gib die gewünschte Wandfarbe ein und erhalte ein ungefähres Mischrezept auf Basis eines üblichen Abtönfarben-Sets. Nur eine Bildschirmsimulation – teste immer eine echte Probe.
Teile pro 100 (nach Volumen, ungefähr)
Abweichung der Vorhersage: ΔE 0.4
Warum gemischte Farben meist falsch aussehen
Mittelt man zwei Farben in gewöhnlichem sRGB Kanal für Kanal, ist das Ergebnis fast immer dunkler und schmutziger als beide Ausgangsfarben – der berüchtigte RGB-Matsch. Schuld ist die Gamma-Kodierung: sRGB-Werte sind kein lineares Licht, ihr arithmetisches Mittel ist physikalisch bedeutungslos. Und selbst das Mischen in linearem Licht wirkt, obwohl photometrisch korrekt, für das Auge oft zu hell. Was Designer eigentlich wollen, ist der wahrnehmungsgerechte Zwischenwert – und genau den liefert das Mischen in OKLab: Der Mittelpunkt zwischen Blau und Gelb landet auf einem glaubwürdigen weichen Graugrün, genau dort, wo dein Auge ihn erwartet.
Licht, nicht Pigment
Echte Farbe funktioniert nach einem anderen Prinzip. Pigmente mischen sich subtraktiv – jedes verschluckt einen Teil des Spektrums –, und deshalb ergeben blaue und gelbe Farbe zusammen Grün, während blaues und gelbes Licht nahezu Weiß ergibt. Echte Pigmente zu simulieren erfordert Absorptionsmodelle und Daten zu jedem einzelnen Pigment; kein Werkzeug, das nur HEX rein und HEX raus kennt, schafft das seriös. Für Bildschirme, Marken und Oberflächen ist die wahrnehmungsgerechte Mischung das richtige Modell – und genau die rechnet diese Seite.
Wofür die Abstufungsleiste gut ist
- Verlaufs-Stopps: Browser interpolieren CSS-Verläufe standardmäßig in sRGB, wodurch der Verlauf zwischen kräftigen Farbtönen durch Grau absackt. Nimm hier 5–7 OKLab-Stufen ab und setze sie als explizite Stopps – so bleibt der Verlauf lebendig.
- Diagrammskalen: Eine gleichmäßige wahrnehmungsgerechte Reihe zwischen zwei Markenfarben ist eine fertige Palette für Heatmaps oder geordnete Datenreihen.
- Zustands-Abstufungen: Varianten für Hover, Aktiv und Gedrückt, die wirklich zwischen zwei Ankerfarben liegen, statt ad hoc abgedunkelt zu sein.
Kleine Hinweise zum Arbeitsablauf
Beide Eingabefelder verstehen alles, was auch CSS versteht – HEX, rgb(), hsl(), oklch(), sogar Farbnamen. Die Leiste des Schiebereglers zeigt die Mischung live, jede Stufe kopiert ihren HEX-Wert per Klick, und das Mischergebnis wandert direkt in „Meine Farben“ – dort kannst du es im Kontrast-Checker prüfen oder im Generator für Abdunkelungen und Aufhellungen weiterentwickeln. Wie bei jedem Werkzeug auf dieser Seite läuft das Mischen zu 100 % in deinem Browser, hochgeladen wird nichts.
Häufige Fragen
Wie werden die beiden Farben gemischt?
Durch lineare Interpolation in OKLab, einem wahrnehmungsgleichabständigen Farbraum. Das ergibt glaubwürdige Zwischenfarben – Blau und Gelb treffen sich in einem plausiblen Graugrün statt im dunklen Matsch, den naives Mitteln in RGB erzeugt.
Ist das dasselbe wie das Anmischen echter Farbe?
Nein. Das Anmischen echter Farbe ist subtraktiv und hängt vom Pigment ab – blaue und gelbe Farbe ergeben Grün, weil Pigmente Licht wegnehmen. Dieses Werkzeug mischt Farbe als Licht bzw. Wahrnehmung, und genau das brauchst du für Bildschirme und digitales Design.
Was bedeutet der Schieberegler für das Mischverhältnis?
Den Anteil der zweiten Farbe an der Mischung: 0 % ist reine erste Farbe, 100 % reine zweite, 50 % der wahrnehmungsgerechte Mittelpunkt.
Wozu dient die Abstufungsleiste?
Sie teilt die gesamte Mischung in gleichmäßige Stufen – fertige Verlaufs-Stopps, Farben für Diagrammreihen oder Heatmap-Skalen zwischen deinen beiden Endfarben. Ein Klick auf eine Stufe kopiert sie.
Verlässt irgendetwas meinen Browser?
Nein – das Mischen läuft komplett auf deinem Gerät, und einmal geladen funktioniert das Werkzeug auch offline.