Farbmischer

Mischen Sie zwei oder mehr Farben mit anpassbaren Gewichten. Sehen Sie die resultierende Farbe in HEX, RGB und HSL.

Mischergebnis

Wie Farbmischung funktioniert

Dieses Tool verwendet additive Farbmischung im RGB-Farbraum. Die RGB-Komponenten jeder Farbe werden gemäß ihren Gewichten gemittelt. Dies simuliert, wie sich Lichtfarben mischen (wie überlappende Scheinwerfer), im Gegensatz zur subtraktiven Mischung (wie das Mischen von Farbe).

Kann ich mehr als zwei Farben mischen?

Ja! Klicken Sie auf „+ Farbe hinzufügen", um bis zu 8 Farben hinzuzufügen. Verwenden Sie die Gewichts-Schieberegler, um zu steuern, wie viel jede Farbe zur Mischung beiträgt.

Funktionsweise

  1. Wählen Sie Ihre Farben: Verwenden Sie die Farbwähler, um jede Farbe auszuwählen. Klicken Sie auf „+ Farbe hinzufügen", um weitere Slots hinzuzufügen (bis zu 8).
  2. Setzen Sie das Gewicht jeder Farbe: Ziehen Sie den Schieberegler unter jeder Farbe, um zu steuern, wie viel sie zur endgültigen Mischung beiträgt.
  3. Vorschau des Ergebnisses: Die gemischte Farbe wird live mit ihren Hex-, RGB- und HSL-Werten angezeigt.
  4. Kopieren Sie die gemischte Farbe: Klicken Sie, um den resultierenden Hex- oder RGB-Wert zur Verwendung in Ihrem Design oder Code zu kopieren.

Warum den Farbmischer nutzen?

Das Mischen von Farben ist eine grundlegende Operation im Design, Tönungen erstellen (Mischen mit Weiß), Schattierungen (Mischen mit Schwarz), Töne (Mischen mit Grau) oder harmonische Mittelfarben zwischen zwei Markenfarben. Designer nutzen es, um Palettenvarianten zu erzeugen, Mitteltöne für Verlaufsstopps zu finden, barrierefreie Kontrastverhältnisse zwischen benachbarten Farben sicherzustellen und Hover-/Fokus-Zustände zu schaffen, die klar zu den Grundfarben passen.

Die drei Dinge, die Menschen mit "Farben mischen" meinen

Wenn ein Nicht-Spezialist sagt "zwei Farben mischen", meint er fast immer eine von drei vollkommen verschiedenen Operationen. Das falsche Modell zu wählen ist die größte Verwirrungsquelle in Farb-Tools.

Additive Mischung ist das, was passiert, wenn sich Strahlen farbigen Lichts überlagern. Zwei Taschenlampen, eine rote und eine grüne, auf denselben Fleck weißer Wand gerichtet, erzeugen einen gelben Fleck. Eine dritte, blaue Taschenlampe darüber erzeugt Weiß. Das Modell ist "mehr Licht = heller", und die drei Primärfarben sind Rot, Grün und Blau, weil menschliche Zapfen ihre Empfindlichkeitsmaxima ungefähr in diesen Bändern haben. Jeder Bildschirm, Telefon, Monitor, Fernseher, Projektor, nutzt additive Mischung. Jedes Pixel enthält drei Subpixel (R, G, B), und alle drei auf Maximum zu drehen ergibt Weiß. Deshalb ist das Default-Farbmodell des Webs RGB: das Medium ist emissiv, und die Mathematik passt zum Medium.

Subtraktive Mischung ist das, was passiert, wenn Farbmittel Wellenlängen aus weißem Licht herausfiltern. Eine Cyan-Tinte absorbiert rotes Licht und reflektiert Grün und Blau. Eine gelbe Tinte absorbiert Blau und reflektiert Rot und Grün. Lege Cyan über Gelb, und nur die grünen Wellenlängen überleben beide Filter. Das Modell ist "mehr Pigment = dunkler", und die drei subtraktiven Primärfarben sind Cyan, Magenta und Gelb. CMY mischt sich in der Theorie bei voller Stärke zu Schwarz, in der Praxis sind die Pigmente unvollkommen und das Ergebnis ist ein schlammiges Braun, also fügte der kommerzielle Druck für echte Schwarztöne eine separate schwarze Tinte hinzu (das K in CMYK). Ein Farbmischer, der auf einem Bildschirm läuft, kann keine echte subtraktive Mischung leisten, weil der Bildschirm selbst additiv ist; er kann das Erscheinungsbild nur simulieren.

