Farbnamen, Farbcodes und numerische Farbwerte

Farbnamen von gold, orange, red bis silver und blue

Diese Farbnamen werden in vielen Anwendungen angeboten und sind eine praktische Hilfestellung beim Layout, Design und Testen von Webseiten.

.d1 { background: gold; }
.d2 { background: orange; }
.d3 { background: ivory; }
.d4 { background: beige; }

Seit CSS3 gehören die Farbnamen zum CSS-Standard für color und background-color (siehe CSS Color Module Level 3). Die komplette Liste der Farbnamen wird allen Browsern zuverlässig umgesetzt.

HSL-Angaben für Farben und Hintergrund werden ab IE9 unterstützt.

Und es heißt aufpassen: CSS benutzt HSL, Photoshop und andere Anwendungen geben Farben im HSV-Farbraum an!

Tabelle Farbnamen und Farbcodes

Die Tabelle ist nach Farben geordnet: wie auf dem Farbkreis von Rot über Orange nach Gelb, Grün, Blau, Violett. Wenn uns die Reihenfolge willkürlich erscheint, dann liegt es daran, dass neben dem Farbton auch Helligkeit und Sättigung über die Darstellung der Farbe entscheiden. Dazu kommt, dass die Farbnamen willkürlich zusammengestellt sind: lightpink ist dunkler als pink, gray ist dunkler als darkgray, brown ist ein dunkles Rot.

Wer wissen will, wie diese willkürlichen Farbnamen zustande kamen: Alex Sexton: Peachpuffs and Lemonchiffons [CSSConfUS2014]. Unterhaltsam.

CSS HSL vs. HSB in Adobe Photoshop

Der sRGB-Farbraum gibt Farben in CSS als hexadezimale Zeichenfolge an (z.B. color: #C0FFC0) oder in RGB-Notation (z.B. color: rgb(255,128,0)).

Im HSL-Farbraum sind Farben ganze Zahlen zwischen 0 bis 360 für den Farbwert. Sättigung oder Reinheit werden genauso wie die Helligkeit L in % geschrieben (z.b. color: hsl(60,75,95%)). Wer sich wundert, dass die Werte für Sättigung und Helligkeit etwas anders aussehen als in Photoshop: Der Farbwähler in Photoshop nutzt das HSV- oder HSB-Farbmodell, bei dem Sättigung und Helligkeit anders als für HSL berechnet werden. Diese beiden Farbmodelle sind sich sehr ähnlich, aber der Unterschied ist sichtbar und manchmal auch drastisch.

Das L in HSL steht für Lightness, das B in Photoshop HSB für Brightness. Unglücklich, dass beide Begriffe mit »Helligkeit« übersetzt werden.

Der CSS-Farbrechner rechnet Photoshop HSV/HSB nach CSS HSL, zeigt den RGB- und Hexwert der Farbe und – falls vorhanden – den Farbnamen.

HKS und Pantone

HKS sind Volltonfarben für den Bilderdruck, auf Zeitungspapier und Naturpapieren, die vom HKS-Verband definiert werden. Pantone ist ebenfalls ein Farbsystem für die Druckindustrie. Die Farben dieser Systeme können nur annähernd durch RGB-Farben auf dem Monitor wiedergegeben werden. Es gibt zwar spezialisierte Programme zur Umrechnung, aber die Farbwiedergabe auf dem Monitor ist grundsätzlich unzuverlässig, da die wenigsten Monitore regelmäßig ausgemessen und kalibriert werden.

Websichere Farben

Die websicheren Farben haben heute keine Bedeutung mehr. Jedes Handy kann mehr Farben anzeigen als der Farbmonitor der 90iger Jahre.

Alle Geräte (Monitor des Computers, Tabletts und Smartphone, TV) haben heute einen 24-Bit-Farbraum.