Farbcode-Konverter

HEX und RGB sind dasselbe, nur anders geschrieben. `#663399` sind drei Paare Hexadezimalziffern — 102, 51 und 153 — und `rgb(102 51 153)` sind dieselben Zahlen im Zehnersystem. Beim Umrechnen kann nichts verloren gehen, weil sich nur die Zahlenbasis ändert.

HSL und HSV beschreiben dieselbe Farbe aus der Sicht eines Menschen statt aus der eines Bildschirms. Statt der Mischung aus Rot, Grün und Blau geben sie den Farbton als Winkel auf einem Farbkreis an, dann die Sättigung und die Helligkeit. Deshalb greifen Gestalter dazu: eine Farbe um zehn Prozent aufzuhellen ist in HSL eine Zahl und in RGB drei unübersichtliche.

Alles andere auf dieser Seite ist eine Umformung derselben drei Zahlen. CMYK nicht: es beschreibt Farbe auf Papier, und wie eine Mischung aus Cyan, Magenta, Gelb und Schwarz tatsächlich aussieht, hängt von der Maschine, dem Papier und dem Farbprofil ab. Auf keines davon hat eine Formel Zugriff.

Was du hier bekommst, ist die übliche nominelle Umrechnung — dieselbe, die jedes Werkzeug rechnet, das nach keinem Profil fragt. Als grobe Orientierung taugt sie, als Druckvorgabe nicht. Wenn die Farbe wirklich zählt, will die Druckerei den Hex-Wert und macht die Separation mit ihrem eigenen Profil.

Der Alphawert wird mitgeführt: `#663399cc`, `rgba(102, 51, 153, 0.8)` und `rgb(102 51 153 / 80%)` meinen dieselbe Farbe bei 80 Prozent Deckkraft, und alle drei werden richtig gelesen. Die achtstellige Hex-Schreibweise begegnet einem am seltensten und bringt die meisten Werkzeuge aus dem Tritt — dabei ist sie schlicht die sechsstellige mit einem vierten Ziffernpaar für die Deckkraft.

In CMYK gibt es dazu keine Entsprechung, weil Farbe entweder aufs Papier kommt oder nicht. Ist die eingegebene Farbe teilweise durchsichtig, beschreiben die CMYK-Werte sie so, als wäre sie deckend.

Unter den Schreibweisen stehen zwei Zahlen: das Kontrastverhältnis deiner Farbe gegen Weiß und gegen Schwarz. Sie stammen aus der WCAG-Definition, und die ist kein einfacher Helligkeitsmittelwert — die Kanäle sind gewichtet, weil das Auge auf Grün viel empfindlicher reagiert als auf Blau, und jeder wird vorher linearisiert.

Praktisch entscheidest du damit, welche Schriftfarbe auf einen Hintergrund gehört. 4,5 ist die Schwelle für Fließtext, 3 für große Überschriften. Ein Hintergrund, dessen besserer Wert unter 4,5 liegt, braucht größere Schrift oder einen anderen Hintergrund — das ist der schnellste Weg zu merken, dass eine Hausfarbe, die im Entwurf gut aussieht, eine Barrierefreiheitsprüfung nicht besteht.

Eine Farbe, die sich nicht lesen lässt, wird als unlesbar gemeldet und nicht stillschweigend ersetzt. Das klingt selbstverständlich und ist ungewöhnlich: der übliche Weg, diese Seite zu bauen, ist, die Zeichenkette dem Browser zu geben und zurückzulesen, was er daraus gemacht hat — vier Zeilen Code, die auf `#12345` mit der vorherigen Farbe antworten.

Eine fehlende Ziffer sieht dann aus wie eine gelungene Umrechnung, und du merkst es erst, wenn der Ton woanders nicht stimmt. Hier wird ausdrücklich geparst. Das kostet eine Tabelle mit den hundertachtundvierzig CSS-Farbnamen und liefert dir eine Fehlermeldung statt einer plausiblen falschen Antwort.