Farbnamen, Farbcodes und numerische Farbwerte

System Color Keywords

Systemfarben aus CSS Color Module Level 4: werden vom Betriebssystem bzw. User-Agent (Browser) vorgegeben und passen sich automatisch an Light Mode / Dark Mode und an die System-Theme-Einstellungen des Benutzers an. Diese Farbnamen sind barrierefreier als #000 / #fff, weil sie sich automatisch an Dark Mode und High Contrast Mode anpassen. Sie werden von allen modernen Browsern unterstützt.

Auch accent-color gehört im Grunde genommen zu den Systemfarben, obwohl accent-color technisch gesehen keine Systemfarbe wie Canvas oder Highlight ist, sondern eine CSS-Eigenschaft.

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 wird zuverlässig seit ~2010 bis 2012 unterstützt.

OKLCH ist ein relativ junges Farbmodell, das seit 2023 von allen modernen Browsern zuverlässig unterstützt wird. OKLCH beschreibt Farben durch einen Farbton (HUE), Sättigung (CHROME) und Helligkeit (LIGHTNESS) ist intuitiv und Änderungen der Helligkeit entsprechen dem menschlichen Farbsehen besser als im HSL-Modell.

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.