CSS Farbangaben

Neben der Möglichkeit einen Farbnamen zu verwenden, gibt es noch vier weitere Möglichkeiten einen Farbwert zu definieren. Diese beziehen sich alle auf ein additives Mischsystem (Licht).

Hexadezimal

Die drei Farbanteile Rot, Grün und Blau werden in der Reihenfolge mit je zwei Stellen einer Hexidezimalzahl (0-f) festgelegt. Dafür muss ganz vorne eine Raute geschrieben werden (Additives Mischsystem). Mit diesem System können ca. 16,7 Mio Farben beschrieben werden. Beispiel:
#ff0000 (rot), #000000 (schwarz), #ffff00 (gelb)

Es dürfen auch nur zwei Stellen angegen werden, wobei der Browser diesen Wert dann einfach verdoppelt. Beispiel: #f8a wird zu #ff88aa

rgb(a)

Die drei Farbanteile Rot, Grün und Blau werden in der Reihenfolge mit je einer Zahl von 0 bis 255 festgelegt. Dazu muss am Anfang "rgb" stehen, und die Zahlen mit Komma getrennt dahinter in Klammern. Damit können ca. 16,6 Mio Farben beschrieben werden. Beispiel:
rgb(255,0,0) für rot

Hierbei kann noch ein vierter Wert hinzugefügt werden, welcher den Alphawert (Transparenz) beschreibt, und kann den Wert von 0 bis 1 annehmen (Kommazahle mit Punkt möglich). Beispiel:
rgba(0,0,255,0.5) für blau mit 50% Deckkraft

hsl(a)

HSL steht für Hue, Saturation und Luminance (Farbton, Sättigung, Helligkeit), und müssen in der Reihenfolge angegeben werden. ähnlich wie bei rgb. Allerdings mit anderen Wertebereich. Der Farbton darf einen Wert von 0 bis 360 annehmen (Farbkreis), und die beiden anderen sind in Prozent. Beispiel:
hsl(240,100%,50%) für normales blau

Es kann wie bei rgba auch ein vierter Alphawert angegeben werden. Warum hsl? Die Feinjustierung (z.B. Helligkeitswert ändern) geht hiermit schneller, da nur ein Wert geändert werden muss. Nachteilig ist aber das auffinden der Farben (gewöhnungssache).

CodeZone

CSS

HTML

Auf Testzone anwenden