Die traditionelle Künstler-Farbtheorie hat uns gelehrt, dass die Primärfarben Rot, Gelb und Blau sind. Die Maltradition, Goethes Farbenlehre von 1810 und Ittens Bauhaus-Lehrbuch Kunst der Farbe von 1961 kodifizierten RYB als Grundlage der Künstlerpaletten. RYB ist nicht physikalisch korrekt. Die echten subtraktiven Primärfarben, die den Farbumfang maximieren, sind CMY, nicht RYB. Aber RYB hat sich Jahrhunderte gehalten, weil echte Farben keine reinen subtraktiven Filter sind: eine Tube Kadmiumrot und eine Tube Ultramarin mischen sich zu einem erkennbaren Violett, und das System "funktioniert" an der Staffelei gut genug, um Generationen von Schülern zu unterrichten. Dieses Tool ist ein additiver RGB-Mischer, was das Web tatsächlich tut, also gibt "Rot plus Grün" Gelb, nicht das Braun, das ein Farb-Mischer produzieren würde.

Farbräume, sRGB, Display P3, Rec. 2020, Adobe RGB

Ein Farbmodell (RGB, CMYK, HSL) sagt dir, welche Dimensionen du hast. Ein Farbraum sagt dir genau, welchen physikalischen Farben jedes Zahlentriplet entspricht: er fixiert die Chromatizität der Primärfarben, den Weißpunkt und die Übertragungsfunktion. Zwei Displays, die beide "RGB" sprechen, können für denselben Code sichtbar unterschiedliche Rottöne produzieren, wenn sie unterschiedliche Farbräume anvisieren.

Perzeptuelle Farbräume, und warum Mischen in sRGB schlammige Mittelpunkte ergibt

Die sRGB- und HSL-Koordinaten, in denen die meisten Web-Tools Farbe speichern und manipulieren, sind nicht perzeptuell uniform. Ein Einheitsschritt im L-Kanal von HSL entspricht keinem Einheitsschritt darin, wie hell die Farbe aussieht. Das ist der tiefe Grund, warum das Mischen zweier Farben durch Mittelung ihrer Kanäle unintuitive Resultate liefert.

Das kanonische Beispiel: nimm reines Rot #ff0000 und reines Grün #00ff00. Mittele die RGB-Kanäle komponentenweise: Rot geht von 255 auf 127, Grün von 0 auf 127, Blau bleibt bei 0. Das Ergebnis ist #7f7f00, ein Oliv, das matt, dunkel und leicht schmuddelig aussieht. Es ist nichts wie das brillante Gelb #ffff00, das du bekämst, wenn du tatsächlich eine rote und eine grüne Taschenlampe auf denselben Wandfleck richtest. Zwei sich verstärkende Probleme erklären das.

Erstens, sRGB ist gammakodiert. Die Zahl 127 repräsentiert nicht halb so viel Licht wie 255. Die Übertragungsfunktion ist nichtlinear: 127 in sRGB entspricht ungefähr 21% der linearen Lichtintensität, nicht 50%. Wenn man also gammakodierte Werte mittelt, mittelt man etwas wie die Quadratwurzel der Intensität, nicht die Intensität selbst, und das Ergebnis fällt viel dunkler aus, als es sollte. Der Fix für dieses Problem allein ist, sRGB vor dem Mitteln in linear-RGB umzurechnen und zurück. Mit linear-RGB-Mittelung wird Rot plus Grün geteilt durch zwei zu einem viel helleren, glaubwürdigeren Gelbgrün.

