CSS color • Farbwerte für Schrift, background und border

CSS color Farbwerte

Farbe – CSS color – gehört zu den wichtigsten Gestaltungsmitteln des Webdesigns. Für fast alle HTML-Elemente kann color als Schriftfarbe, für border, box-shadow, text-shadow und background angegeben werden.

CSS color und CSS background greifen auf dieselben Techniken zur Angabe der Farbe zurück:

.gruen { 
   border: 1px solid silver; color: green
} 
p { 
   border: 1px solid silver; color: rgb(0,128,128) 
} 
h2 a {
   border: 1px solid #fff; color: hsla(30,20%,60%,0.9) 
}

CSS color kann keinen Verlauf enthalten: linearGradient und radialGradient sind Werte der Eigenschaft background-image und keine Eigenschaften von color.

CSS Schriftfarbe – color

In erster Linie wird die Eigenschaft color für Text eingesetzt, aber der Wert von color bestimmt auch andere Eigenschaften wie border, text-shadow und box-show, solange für hier keine andere Farbe deklariert wird. Zwar unterliegt die Vorgabe der Textfarbe den Browsern, aber hier sind sich alle Browser einig: Per Vorgabe ist die Schriftfarbe auf Webseiten bis auf wenige Ausnahmen (z.B. placeholder) Schwarz bis eine andere Farbe gewählt wird.

color ist erblich: Wird color für ein Element gesetzt, erben alle Elemente darunter die angegebene Farbe. Das gilt sowohl für Text-Elemente wie h1, p oder li als auch für border, text-shadow und box-shadow (i.d.R. nicht für Formular-Elemente wie input).

.color-demo { 
   color: hsl(60,50%,50%);
}
.color-demo div { 
   border: 4px solid;
   box-shadow: 10px 10px 15px;
}

Ich bin das p in dieser Box

Ein div mit border

Alle Elemente außer input und button unterhalb von .demo-color erben color (und zwar nicht nur die Schriftfarbe, sondern auch die Farbe von border, box-shadow und text-shadow) und müssten für eigene Farben überschrieben werden.

Farbe als Hex oder RGB

Die gebräuchlichste und älteste Technik für die Angabe einer Farbe in CSS ist die Zuweisung eines Hexcodes für die drei Farben: Jede Farbe wird aus Rot, Grün und Blau gemischt.

color: #9ab8a9;
        ^ ^ ^
        | | +----- Blau-Wert
        | +----- Grün-Wert
        +----- Rot-Wert

Das ist wenig intuitiv und gleichzeitig fehlerträchtig. Da hilft es auch nicht, dass der sechsstellige Hexcode abgekürzt werden darf, wenn je zwei Werte in allen drei Paaren gleich sind:

color: #aabbcc; | color: #abc;

Groß- oder Kleinschreibung spielt bei Hex keine Rolle. #9ab8a9; ist dasselbe wie #9AB8A9;.

Etwas intuitiver (nicht wirklich) ist die Schreibweise als RGB-Wert in CSS. Hinter der Angabe rgb und der öffnenden Klammer darf kein Leerzeichen stehen. Die Werte für Rot, Grün und Blau werden durch Kommas getrennt.

color: rgb(154,184,169) || color: #9ab8a9

CSS und RGB-Farbwerte

Schon mal versucht, die Anteile von Rot, Grün und Blau in einer RGB-Farbe vorauszusagen? … oder noch schwieriger: Wie ist eine hellere Variante eines Orange-Tons in RGB zusammengesetzt?

rgb(229,109,69)
rgb(242,151,121)

Hoppla? Der hellere Orangeton enthält mehr Blau! Man sagt auch: In RGB korrelieren die Farben.

HSL in CSS

HSL eröffnet sich unserem Farbverständnis schneller. Wir unterscheiden Farben nach ihrem Farbton (HUE), ihrer Sättigung (Saturation) und ihrer Helligkeit (Lightness). In HSL brauchen wir keinen Farbpicker, sondern ein helleres oder dunkleres, ein höher oder weniger gesättigtes Blau lässt sich leicht abschätzen.

hsl(270,80%,70%)
hsl(270,80%,85%)

Der Computer liebt RGB, aber für Menschen ist RGB alles andere als intuitiv. Wir verstehen Farben in der HSL-Schreibweise besser und können sie einfacher miteinander in Verbindung setzen.

HSL erleichtert Farbkorrekturen und das Zusammenstellen von Farbpaletten, denn HSL trennt die Farbe von der Helligkeit. Bildbearbeitungsprogramme benutzen darum vorzugsweise den HSV- oder HSL-Farbraum.

Das »oder« ist die kleine Falle der Angabe von Farben im HSL-Farbraum: CSS setzt auf HSL-Farbangaben, Photoshop, der Farbwähler von Mac OS und viele andere Anwendungen hingegen auf HSV. Die beiden Modelle sind sich sehr ähnlich, aber doch nicht gleich.

Windows Paint hat zwar Farben als HSL im Menü des Farb-Editors, aber Paint komprimiert die Farben auf eine Skala von 0 bis 239 und setzt bei Helligkeit und Sättigung auf Werte zwischen 0 und 239. Paint ist immer noch das Malprogramm aus Windows 3.1.

