Bitte warten...

CSS: Farben

► W3C-Empfehlung: Color Module

Für eine Reihe von CSS-Eigenschaften kann ein Farbwert eingestellt werden:

color – Schriftfarbe
background-color – Hintergrundfarbe
border-color – Rahmenfarbe
outline-color – Farbe einer Konturlinie
sowie bei Schatten und Farbverläufen.

Der Farbwert kann auf verschiedene Weise angegeben werden. Zunächst ist es möglich, einen vordefinierten Farbnamen wie blue oder orange anzugeben.

Eine andere Möglichkeit besteht darin, ein Triplett aus ein- oder zweistelligen hexadezimalen Zahlen für jeden der drei Farbkanäle Rot, Grün und Blau anzugeben. Dabei wird dem Triplett ein # vorangestellt. Es können kleine oder große Buchstaben verwendet werden. Optional kann als vierter Wert der Alphakanal angegeben werden, mit dem die Opazität (Deckkraft) der Farbe eingestellt wird. Bei zweistelligen Zahlen (00 bis FF) wird die Intensität des Farbkanals mit einer Feinheit von 1/256 eingestellt. Bei einstelligen Zahlen (0 bis F) mit einer Feinheit von 1/16.

Die Farbkanäle können auch dezimal eingestellt werden. Dazu verwendet man das Format rgb() für drei Kanäle bzw. rgba() für drei Kanäle plus Alphakanal. Für jeden Farbkanal kann ein Wert zwischen 0 und 255 angegeben werden, für den Alphakanal zwischen 0 und 1.

Eine wesentlich intuitivere Methode zur Notation eines Farbwertes ist die Angabe von Farbton, Sättigung sowie Helligkeit einer Farbe. Hierfür wählt man das Format hsl() (hue, saturation, lightness), bzw. hsla() für einen zusätzlichen Alphakanal.

Der Farbton wird in Grad von 0 bis 360 als Winkel auf dem Farbkreis (beginnend bei Rot) angegeben. Sättigung und Helligkeit werden in Prozent angegeben. Der Alphakanal als Wert zwischen 0 und 1.

Als Werte können auch Zahlen mit Nachkommastellen verwendet werden (z. B. hsl(125.5,36.4%,78.2%)). So lassen sich mit dieser Methode ebenso die 2563 = 16.777.216 Farben der hexadezimalen Schreibweise nutzen (bei ganzen Zahlen nur 3.600.000), wobei solche feinen Farbnuancen mit dem bloßen Augen eigentlich kaum mehr zu unterscheiden sind und der Feinabstimmung im Gegensatz zum Printbereich ohnehin Grenzen durch die Darstellbarkeit auf Computerbildschirmen gesetzt sind.

Hier ein paar Beispiele:

color:orange;
color:#55cc11;
color:#5c1;
color:#55cc1177;mit Alphakanal
color:#5c17;mit Alphakanal
color:rgb(128,34,10);
color:rgba(128,34,10,.5);mit Alphakanal
color:hsl(23,85%,50%);
color:hsla(23,85%,50%,.5);mit Alphakanal

Hier eine Palette mit meinen 117 persönlichen Standardfarben und den dazugehörigen hsl()-Werten:

0,85%,10%15,85%,10%30,85%,10%40,85%,10%55,85%,10%85,85%,10%125,85%,10%170,85%,10%220,85%,15%260,85%,15%285,85%,15%330,85%,15%0,0%,10%
0,85%,20%15,85%,20%30,85%,20%40,85%,20%55,85%,20%85,85%,20%125,85%,20%170,85%,15%220,85%,25%260,85%,25%285,85%,25%330,85%,25%0,0%,20%
0,85%,30%15,85%,30%30,85%,30%40,85%,30%55,85%,30%85,85%,30%125,85%,30%170,85%,25%220,85%,40%260,85%,40%285,85%,35%330,85%,35%0,0%,30%
0,85%,40%15,85%,40%30,85%,40%40,85%,40%55,85%,40%85,85%,40%125,85%,40%170,85%,35%220,85%,55%260,85%,55%285,85%,45%330,85%,45%0,0%,40%
0,85%,50%15,85%,50%30,85%,45%40,85%,45%55,85%,45%85,85%,45%125,85%,45%170,85%,40%220,85%,65%260,85%,65%285,85%,55%330,85%,55%0,0%,50%
0,85%,60%15,85%,60%30,85%,55%40,85%,55%55,85%,55%85,85%,55%125,85%,60%170,85%,45%220,85%,75%260,85%,75%285,85%,70%330,85%,65%0,0%,60%
0,85%,70%15,85%,70%30,85%,65%40,85%,65%55,85%,65%85,85%,65%125,85%,75%170,85%,50%220,85%,80%260,85%,80%285,85%,80%330,85%,75%0,0%,70%
0,85%,80%15,85%,80%30,85%,75%40,85%,75%55,85%,75%85,85%,75%125,85%,85%170,85%,75%220,85%,85%260,85%,85%285,85%,85%330,85%,80%0,0%,80%
0,85%,90%15,85%,90%30,85%,85%40,85%,85%55,85%,85%85,85%,85%125,85%,90%170,85%,85%220,85%,90%260,85%,90%285,85%,90%330,85%,90%0,0%,90%