So verwenden Sie den Farbkonverter
Ob beim Bauen einer Webseite, beim Schreiben von CSS oder bei der Arbeit aus einer Designdatei — die Umrechnung zwischen Farbformaten ist eine ständige Pflichtübung. Designsoftware liefert HEX; in CSS will man oft HSL, um leicht aufzuhellen oder abzudunkeln; Druckaufträge brauchen CMYK; und Frontend-Frameworks mögen ihre Variablen in RGB. Von Hand ist das langsam und fehleranfällig, deshalb bringt dieses Werkzeug alle gängigen Formate auf eine Seite — ändern Sie eines, folgen die übrigen.
Was die fünf Formate sind
- HEX (hexadezimal): die universellste Notation in Web und Designwerkzeugen, geschrieben wie
#3b82f6. Zwei Zeichen pro Farbe, in der Reihenfolge Rot, Grün, Blau, jeweils von 00 bis ff. Erste Wahl für CSS. - RGB (Rot Grün Blau): zerlegt die Farbe in drei Kanalwerte von 0 bis 255 und spiegelt damit wider, wie ein Bildschirm Licht abgibt. CSS akzeptiert auch
rgb(59, 130, 246). - HSL (Farbton / Sättigung / Helligkeit): Der Farbton ist ein Winkel auf dem Farbkreis von 0 bis 360, die Sättigung die Lebendigkeit von 0 bis 100 %, die Helligkeit von 0 bis 100 %. Für „dieses Blau dunkler, aber Farbton behalten" ist HSL am einfachsten — einfach die Helligkeit ändern.
- HSV / HSB (Farbton / Sättigung / Helligkeitswert): im Geist ähnlich zu HSL, aber mit einer anderen Definition der Helligkeit. Das ist das „HSB", das Sie in Designwerkzeugen wie Photoshop und Sketch sehen.
- CMYK (Cyan / Magenta / Gelb / Schwarzanteil): das subtraktive Modell des Drucks. Emittierendes RGB lässt sich nicht drucken; eine Druckerei will CMYK. Beachten Sie, dass die Werte hier eine Formelumrechnung sind — der echte Druck hängt auch von Papier und Farbe ab, betrachten Sie sie als Orientierung.
Ein paar Fallen, in die man tappt
50 % Helligkeit in HSL heißt nicht „normal". Viele nehmen an, 50 % Helligkeit ergebe die Ausgangsfarbe, doch in HSL ist L=50 % schlicht der lebendigste Punkt für diesen Farbton. Reines Rot #ff0000 ist hsl(0, 100%, 50%), reines Weiß dagegen hsl(0, 0%, 100%). Um innerhalb eines Farbtons eine Skala von hell nach dunkel zu erzeugen, ist das Variieren von L der wirksamste Hebel.
CMYK zurück nach RGB bringt Drift. CMYK ist vierkanalig subtraktiv, RGB dreikanalig additiv, und ihre Gamuts decken sich nicht. CMYK-Farben wie reines Cyan und reines Magenta lassen sich am Bildschirm schlicht nicht darstellen, und ein hoch gesättigtes Grün am Bildschirm lässt sich ebenso wenig drucken. Nehmen Sie für Designarbeit die Bildschirmversion als Quelle, und lassen Sie vor der Übergabe die Farbverschiebung von der Druckerei bestätigen.
Kurzes HEX hat eine Voraussetzung. #fff ist die Kurzform von #ffffff, und das funktioniert nur, wenn jedes Zeichenpaar verdoppelt ist. #3b82f6 lässt sich nicht auf drei Stellen kürzen.
Alpha nicht vergessen. HEX lässt sich achtstellig schreiben (etwa #3b82f680), wobei die letzten zwei der Alphakanal sind; in CSS ist das rgba(59,130,246,0.5). Dieses Werkzeug arbeitet mit sechsstelligem HEX ohne Transparenz; die Deckkraft geben Sie separat an.
Warum Kontrast zählt
WCAG (die Web Content Accessibility Guidelines) setzt klare Anforderungen an den Textkontrast: normaler Fließtext sollte mindestens 4,5:1 erreichen, großer Text (ab 18pt oder 14pt fett) mindestens 3:1. Zu geringer Kontrast macht Inhalte für Menschen mit Sehschwäche oder für alle unlesbar, die bei hellem Sonnenlicht aufs Handy schauen, und schadet auch der Barrierefreiheitsbewertung und der Suchleistung einer Seite. Dieses Werkzeug berechnet den Kontrast zwischen Vordergrund- und Hintergrundfarbe und sagt Ihnen, ob er besteht.
Häufige Fragen
Warum ergeben die CMYK-Prozentsätze nicht 100 %?
Theoretisch sollten die vier Kanäle etwa 100 % ergeben (es ist ein subtraktives Modell — vier übereinander gedruckte Farben absorbieren alles Licht und ergeben Schwarz), in der Praxis liegt die Summe aber oft darüber oder darunter. Ein Grund ist, dass echte Farben nicht rein sind; ein anderer, dass die Branche Verfahren wie GCR/UCR (Ersatz der Graukomponente) nutzt, um die Schwarzplatte zu optimieren, Farbe zu sparen und die Druckqualität zu verbessern. Dieses Werkzeug liefert die reine Formelumrechnung, ohne diese Prozessanpassungen.
Worin genau unterscheiden sich HSL und HSV?
Der Kernunterschied liegt in der Definition von „Helligkeit" und „Helligkeitswert". In HSL geht L von Schwarz (0 %) über die gesättigte Farbe (50 %) bis Weiß (100 %); in HSV geht V von Schwarz (0 %) direkt zur lebendigsten Farbe (100 %), ohne den Abschnitt „Richtung Weiß". Dieselbe Farbe erhält in beiden Modellen also unterschiedliche Zahlen — prüfen Sie, welches Ihre Software nutzt. Das H, S und B im Farbwähler von Photoshop ist HSV.
Wie wird die Farbskala erzeugt?
Dieses Werkzeug schreitet im HSL-Modell gleichmäßig von 95 % auf 5 % Helligkeit, bei konstantem Farbton und konstanter Sättigung, und rechnet dann zurück nach HEX. Das Ergebnis ist eine Skala innerhalb eines Farbtons von hell nach dunkel, passend für Button-Hover-Zustände, geschichtete Kartenhintergründe und Diagrammverläufe. Hat Ihre Basisfarbe eine sehr geringe Sättigung (nahe Grau), fallen die Stufen weniger auf.
Was bedeutet ein Kontrastverhältnis von 21:1?
Das ist das theoretische Maximum, erreicht durch reines Schwarz auf reinem Weiß (#000000 auf #ffffff). Es wird als Verhältnis der relativen Luminanz berechnet: (heller + 0,05) / (dunkler + 0,05). Je höher das Verhältnis, desto stärker der Kontrast. Für die alltägliche Webarbeit streben Sie bei Fließtext 7:1 oder besser an und bei Text auf Buttons mindestens 4,5:1.
Ist #0000ff etwas anderes als #0000FF?
Nein — HEX-Farbcodes sind groß- und kleinschreibungsunabhängig. Teams einigen sich meist nur auf Kleinschreibung, damit Style-Linter zufrieden sind.