Farbumrechner

So funktioniert der Farbumrechner

Der Farbumrechner nimmt eine Farbe in beliebiger Schreibweise, HEX wie #ff6600, RGB wie rgb(255, 102, 0) oder HSL wie hsl(24, 100 %, 50 %), auch aus dem Farbwähler, und zeigt sie in allen vier Systemen: HEX, RGB, HSL und CMYK für den Druck. Dazu kommen die Werte, die beim Gestalten zählen: der Kontrast zu Weiß und zu Schwarz nach der WCAG-Formel mit der Empfehlung, ob Text auf dieser Farbe weiß oder schwarz sein sollte, die Komplementärfarbe gegenüber im Farbkreis und die relative Helligkeit in Prozent.

Merksatz: HEX und RGB sind dieselbe Zahl in zwei Schreibweisen, HSL beschreibt die Farbe, wie Menschen sie denken, Farbton, Sättigung, Helligkeit, und CMYK ist die Druckerei. Die Eselsbrücke für den Kontrast: 4,5 zu 1 für normalen Text, 3 zu 1 für große Überschriften, und 7 zu 1 ist die Kür; Weiß auf Orange schafft die 4,5 nicht, Schwarz auf Orange schon.

Drei Beispiele:

• rgb(255, 102, 0): #ff6600, hsl(24, 100 %, 50 %), cmyk(0, 60, 100, 0); Kontrast zu Weiß 2,94 zu 1, zu Schwarz 7,15 zu 1, Text darauf also schwarz, Komplementärfarbe #0099ff, Helligkeit 30,8 Prozent.
• #0066cc: rgb(0, 102, 204), hsl(210, 100 %, 40 %), cmyk(100, 50, 0, 20); Kontrast zu Weiß 5,57 zu 1, Text weiß, Komplementärfarbe #ff9933, Helligkeit 13,9 Prozent.
• hsl(210, 50 %, 40 %): #336699, rgb(51, 102, 153), cmyk(67, 33, 0, 40), Kontrast zu Weiß 6 zu 1, dieselbe Farbfamilie wie #0066cc, nur weniger gesättigt.

Formeln: HEX = RGB in Hexadezimal, zwei Stellen je Kanal, K = 1 - max(R, G, B) / 255, C = (1 - R / 255 - K) / (1 - K), Kontrast = (L₁ + 0,05) / (L₂ + 0,05) mit der relativen Luminanz L, Komplementär = Farbton + 180°. Für Pixelmaße und Seitenverhältnisse von Bildern gibt es den Seitenverhältnis-Rechner, für Farbcodes in Konfigurationen den JSON-Formatter.

Wissenswertes zum Thema

Die vier Farbsysteme und was sie beschreiben

RGB ist die Sprache des Bildschirms: drei Lichtquellen, Rot, Grün und Blau, jede von 0 bis 255, zusammen 16,7 Millionen Farben, und alle drei auf 255 geben Weiß, additive Mischung. HEX ist RGB in Hexadezimalzahlen, zwei Stellen je Kanal von 00 bis ff, #ff6600 ist 255, 102, 0, und die Kurzform #f60 steht für #ff6600, wenn beide Stellen je Kanal gleich sind; ein vierter Kanal wie #ff660080 ist die Transparenz. HSL ist dasselbe Farbmodell in anderen Koordinaten: Hue, der Farbton als Winkel im Farbkreis, 0 Rot, 120 Grün, 240 Blau, 24 ein Orange; Saturation, die Sättigung von Grau bei 0 bis rein bei 100 Prozent; Lightness, die Helligkeit von Schwarz bei 0 über die reine Farbe bei 50 bis Weiß bei 100. HSL ist das System, in dem Designer arbeiten, weil "etwas dunkler" einfach L minus 10 heißt und eine Farbpalette aus demselben Farbton mit verschiedenen Sättigungen und Helligkeiten entsteht, #0066cc und #336699 sind beide Farbton 210. CMYK ist der Druck, subtraktiv: Cyan, Magenta, Gelb und Schwarz als Druckfarben auf weißem Papier, 0 bis 100 Prozent Deckung, und die Umrechnung aus RGB ist eine Näherung, weil Bildschirm und Druck verschiedene Farbräume haben, leuchtendes Orange oder Blau aus dem Monitor gibt es im Vierfarbdruck nicht, und die Druckerei rechnet mit Farbprofilen wie ISO Coated, nicht mit der Formel. Der Rechner liefert die rechnerischen CMYK-Werte als Anhaltspunkt; für den Druck gilt das Profil. Wie Bildgrößen in Megapixel und Verhältnisse umgerechnet werden, zeigt der Seitenverhältnis-Rechner.

Kontrast und Barrierefreiheit: Die WCAG-Zahlen