Zweitens, selbst linear-RGB passt nicht zur Wahrnehmung. Gleiche Schritte in linear-RGB sind immer noch keine gleichen Schritte in wahrgenommener Helligkeit oder Chromatizität. Der Mittelpunkt von Rot und Blau in linear-RGB ist ein entsättigtes Lavendel, nicht das satte Lila, das ein Designer erwartet. Der Fix für dieses tiefere Problem ist, in einem perzeptuell uniformen Raum zu mischen, Lab, Oklab, OKLCH. Konvertiere beide Endpunkte nach Oklab, interpoliere linear die Kanäle L, a und b, konvertiere zurück nach sRGB. Der Mittelpunkt von Rot und Grün in Oklab ist ein lebhaftes, glaubhaftes Gelb. Der Mittelpunkt von Rot und Blau ist ein gesättigtes Magenta. Der Mittelpunkt von Gelb und Blau ist ein sauberes neutrales Grau statt des sumpfigen Grüns, das man mit naivem RGB erhält.

Dieses Tool mittelt derzeit in gammakodiertem sRGB, dem einfachsten Modell und dem, das jene schlammigen Mittelpunkte produziert. Es ist für diesen einfachen Fall korrekt, passt aber nicht zu dem, was physikalisches Licht oder menschliche Wahrnehmung tatsächlich tut. Wenn du Gradient-Stops oder Paletten-Mitteltöne wählst und die Schlamm-Grau-Falle vermeiden willst, nutze die neue CSS-Funktion color-mix() weiter unten oder eine der Farbmathematik-Bibliotheken.

CIE Lab, Oklab, OKLCH, der perzeptuelle Stack

CIE Lab (auch CIELAB) wurde 1976 von der Internationalen Beleuchtungskommission veröffentlicht. Drei Achsen: L* für Helligkeit von 0 (Schwarz) bis 100 (Weiß), a* für die Grün-Rot-Chromatik und b* für die Blau-Gelb-Chromatik. So gestaltet, dass gleiche Zahlenunterschiede etwa gleichen wahrgenommenen Unterschieden entsprechen. Ein halbes Jahrhundert lang war es der perzeptuelle Standardraum in Grafik, Sehforschung und Farbmanagement. Bekannte Schwächen: Blautöne werden bei Interpolation unnatürlich violett; die Helligkeitsachse folgt der Wahrnehmung bei stark gesättigten Farben nicht perfekt.

CIE LCH ist einfach CIE Lab in Polarkoordinaten: L für Helligkeit, C für Chroma (Abstand zur Neutralachse), H für Farbwinkel. Für Designer nützlicher als rohe a*/b*, weil Operationen wie "Hue um 30 Grad verschieben" oder "Chroma auf 0" direkt in natürliche mentale Modelle passen.

Oklab von Björn Ottosson wurde im Dezember 2020 in einem Aufsatz mit dem Titel "A perceptual color space for image processing" auf bottosson.github.io veröffentlicht. Ottosson ist ein schwedischer Ingenieur, der in der Games-Industrie an Farbe gearbeitet hat. Oklab behebt die meisten bekannten Mängel von CIE Lab, insbesondere die Blau-Lila-Verschiebung bei Interpolation und die Überschätzung von Chroma-Unterschieden bei gesättigten Farben. Das W3C übernahm Oklab innerhalb von rund einem Jahr nach Ottossons Blog-Post in CSS Color Module Level 4, eine außergewöhnlich schnelle Standardisierung für einen neuen Farbraum. Heute unterstützt jeder große Browser oklab() nativ.

OKLCH ist Oklab in Zylinderkoordinaten: L für Helligkeit von 0 bis 1, C für Chroma von 0 bis etwa 0,4, H für Farbwinkel von 0 bis 360 Grad. Es wird zum am häufigsten empfohlenen Farbraum für Design-System-Paletten, gerade weil Operationen auf seinen Achsen sauber zur Intuition des Designers passen und weil die Interpolation zwischen zwei OKLCH-Farben die geschmeidigsten, gefälligsten Gradienten erzeugt, die in CSS derzeit verfügbar sind.

Die CSS-Funktion color-mix(), perzeptuelle Mischung ohne JS

