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

CSS color Farbwerte

Für fast alle HTML-Elemente kann color für Schrift, border, box-shadow, text-shadow und background-color als Farbname, als Hex-Wert, in Form von RGB oder HSL geschrieben werden. RGB- und HSL-Angaben haben eine vierte optionale Komponente: Transparenz (Opacity).

18-12-15 SITEMAP

CSS Color Models – Farbmodelle

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

  • Farbe als Hexcode ("#8cf", "#ddef0c")
  • Angabe als Farbname ("navy", "cyan")
  • Farbe in RGB-Schreibweise (Red, Green, Blue – Rot, Grün, Blau)
  • Farbe in HSL-Schreibweise (Hue, Saturation, Lightness – Farbton, Sättigung, Helligkeit)
    Nicht verwechseln mit dem HSV-Farbraum von Photoshop!
.gruen { 
   border: 1px solid silver; 
   color: green;
} 
 
h2 a {
   border: 1px solid #fff; 
   color: hsla(30,20%,60%,0.9) ;
}

Fast immer werden die Werte durch ein Komma getrennt, Leerzeichen bilden aber ebenfalls eine gültige Trennung. Diese Schreibweise ist neuerer Natur, wird aber von IE11 und auch von EDGE nicht unterstützt.

p { 
   border-bottom: 4px solid rgb(30 50 200);
}

Von color mit CMYK-Werten gibt es noch keine Spur, erst CSS4 hat color: cmyk() auf dem Plan.

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

Welche Farbe ist die schnellste?

Sobald der Browser den Code parst, ist die interne Darstellung von Farbwerten ein 64-bit-Fließkommawert, egal ob Hex, RGB, HSL oder Farbname. Dann steckt hinter jedem Farbwert noch der ganze Rattenschwanz des Umrechnens in den Farbraum des Monitors.

»Hex-Werte können mit vier Zeichen auskommen, RGB braucht bis zu 16, HSL sogar 18 Zeichen« könnte man jetzt noch einräumen. Alle Farbangaben dafür auf Hex umzustellen wäre, als würde man die Aufkleber vom Koffer kratzen, damit er noch als Handgepäck in den Flieger geht.

HTML img srcset – Bilder je nach Breite des Viewports laden

Semitransparente Farben mit RGBA oder HSLA erfordern allerdings richtig Rechenarbeit im Browser, denn dafür muss der Browser Vordergrund und Hintergrund in die Berechnung einbeziehen.

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: #40E0d0;
        ^ ^ ^
        | | +----- Blau-Wert
        | +----- Grün-Wert
        +----- Rot-Wert

#74faff

#66ffff

#66ffbf

Schwer nachvollziehbar: Die ersten beiden Farben sind sich sehr ähnlich, obwohl ihre Hexwerte so unterschiedlich ist. Die Hexwerte des zweiten und dritten Farbmusters unterscheiden sich kaum, aber die Farben differieren.

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;.

CSS RGB-Farbwerte

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(238,130,238)

RGB-Farben haben eine optionale Komponente für die Transparenz. Dann wird rgba (a für Alpha) notiert und ein Wert zwischen 0 und 1 bestimmt die Transparenz.

color: rgba(238,130,238,0.5)

rgb(238,130,238)

rgb(218,112,214)

rgb(118,112,214)

Genauso wie bei Hex können ähnliche Farben an allen drei Stellen unterschiedliche Werte aufweisen, während die Änderung eines Wertes eine völlig andere Farbe hervorbringt.

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! Nein, 121 Blau ist nicht mehr Blau als 69 Blau, sondern ein helleres oder wässrigeres Blau. Aber auf jeden Fall ändert sich der Wert für Blau, obwohl wir nur den Orangeton ändern wollten. 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.

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

hsl(270,70%,70%)

hsl(270,70%,85%)

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

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.

030 60120180240300360

Achtung! Die Grauskala unter dem Farbband kommt von CSS filter und wird von IE11 nicht unterstützt.

HSL erleichtert Farbkorrekturen und das Zusammenstellen von Farbpaletten, denn HSL trennt die Farbe von der Helligkeit. Perfekt ist HSL als Farbmodell aber auch nicht, denn Lightness, die Helligkeit ist zwischen den Farbtönen nicht vergleichbar.

hsl(240,100%,50%)

hsl(60,100%,50%)

hsl(240,100%,50%)
filter: grayscale(100%)

hsl(60,100%,50%)
filter: grayscale(100%)

In HSL sind die Helligkeiten von Blau und Gelb zwar gleich, aber das geht dem menschlichen Farbsehen gegen den Strich. Rechnet man die Farbe heraus, ist Blau deutlich dunkler als Gelb!

Am Ende lauert eine Falle bei der Angabe von Farben im HSL-Farbraum: CSS setzt auf HSL-Farbangaben, Photoshop, der Farbwähler von Mac OS und viele andere Anwendungen hingegen setzen auf HSV. Die beiden Modelle sind sich sehr ähnlich, aber doch nicht gleich. Und wenn Photoshop und Apple auf HSV setzen – HSV ist als Farbangabe in CSS auch in CSS 4 nicht auf dem Plan.

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.

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

Fortsetzung folgt mit CSS4: CMYK und LCH

Neben CMYK ist eine Umsetzung des LCH-Farbmodells in CSS4 geplant.

CMYK ist immer noch eines der wichtigsten Farbmodelle, aber war auch in CSS3 nicht dabei. Der Monitor kann CMYK nicht anzeigen, denn am Monitor herrscht RGB. Damit CMYK-Werte auf dem Monitor angezeigt werden, müssen sie immer mit RGB simuliert werden.

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).