Der Kontrast im Rechner folgt den Web Content Accessibility Guidelines: Aus den RGB-Werten wird die relative Luminanz berechnet, eine gewichtete Helligkeit, bei der Grün mit 71 Prozent, Rot mit 21 und Blau mit 7 Prozent eingeht, weil das Auge Grün am hellsten sieht, und der Kontrast zweier Farben ist der Quotient der Luminanzen plus 0,05, von 1 zu 1 für gleiche Farben bis 21 zu 1 für Schwarz auf Weiß. Die Stufen: 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text ab 24 Pixel oder 19 Pixel fett ist Stufe AA, die seit 2025 nach dem Barrierefreiheitsstärkungsgesetz für Online-Shops und viele Dienste Pflicht ist; 7 zu 1 und 4,5 zu 1 ist Stufe AAA; 3 zu 1 gilt auch für Icons, Rahmen und Fokusringe. Orange #ff6600 mit Weiß erreicht nur 2,94, fällt bei AA durch, mit Schwarz 7,15, besteht AAA, und der Rechner empfiehlt deshalb schwarzen Text; Blau #0066cc mit Weiß erreicht 5,57, AA bestanden, AAA nicht. Die Helligkeit in Prozent ist die relative Luminanz, 30,8 Prozent beim Orange, 13,9 beim Blau, und die Faustregel lautet: Farben unter 18 Prozent Luminanz tragen weißen Text, darüber schwarzen. Nicht im Rechner, aber wichtig: Rot-Grün-Schwäche betrifft 8 Prozent der Männer, deshalb Information nie allein über Farbe kodieren, und die Komplementärfarbe, Orange zu Blau, ist der stärkste Farbkontrast, aber nicht automatisch der beste Helligkeitskontrast. Die Zeichen eines Farbcodes zählt der Zeichenzähler, falls ein Feld nur sechs erlaubt.

Farben im Code: CSS, Design-Systeme, Paletten

In CSS sind alle vier Schreibweisen erlaubt, color: #ff6600, rgb(255 102 0), hsl(24 100% 50%), dazu seit 2023 die neuen Räume oklch und lab, die Helligkeit gleichmäßiger abbilden als HSL, bei dem Gelb mit L 50 viel heller wirkt als Blau mit L 50. Eine Palette baut man aus einem Farbton in HSL: Primärfarbe bei L 40 bis 50, Hover zehn Punkte dunkler, Hintergründe bei L 95, Text bei L 15, Rahmen bei L 85, und die Komplementärfarbe oder der Nachbar im Farbkreis, Farbton plus 30, als Akzent; der Rechner liefert die Komplementärfarbe direkt, #0099ff zu #ff6600, und die Zwischenstufen entstehen durch Ändern von L. Markenfarben werden als HEX gepflegt und sollten mit dem Kontrastwert dokumentiert sein, damit niemand hellgrauen Text auf Hellblau setzt. Für Druck liefert man der Agentur CMYK oder Pantone, nicht HEX, und wundert sich dann nicht über matte Töne; Orange und Cyan sind die Farben, die zwischen Bildschirm und Papier am meisten verlieren. Beim Übernehmen von Farben aus Bildern hilft die Pipette, die der Farbwähler des Browsers meist mitbringt, beim Prüfen ganzer Seiten die Entwicklerwerkzeuge des Browsers, die Kontrastwerte im Elementinspektor anzeigen. Wer Farbwerte in Konfigurationsdateien ablegt, prüft die Syntax mit dem JSON-Formatter.

Ein Stück Geschichte: Von Newtons Kreis zum Webfarben-Hex

Isaac Newton zerlegte 1666 das Licht mit dem Prisma und bog das Spektrum 1704 in seiner "Opticks" zum Farbkreis, in dem Rot und Violett sich berühren, die Grundlage jedes Farbtonwinkels. Thomas Young vermutete 1802 drei Farbrezeptoren im Auge, Hermann von Helmholtz baute die Theorie aus, und James Clerk Maxwell zeigte 1861 mit drei Projektoren das erste Farbfoto aus Rot, Grün und Blau, additive Mischung in der Praxis. Die subtraktive Seite kam aus der Druckerei: Jacob Christoph Le Blon druckte um 1710 in London mit drei Farben, der Vierfarbdruck mit Schwarz setzte sich im 20. Jahrhundert durch. HSL und HSV entwickelte Alvy Ray Smith 1978 bei Pixar-Vorläufern, damit Grafiker Farben am Rechner intuitiv wählen konnten, und die CIE hatte 1931 den Normfarbraum geschaffen, aus dem die Luminanzgewichte stammen. Die sechsstellige Hex-Schreibweise kam mit HTML 3.2 im Jahr 1997 ins Web, mit 16 benannten Farben, die aus der Windows-VGA-Palette stammten, darunter das unbeliebte "gray" und "grey" als beide Schreibweisen; CSS 3 brachte 2011 HSL und 147 Farbnamen, und die WCAG 2.0 von 2008 die Kontrastformel, die seit 2025 in Deutschland Gesetz ist. Der Rechner rechnet Newtons Kreis in Maxwells drei Kanäle.

Praktische Tipps

Prüfen Sie jede Textfarbe auf 4,5 zu 1, Überschriften und Icons auf 3 zu 1, und notieren Sie den Wert in der Styleguide-Datei. Bauen Sie Paletten in HSL aus einem Farbton und variieren Sie nur Sättigung und Helligkeit. Nutzen Sie die Komplementärfarbe sparsam als Akzent, nicht für Flächen. Geben Sie Druckereien CMYK oder Pantone und erwarten Sie keine Bildschirmleuchtkraft. Kodieren Sie Zustände nie nur über Farbe, sondern mit Symbol oder Text. Testen Sie Farben auf dem Handy bei Sonnenlicht. Und lassen Sie sich vom Farbwähler nicht zu 16 Millionen Farben verführen, fünf reichen für eine Marke. Die QR-Codes in Markenfarbe erzeugt der QR-Code-Generator, mit Kontrastprüfung im Kopf: dunkel auf hell.