CSS Color Module Level 5 führte color-mix() ein, das zwei Farben, einen Interpolations-Farbraum und optionale Gewichte nimmt und das gemischte Ergebnis vollständig vom Browser berechnen lässt. Die Syntax ist color-mix(in oklch, red 50%, blue 50%). Du kannst den Raum tauschen (in srgb, in oklab, in lch, in hsl longer hue, etc.) und die Mathematik läuft in diesem Raum. Browser-Unterstützung kam Anfang 2023:

Ein JavaScript-freier, CSS-nativer Farbmischer ist nun seit über zwei Jahren breit verfügbar. Jedes Tool, das auf color-mix() aufbaut, erhält perzeptuell korrekte Ergebnisse "gratis", der Browser kümmert sich um den Konvertierungs-Stack. CSS Color Module Level 4 selbst erreichte 2022 den Status Candidate Recommendation und ist breit über die modernen Browser hinweg unterstützt.

JavaScript-Bibliotheken für Farbmathematik

Drei Bibliotheken dominieren, wenn man sich nicht auf color-mix() verlassen kann oder will:

Eine kurze Geschichte der Farbtheorie

Die westliche Farbtheorie beginnt mit Isaac Newton im Jahr 1665. Während er wegen der Pest fern von Cambridge in Quarantäne saß, ließ Newton Sonnenlicht durch ein Prisma fallen und identifizierte sieben verschiedene Farben (Rot, Orange, Gelb, Grün, Blau, Indigo, Violett). Anschließend ordnete er sie auf einem geschlossenen Kreis an, Newtons Farbkreis, und verband die spektralen Extreme (Violett und Rot) über ein nicht-spektrales Magenta. Der Kreis wurde 1704 in seinen Opticks veröffentlicht, aber 1665-1666 ausgearbeitet.

Johann Wolfgang von Goethe veröffentlichte Zur Farbenlehre im Jahr 1810. Wo Newton Physiker war, war Goethe ein Dichter, der die Psychologie der Farbe untersuchte: wie Farben sich anfühlten, kontrastierten und im Geist des Betrachters kombinierten. Sein Werk war wissenschaftlich an vielen Stellen falsch, führte aber Ideen über Komplementärfarben, Farb-Nachbilder und den affektiven Charakter warmer und kalter Paletten ein, die bis heute gelehrt werden.

Johannes Itten, ein Bauhaus-Meister, veröffentlichte Kunst der Farbe im Jahr 1961. Ittens zwölfspeichiger RYB-Farbkreis und seine sieben Farbkontraste (Hue, Hell-Dunkel, Kalt-Warm, Komplementär, Simultan, Sättigung, Quantität) wurden in der zweiten Hälfte des 20. Jahrhunderts zum dominierenden Lehrgerüst der Design-Ausbildung.

Pantone wurde von Lawrence Herbert gegründet, der 1956 als Angestellter bei Pantone Inc. einstieg und das Unternehmen 1962 kaufte. 1963 startete er das Pantone Matching System (PMS): eine standardisierte Bibliothek von Sonderfarbentinten, identifiziert durch Nummern, mit gedruckten Farbfächern, die es einem Designer in New York und einer Druckerei in Hongkong erlaubten, dieselbe Farbe ohne Mehrdeutigkeit zu spezifizieren und zu reproduzieren. Pantone ist im technischen CIE-Sinn kein Farbraum, es ist ein proprietärer Katalog physikalischer Tintenmischungen, aber sein Einfluss auf professionelle Farb-Workflows ist enorm.

HSL und HSV wurden von Alvy Ray Smith in seinem Artikel von 1978 "Color Gamut Transform Pairs" eingeführt, veröffentlicht in den SIGGRAPH-Proceedings, während er am Xerox PARC war (Smith war später Mitgründer von Pixar). Er suchte Farbkoordinaten, die natürlicher zur Künstler-Intuition passten als RGB. HSL wurde zum Default-"designerfreundlichen" Farbmodell im Web und bleibt die am breitesten anerkannte Nicht-RGB-Notation in CSS. Sie ist jedoch perzeptuell nicht uniform, OKLCH ist ihr moderner Nachfolger.

Kontrast und Barrierefreiheit, WCAG 1.4.3

