CSS3: color (Farben) mit Farbtabellen

Mit CSS3 bekommen Webdesigner neue Möglichkeiten, um Farben zu definieren. Dadurch gibt es natürlich nicht schlagartig mehr Farben, aber sie können je nach Einsatzgebiet einfacher verwendet werden. Hinzu kommt Alphatransparenz, die ansprechende Transparenzeffekte ohne den Einsatz von Grafiken ermöglicht. Dieser Beitrag erklärt die neuen Farbnotationen und liefert einige Beispiele und Farbtabellen.

Bisher wurden Farben entweder über die HTML4-Keywords, die SVG- bzw. X11-Keywords oder als hexadezimale RGB-Angaben definiert. Während die möglichen Farben via Keyword natürlich recht begrenzt sind, ist die hexadezimale RGB-Angabe (z.B. #FF0000 oder #F00 als Kurzfrom für rot) kaum intuitiv. Zunächst muss das richtige Mischverhältnis von rot, grün und blau gefunden werden, danach müssen die Werte noch in hexadezimale Werte umgerechnet werden. Dank CSS3 wird dies aber alles einfacher. Die hier vorgestellten Methoden zur Farbdefinition werden, abgesehen von Einschränkungen beim IE, bereits von allen modernen Browsern unterstützt.

RGB: Angabe in Dezimalzahlen und Prozent

Wie bereits erwähnt, mussten Farben bisher in hexadezimalen Werten angegeben werden. Mit der rgb-Funktion können Farben nun aber auch über eine Ganzzahl von 0-255 oder eine Prozentangabe von 0-100 definiert werden. Somit hätten wir nun folgende Möglichkeiten, die Farbe gelb darzustellen:

[cc lang=”css”]
color:#FFFF00; // klassische, hexadezimale Angabe #RRGGBB
color:#FF0; // klassiche, hexadezimale Angabe #RGB
color:yellow; // klassiche Auswahl per Keyword
color:rgb(255,255,0); // Neue Angabe via rgb() und Dezimalzahlen
color:rgb(100%,100%,0%); // Neue Angabe via rgb() und Prozentwerten
[/cc]

Das Ergebnis ist jeweils gleich (hier im Beispiel mit background-color):

Live-Demo
#FFFF00
#FF0
yellow
rgb(255,255,0)
rgb(100%,100%,0%)

HSL: Hue (Farbton), Saturation (Sättigung), Luminance (Helligkeit)

Deutlich intuitiver als die Angabe von Farben im RGB-Format ist die HSL-Variante. Dabei wird die Farbe über die drei Werte Farbton, Sättigung und Helligkeit definiert. Unter Farbton versteht man die Auswahl der Farbe aus einem Farbkreis durch die Angabe eines Wertes in Grad (°) von 0-359. Die folgende Skala zeigt die Verteilung der Farbtöne:

Hue-Scale - Farbton-Skala
Bildquelle: Wikipedia; gemeinfrei.

Wie es sich für einen Kreis “gehört” entspricht also der Wert 360 dem Wert 0 (=rot). Gelb liegt bei 60°, grün bei 120° und blau bei 240°. Somit kann recht leicht ein Farbton ausgewählt werden, die Angabe erfolgt ohne Einheit. Nun kann die Farbe mit den Angaben für Sättigung und Helligkeit weiter variiert werden. Beide Werte werden in Prozent von 0-100 angegeben. Eine Sättigung von 100% zeigt die gewünschte Farbe wie im Farbkreis gezeigt. Wird sie hingegen auf 0% gesenkt, dann erhält man nur noch grau. Die Helligkeit entspricht mit 50% der normalen Helligkeit der Farbe, 0% führt zu schwarz, 100% zu weiß. Mit folgender Demo kann der Effekt der einzelnen Werte ausprobiert werden:

Live-Demo
H: (0-360°)
S: % (0-100%)
L: % (0-100%)
hsl(0,100%,50%)

Beispiele
Hier als Beispiele einmal die Farben des Farbkreises in 30°-Schritten (100% Sätting, 50% Helligkeit):

#FF0000 hsl(0,100%,50%) red
#FF7F00 hsl(28,100%,50%)
#FFFF00 hsl(60,100%,50%) yellow
#7FFF00 hsl(90,100%,50%) chartreuse
#00FF00 hsl(120,100%,50%) lime
#00FF7F hsl(150,100%,50%) springgreen
#00FFFE hsl(180,100%,50%)
#007FFF hsl(210,100%,50%)
#0000FF hsl(240,100%,50%) blue
#7F00FF hsl(270,100%,50%)
#FE00FF hsl(300,100%,50%)
#FF007F hsl(330,100%,50%)
#FF0000 red hsl(360,100%,50%)

Alphatransparenz

Ein ganz besonderes Schmankerl der neuen Farbfunktionen ist die direkte Unterstützung von Alphatransparenz, die bisher nur mit Grafiken zu realisieren waren. Um eine transparente Farbe zu definieren, ersetzen wir rgb() durch rgba() bzw. hsl() durch hsla() und ergänzen einen vierten Parameter in Form des Alphawertes zwischen 0 und 1. Wird 1 angegeben, dann ist die Farbe “massiv”, also gar nicht transparent, bei einer 0 wird die Farbe vollständig transparent, also unsichtbar. Rot mit 50% transparenz würde also so aussehen:

[cc lang=”css”]
color:rgba(255,0,0,0.5); // Alphatransparenz mit RGB und Dezimalzahlen
color:rgba(100%,0%,0%,0.5); // Alphatransparenz mit RGB und Prozentwerten
color:hsla(0,100%,50%,0.5); // Alphatransparenz mit HSL
[/cc]

Im folgenden Beispiel lege ich DIVs mit obigen Angaben als background-color über das gezeigte Bild der Farbskala:

Live-Demo
rgba(255,0,0,0.5)
rgba(100%,0%,0%,0.5)
hsla(0,100%,50%,0.5)

HTML4-Farben

Hier eine Liste der in HTML4 vordefinierten Farben:

#00FFFF aqua
#000000 black
#0000FF blue
#FF00FF fuchsia
#808080 gray
#008000 green
#00FF00 lime
#800000 maroon
#000080 navy
#808000 olive
#800080 purple
#FF0000 red
#C0C0C0 silver
#008080 teal
#FFFFFF white
#FFFF00 yellow

X11-Farben (SVG)

Abschließend die definierten X11-Farben:

#F0F8FF aliceblue
#FAEBD7 antiquewhite
#00FFFF aqua
#7FFFD4 aquamarine
#F0FFFF azure
#F5F5DC beige
#FFE4C4 bisque
#000000 black
#FFEBCD blanchedalmond
#0000FF blue
#8A2BE2 blueviolet
#A52A2A brown
#DEB887 burlywood
#5F9EA0 cadetblue
#7FFF00 chartreuse
#D2691E chocolate
#FF7F50 coral
#6495ED cornflowerblue
#FFF8DC cornsilk
#DC143C crimson
#00FFFF cyan
#00008B darkblue
#008B8B darkcyan
#B8860B darkgoldenrod
#A9A9A9 darkgray
#006400 darkgreen
#A9A9A9 darkgrey
#BDB76B darkkhaki
#8B008B darkmagenta
#556B2F darkolivegreen
#FF8C00 darkorange
#9932CC darkorchid
#8B0000 darkred
#E9967A darksalmon
#8FBC8F darkseagreen
#483D8B darkslateblue
#2F4F4F darkslategray
#2F4F4F darkslategrey
#00CED1 darkturquoise
#9400D3 darkviolet
#FF1493 deeppink
#00BFFF deepskyblue
#696969 dimgray
#696969 dimgrey
#1E90FF dodgerblue
#B22222 firebrick
#FFFAF0 floralwhite
#228B22 forestgreen
#FF00FF fuchsia
#DCDCDC gainsboro
#F8F8FF ghostwhite
#FFD700 gold
#DAA520 goldenrod
#808080 gray
#008000 green
#ADFF2F greenyellow
#808080 grey
#F0FFF0 honeydew
#FF69B4 hotpink
#CD5C5C indianred
#4B0082 indigo
#FFFFF0 ivory
#F0E68C khaki
#E6E6FA lavender
#FFF0F5 lavenderblush
#7CFC00 lawngreen
#FFFACD lemonchiffon
#ADD8E6 lightblue
#F08080 lightcoral
#E0FFFF lightcyan
#FAFAD2 lightgoldenrodyellow
#D3D3D3 lightgray
#90EE90 lightgreen
#D3D3D3 lightgrey
#FFB6C1 lightpink
#FFA07A lightsalmon
#20B2AA lightseagreen
#87CEFA lightskyblue
#778899 lightslategray
#778899 lightslategrey
#B0C4DE lightsteelblue
#FFFFE0 lightyellow
#00FF00 lime
#32CD32 limegreen
#FAF0E6 linen
#FF00FF magenta
#800000 maroon
#66CDAA mediumaquamarine
#0000CD mediumblue
#BA55D3 mediumorchid
#9370DB mediumpurple
#3CB371 mediumseagreen
#7B68EE mediumslateblue
#00FA9A mediumspringgreen
#48D1CC mediumturquoise
#C71585 mediumvioletred
#191970 midnightblue
#F5FFFA mintcream
#FFE4E1 mistyrose
#FFE4B5 moccasin
#FFDEAD navajowhite
#000080 navy
#FDF5E6 oldlace
#808000 olive
#6B8E23 olivedrab
#FFA500 orange
#FF4500 orangered
#DA70D6 orchid
#EEE8AA palegoldenrod
#98FB98 palegreen
#AFEEEE paleturquoise
#DB7093 palevioletred
#FFEFD5 papayawhip
#FFDAB9 peachpuff
#CD853F peru
#FFC0CB pink
#DDA0DD plum
#B0E0E6 powderblue
#800080 purple
#FF0000 red
#BC8F8F rosybrown
#4169E1 royalblue
#8B4513 saddlebrown
#FA8072 salmon
#F4A460 sandybrown
#2E8B57 seagreen
#FFF5EE seashell
#A0522D sienna
#C0C0C0 silver
#87CEEB skyblue
#6A5ACD slateblue
#708090 slategray
#708090 slategrey
#FFFAFA snow
#00FF7F springgreen
#4682B4 steelblue
#D2B48C tan
#008080 teal
#D8BFD8 thistle
#FF6347 tomato
#40E0D0 turquoise
#EE82EE violet
#F5DEB3 wheat
#FFFFFF white
#F5F5F5 whitesmoke
#FFFF00 yellow
#9ACD32 yellowgreen