hsla(140,20%,50%,0.5)
   |  |   |   |   |
   |  |   |   |   +-- Alpha oder Opacity: Deckkraft 
   |  |   |   |
   |  |   |   +-- Helligkeit 0% = Schwarz, 100% = Weiß
   |  |   |
   |  |   +-- Sättigung 0% = Farblos, 100% = höchste Reinheit
   |  |
   |  +-- Farbe von 0°-360° auf dem Farbkreis
   |
   +-- Indikator für Deckkraft

Die modernen Browser verstehen HSL. Ausnahmen sind die älteren Version von Internet Explorer bis IE8. Auf Webseiten kommen für die Farbangaben darum weiterhin nur RGB, Hex oder Farbnamen in Frage.

HUE (Farbton) ist ein Winkel zwischen 0 bis 360° in einem Farbrad mit dem kompletten Farbkreis. Die Werte 0 und 360° stehen für das reine Rot, 120° für Grün, 240° für Blau.

060120180240300360

CSS color

color
bestimmt die Farbe des Vordergrundes. Die Vorgabe ist Schwarz.
Werte
color
gibt die Farbe eines Elements
  • als Schlüsselwort ("red"),
  • als sechsstellige Hexadezimalzahl (#FF0000),
  • als Tripel von drei RGB-Werten (255,0,0),
  • drei HSL-Werten (0,100%,50%) an.
Mit der Angabe von RGB-, HSL- oder Hexadezimal-Werten lassen sich 16,8 Mio. Farben erzeugen, während für Farbnamen rund 140 Werte zur Verfügung stehen (CSS3).

CSS CMYK

Drucker verwenden i.d.R. CMYK (Cyan, Magenta, Yellow, Black), aber wir sehen auf dem Monitor immer RGB. Programme wie Photoshop können RGB-Bilder mit Hilfe des ICC-Farbmanagements in CMYK umrechnen und auch zurück von CMYK zu RGB. Beide Wege sind verlustbehaftet und können zu leichten Farbverschiebungen führen. Die Umrechnung von RGB in Druckerfarben ist keineswegs trivial. Und selbst wenn Photoshop ein Bild oder ein Farbfeld in CMYK umrechnet, bleibt die Darstellung auf dem Monitor RGB und simuliert nur das CMYK.

Bislang können Browser (außer Safari) Bilder aus dem CMYK-Farbraum nicht darstellen – ebensowenig kann CSS mit CMYK-Farben umgehen.

color: device-cmyk(0, 81%, 81%, 30%);
color: rgb(178, 34, 34);
color: firebrick;

Sinn machen Farbangaben in CMYK nur, wenn die Webseite direkt für den Druck gedacht ist und der Druckerfarbraum durch ein ICC-Farbprofil bekannt ist.

firebrick

So kommt Photoshop zu einem leicht vom W3c abweichenden RGB. Das kleine Symbol eines Würfels neben dem Farbfeld ist ein Warnhinweis, dass hier keine websichere Farbe vorliegt.

Websichere Farben und Farbnamen

In der Zeit der ersten erschwinglichen Farbmonitore betreute die Grafikkarte nur 256 Farben. In dieser Zeit einigten sich die Hersteller der Grafikkarten, Monitore und Betriebssysteme auf eine Auswahl oder Palette von 216 websicheren Farben, und zwar Rot, Grün und Blau in jeweils 6 Schattierungen von 00 bis FF (6 x 6 x 6 = 216). Die übrigen Farben blieben den Betriebssystemen vorbehalten.

Websichere Farben erkennt man an der Dopplung der Stellen – z.B. #FF0066 oder #33FF33 – und kann sie auf drei Stellen kürzen (#F06 und #3F3). Tatsächlich waren nur 22 dieser Farben wirklich sicher (aber das spielt heute keine Rolle mehr). Bei anderen als den wirklich websicheren Farben konnte es in der Frühzeit der Grafikkarten zu Differenzen in der Farbdarstellung kommen.

Heute können wir davon ausgehen, dass die Farben von Text, border und background, text-shadow und box-shadow auf allen Monitoren ähnlich dargestellt werden. "Ähnlich"? Besser geht's nicht? Selbst wenn alle Monitore kalibriert wären und Color Management korrekt benutzt würde, würden Monitore dieselben Farben nicht zu 100% gleich darstellen.

Die websicheren Farben spielen eigentlich keine Rolle mehr, denn selbst unsere Handys haben den großen Spielraum von 24 Bit Farbtiefe oder 16 Mio Farben (auch als True Color bekannt). Der sRGB-Farbraum hat sich als zuverlässiger Standard durchgesetzt. Wenn es dennoch zu Farbabweichungen kommt, liegt es an Monitoren, deren Helligkeit und Kontrast nicht korrekt eingestellt sind, am Umgebungslicht und nicht zuletzt am Alter und an der Qualität der Monitore.

#9ab8a9
PNG
JPG
#ff9630
PNG
JPG

Nicht websichere Farben als als Hex-Code, als PNG- und als JPEG-Bild

Obwohl der sRGB-Farbraum die websicheren Farben überflüssig gemacht hat, ist die Palette immer noch beliebt, weil sich die Farben durch den kurzen dreistelligen Hexcode beschreiben lassen.