Zwei Farben zu einer dritten zu mischen klingt nach Kunstunterricht mit Wasserfarben. Am Bildschirm funktioniert es jedoch anders – und vor allem berechenbar. Wer Farbverläufe baut, Zwischentöne für ein Farbsystem braucht oder eine Marke harmonisch erweitern will, kommt an der digitalen Farbmischung nicht vorbei. Dieser Ratgeber erklärt, wie das am Monitor funktioniert.
Additiv statt subtraktiv
Im Malkasten mischst du subtraktiv: Jede Farbe schluckt einen Teil des Lichts, und je mehr du mischst, desto dunkler wird es – am Ende Braun oder Schwarz. Am Bildschirm gilt das Gegenteil. Hier mischst du additiv aus den drei Lichtfarben Rot, Grün und Blau (RGB). Alle drei zusammen ergeben Weiß, keine davon ergibt Schwarz.
Jeder dieser drei Kanäle hat einen Wert von 0 bis 255. Die Farbe #FF0000 ist reines Rot (R=255, G=0, B=0), #FFFFFF ist Weiß (alle 255). Das Mischen zweier Bildschirmfarben heißt also: die Rot-, Grün- und Blauwerte beider Farben miteinander verrechnen.
Was ein Mischverhältnis bewirkt
Spannend wird es, wenn du nicht einfach 50:50 mischst, sondern ein Mischverhältnis einstellst. Möchtest du eine Farbe zu 70 % und eine andere zu 30 % einfließen lassen, berechnest du für jeden Kanal einen gewichteten Mittelwert. Für den Rotkanal etwa: 0,7 × Rotwert-A + 0,3 × Rotwert-B. Dasselbe für Grün und Blau – und schon hast du den Zwischenton.
Genau das nimmt dir der Color Mix Rechner ab: Du gibst zwei Hex-Farben und ein Verhältnis ein und bekommst die gemischte Farbe als Hex-Wert mit Vorschau. So findest du in Sekunden den perfekten Übergangston, ohne im Kopf mit 255er-Werten zu jonglieren.
Wofür du Mischfarben brauchst
- Farbverläufe: Der Mittelpunkt eines CSS-Gradienten ist nichts anderes als die 50:50-Mischung der beiden Endfarben.
- Hover- und Aktiv-Zustände: Eine Buttonfarbe leicht mit Schwarz oder Weiß mischen, um eine subtil dunklere oder hellere Variante zu erhalten.
- Farbsysteme: Zwischenstufen zwischen zwei Markenfarben erzeugen, die zueinander passen.
- Abgetönte Hintergründe: Eine kräftige Akzentfarbe mit viel Weiß mischen, um einen dezenten Flächenton zu bekommen.
Lineare Mischung und ihre Grenzen
Die einfache, kanalweise lineare Mischung im sRGB-Raum liefert für die meisten Design-Aufgaben gute Ergebnisse. Es gibt aber einen Feinheits-Hinweis: Bei sehr gesättigten, gegensätzlichen Farben kann eine lineare RGB-Mischung in der Mitte etwas matschig oder gräulich wirken. Profis wechseln dann in Farbräume wie OKLCH, die wahrnehmungsgleichmäßiger mischen. Für den Alltag und harmonische Zwischentöne reicht die RGB-Mischung jedoch völlig aus.
Vom Mischton zur Abstufung
Sobald du einen schönen Mischton gefunden hast, willst du oft gleich eine ganze Reihe heller und dunkler Varianten daraus. Dafür mischst du deine Farbe schrittweise mit Weiß beziehungsweise Schwarz – oder du nutzt direkt den Color Shades Generator, der dir aus einer Basisfarbe automatisch eine Palette an Abstufungen erzeugt. So entsteht aus einer einzigen gemischten Farbe ein komplettes, konsistentes Farbset.
Weitere Helfer rund um Farbe, Layout und Code findest du in der Webtools-Übersicht. Mit dem Color Mix Rechner mischst du beliebige zwei Farben in jedem gewünschten Verhältnis und siehst das Ergebnis sofort.