CSS, HTML und Javascript mit {stil}

CSS color • Farbe für Schrift und CSS border

CSS color in Hex, RGB, HSL und Farbnamen

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 deklariert werden.

CSS color und CSS background greifen auf dieselben Techniken zur Angabe 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
} 
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 unterhalb von .demo-color erben von 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

HSL in CSS

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

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

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.

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.

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.

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

CMYK gehört auch mit CSS3 nicht zum Standard. Bilder für den Druck werden in CMYK-Farben umgerechnet. Ältere Browser können CMYK-Bilder u.U. gar nicht anzeigen oder es kann zu Farbverschiebungen kommen. Erst in den letzten Jahren sind alle Betriebssysteme in der Lage, CMYK-Bilder mit Hilfe des ICC-Farbmanagements in RGB umzurechnen (was mit einem Verlust verbunden sein kann).

Bis heute können wir uns nur auf die Farben des sRGB-Farbraums verlassen. Fotografen, die mit AdobeRGB fotografieren, werden darum ihre Fotos für das Internet vorsichtshalber in sRGB umrechnen.

Websichere Farben und Farbnamen

In der Zeit der ersten erschwinglichen Farbmonitore erzeugten die Grafikkarten nur 256 Farben. In dieser Zeit einigten sich die Hersteller von Grafikkarten, Monitoren und Betriebssystemen 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 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 jetzt eigentlich keine Rolle mehr, denn selbst unsere Mobiltelefone 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

Trotzdem der sRGB-Farbraum die websicheren Farben überflüssig gemacht hat, ist die Palette immer noch beliebt, weil sich die Farben durch einen kürzeren dreistelligen Hexcode beschreiben lassen.