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 können Farben für die Schrift, von border und background mit CSS color und background notiert 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.

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. Wir kommen mit RGB nicht ohne Weiteres klar. Das HSL- und HSV-Farbmodell lehnen sich besser an das menschliche Farbsehen an.

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

Das »oder« ist die kleine Falle der Angabe von Farben im HSL-Farbraum: CSS setzt auf das HSL-Modell, 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 setzen die Farbmodelle HSL um. Ausnahmen sind die älteren Version von Internet Explorer: IE6, IE7 und 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 gleich dargestellt werden.

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.

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