Farbmischrechner

Die beiden Eingabefarben stehen an den Enden der Palette. Für jede Zwischenposition berechnet der Rechner t = i / (Schritte + 1) und mischt die einzelnen RGB-Kanäle. Der Modus „Lineares RGB“ arbeitet mit den codierten 8-Bit-Kanälen und ist keine Mischung im linearen Licht. Bei fünf Schritten erhältst du sieben Farben, weil beide Endpunkte enthalten sind.

Die Mitte zwischen reinem Rot (#ff0000) und reinem Blau (#0000ff) ist bei t = 0,5 das tiefe Violett #800080. Rot und Blau werden jeweils auf 128 beziehungsweise 0x80 gemittelt, während Grün 0 bleibt. Ein CSS-Verlauf kann einen anderen Farbraum verwenden. Prüfe die Darstellung deshalb im Zielbrowser.

Verwende RGB, wenn jeder Farbkanal unabhängig interpoliert werden soll, wie bei vielen Standardverläufen in CSS. HSL eignet sich, wenn sich der Farbton über den Farbkreis bewegen soll und Sättigung sowie Helligkeit mitwandern. Keiner der beiden Modi ist allgemein besser oder wahrnehmungsgleich. Prüfe die konkreten Zwischenfarben für deinen Anwendungsfall.

Das Kontrastverhältnis beschreibt nach WCAG 2.1 den Helligkeitsunterschied zwischen den beiden Endpunkten. Es reicht von 1 bei identischen Farben bis 21 bei Schwarz und Weiß. Für normalen Text gelten mindestens 4,5:1, für großen Text und Bedienelemente 3:1. Ein hoher Wert zeigt eine große Helligkeitsspanne, aber nicht automatisch eine geeignete Textfarbe.

Die Begrenzung hält die erzeugte Datenmenge und die Zahl der dargestellten Farbfelder klein. Ob eine Palette wie ein gleichmäßiger Verlauf wirkt, hängt von Endpunkten, Farbraum, Display und Betrachtung ab. Für eine durchgehende Fläche ist ein CSS-Verlauf meist passender als eine lange Liste einzelner Farben.