Wenn ein Designer zwei Farben zu einer dritten mischt, einem Hover-Status, einem getönten Hintergrund, einem Gradient-Stop, muss die resultierende Farbe immer noch die Kontrast-Anforderungen gegenüber jedem darüber platzierten Text oder Icon erfüllen. Das WCAG-2.x-Erfolgskriterium 1.4.3 "Kontrast (Minimum)" verlangt:

Das Kontrastverhältnis wird mit der relativen Luminanz berechnet, der oben beschriebenen linear-RGB-Konvertierung und einer gewichteten Summe der linearisierten Kanäle (L = 0,2126·R + 0,7152·G + 0,0722·B). Das Verhältnis zwischen zwei Farben ist (L_heller + 0,05) / (L_dunkler + 0,05). Praktische Implikation: Zwischen-Stops in einem Gradienten können den Kontrast-Check an den Endpunkten bestehen, aber in der Mitte dramatisch versagen. Wenn eine Marke ein dunkles Marineblau mit einem hellen Gelb zu einem Hover-Olive mischt, kann dieses Olive sowohl gegen weißen als auch gegen schwarzen Text in der WCAG-Fehlzone liegen.

Weitere Fragen

Warum gibt Rot plus Grün kein Braun?

Weil dieses Tool, wie jeder Bildschirm, additive RGB-Mischung nutzt, und rotes Licht plus grünes Licht ergibt Gelb. Braun ist, was man beim Mischen roter und grüner Farbe bekommt, die subtraktiv ist: jedes Pigment absorbiert andere Wellenlängen, und die überlebenden Wellenlängen sehen bräunlich aus. Um "Farb-Mischung" auf einem Bildschirm präzise zu simulieren, bräuchte man ein spektrales oder pigment-bewusstes Modell (Procreate und Adobe Fresco machen das für Mal-Apps); generische Web-Farbmischer, einschließlich diesem, sind ehrliche additive RGB-Mischer und liefern dir Gelb, nicht Braun.

Meine Mittelpunkte sehen schlammig aus, was ist die Lösung?

Zwei Schichten Lösung. Der Mindeststandard ist Linear-Licht-Mischung: sRGB vor dem Mitteln in linear-RGB konvertieren und zurück. Allein das macht Rot+Grün→Gelb viel heller und glaubwürdiger. Der volle perzeptuelle Fix ist, in OKLCH oder Oklab zu mischen, beide Endpunkte nach OKLCH konvertieren, interpolieren, zurückkonvertieren. Das CSS-color-mix(in oklch, red, green) des Browsers macht genau das in einer Zeile und läuft in jedem Browser, der nach Mai 2023 ausgeliefert wurde. Für JavaScript-Pipelines ist culori.js die Referenzbibliothek.

Welches ist der richtige Farbraum, um Design-System-Paletten zu mischen?

OKLCH ist die derzeitige Konsens-Antwort. Es ist perzeptuell uniform, hat saubere Achsen, die zur Designer-Intuition passen (Helligkeit / Chroma / Hue), produziert Gradient-Interpolationen ohne schlammige Mittelpunkte und ist in jedem modernen Browser via oklch() in CSS Color 4 und color-mix(in oklch, ...) in CSS Color 5 verfügbar. Design Systems, die 2024-2026 gebaut werden, wechseln zunehmend von HSL-basierten Paletten zu OKLCH-basierten genau aus diesem Grund.

Wird meine gemischte Farbe die WCAG-Kontrast-Checks bestehen?

Dieses Tool gibt das Kontrastverhältnis des Ergebnisses derzeit nicht aus, aber du kannst es berechnen: WCAG-Luminanz ist L = 0,2126·R + 0,7152·G + 0,0722·B nach Linearisierung der sRGB-Kanäle, und das Kontrastverhältnis zwischen zwei Farben ist (L_heller + 0,05) / (L_dunkler + 0,05). Die Zielwerte sind 4,5:1 für Normaltext und 3:1 für Großtext oder UI-Komponenten. Der Color Contrast Checker im Bereich der zugehörigen Tools führt diese Berechnung direkt durch.

Verwandte Tools

Farbschattierungs-Generator

Tönungen und Schattierungen erzeugen.

Farbkonverter

Zwischen Farbformaten konvertieren.

Farbpaletten-Generator

Farbpaletten erzeugen.