CSS 2.1 ::Grundlegendes

Farbwerte

Die Farbe ist der Ort, wo unser Gehirn und das Weltall sich begegnen. Darum erscheint sie den wahren Malern durchaus dramatisch.

Paul Cézanne, (1839 - 1906), französischer Maler

CSS bietet eine relativ große Flexibilität bei der Deklarierung von Farben. Wir wollen aber hier zunächst mit zwei Sätzen auf die Grundlagen der Farbenlehre eingehen.

Farben für Websites werden mit Hilfe der sogenannten additiven Farbmischung definiert. Darin sind alle Farben aus Anteilen der drei Komponenten Rot, Grün und Blau zusammen gesetzt, die deshalb auch RGB-Farbmischung genannt wird (        ). In der CSS-Farbdeklaration wird die Größe jedes dieser Anteile als Zahlenwert auf einer 256-stufigen Skala festgelegt. Damit sind insgesamt 2563 = 16 777 216 Farben möglich.

Farbwerte sind im Bereich von 0 bis 255 definiert. Für alle Angaben, die außerhalb dieses definierten Bereiches liegen, wird der nächste gültige Wert eingesetzt: 0 für negative Werte und der Maximalwert 255 bzw. ff bzw. 100% für Deklarationen, die oberhalb des definierten Bereichs liegen. Man sollte deshalb entsprechende Sicherungen einbauen, wenn man Farbwerte rechnerisch per Script bestimmt.

In der Druckindustrie wird normalerweise mit der negativen Farbmischung gearbeitet, bei der die Farben aus den Anteilen Gelb, Magenta, Cyan und Schwarz (          ) entstehen. Dennoch müssen wir für CSS-Deklarationen aller Medien die additive Farbmischung verwenden, auch für print. Der Grund dafür ist historischer Art: Websites wurden ursprünglich nur auf Bildschirmen ausgegeben, bis zur Definition von Druck-Stylesheets oder gar zur Webzugänglichkeit war damals noch ein weiter Weg.

Alternativen

Mit CSS haben wir fünf verschiedene Möglichkeiten, Farben zu deklarieren:

Hexadezimalangabe:

Festlegung der einzelnen Farbanteile als Hexadezimalwerte im Bereich von 00 bis ff. Dies ist die seit Anbeginn übliche Art der Farbendarstellung in HTML, sie wird durch ein vorangestelltes Gatterzeichen markiert.

Der Wert ff ist Teil des Hexadezimalsystems. Im Unterschied zum Dezimalsystem, das auf dem Wert 10 basiert, ist der Ausgangswert für das Hexadezimalsystem der Wert 16. Es enthält zusätzlich die Zeichen 'a' bis 'f'.

Dezimal: 0123345678
Hexadezimal: 0123345678
Dezimal: 910111213141516
Hexadezimal: 9abcdef10
Dezimal: 17....102....255
Hexadezimal: 11....66....ff

Syntax: { eigenschaft: #rrggbb; }

Beispiel:

{ color : #fa124c; }

Hexadezimal-Kurzangabe:

Wenn die zwei für eine Farbkomponente stehenden Zeichen gleich sind, können sie für die Notierung zu einem Zeichen zusammengezogen werden, z. B.: #456 entspricht #445566. Der Browser rechnet diese Werte dann wieder in die sechsstelligen Werte um. Mehr über diese Kombinationen am Ende dieser Seite, unter dem Stichwort 'websichere Farben'.

Syntax: { eigenschaft: #rgb; }

Beispiel:

{ background : #fd3; }

Prozentangabe:

Hier sind die einzelnen Farbanteile als Prozentwerte im Bereich von 0.0% bis 100.0% definiert. Das %-Zeichen muss hinter jedem Wert erscheinen, Nachkommastellen sind erlaubt. Die Prozentwerte werden vom Browser zur Darstellung in hexadezimale Angaben umgerechnet. Der Sprung von einem Farbwert zum nächsten entspricht etwa 0.4%, kleinere Unterschiede werden gerundet.

Syntax: { eigenschaft: rgb(rrr.r%,ggg.g%,bbb.b%); }
oder { eigenschaft: rgb(rrr%,ggg%,bbb%); }

Beispiel:

{ color : rgb(33.3%,66.7%,100.0%); } { background: rgb(80%,40%,20%); }

Dezimalangabe:

Direkte Eingabe der gewünschten RGB-Werte in Dezimalform. Ebenso wie bei der sechsstelligen hexadezimalen Angabe ist hier keinerlei Umrechnung erforderlich. CSS 2.1 macht keine Angaben darüber, ob Prozentwerte und Dezimalwerte in einer Deklaration gemischt werden dürfen. Deshalb sollte man nicht davon ausgehen, dass alle Browser solche Deklarationen darstellen können.

Syntax: { eigenschaft: rgb(rrr,ggg,bbb); }

Beispiel:

{ background-color : rgb(128,2,67); }

Farbnamen oder Schlüsselworte:

Farbnamen sind fest mit einer bestimmten RGB-Kombination verbundene Bezeichnungen, die die Farbwirkung der Kombination praktisch 'bildlich' beschreiben. Sie werden ohne Anführungszeichen und ohne ein vorangestelltes Erkennungszeichen verwendet.

CSS 2 kennt nur die Farbnamen der 16 Grundfarben, die in CSS 2.1 um den Wert orange erweitert sind. Das CSS-3-Modul 'Color' wird auch die X11-Farbnamen als Teil des Standards enthalten. Dort heißen sie allerdings SVG-Farben, da die verwendeten Schlüsselworte an die Werte der Norm SVG 1.0 angepasst wurden.

Syntax: { eigenschaft: farbname; }

Beispiel:

{ color : navy; }

Die folgenden Tabellen sind als Browsertest ausgelegt. Sie enthalten alle Farbnamen, die in CSS 2.1 und SVG 1.0 definiert sind. Die Hintergrundfarben der linken Spalte sind durch den angegebenen Farbnamen deklariert, der Hintergrund der zweiten Spalte wurde durch die dezimale Farbangabe festgelegt. Wenn Ihr Browser alle Farbnamen korrekt unterstützt, ist die Farbdarstellung in beiden Spalten gleich.

Grundfarben nach CSS 2.1:

Darstellung
nach Farbname
Darstellung
nach RGB Wert
Farbname Hexadezimal Dezimal
maroon #800000 128,0,0
red #ff0000 255,0,0
orange (ab CSS 2.1) #ffa500 255,165,0
yellow #ffff00 255,255,0
olive #808000 128,128,0
green #008000 0,128,0
lime #00ff00 0,255,0
white #ffffff 255,255,255
fuchsia #ff00ff 255,0,255
purple #800080 128,0,128
navy #000080 0,0,128
blue #0000ff 0,0,255
aqua #00ffff 0,255,255
teal #008080 0,128,128
gray #808080 128,128,128
silver #c0c0c0 192,192,192
black #000000 0,0,0

Farbbezeichnungen nach SVG-1.0

Darstellung
nach Farbname
Darstellung
nach RGB Wert
Farbname Hexadezimal Dezimal
aliceblue #f0f8ff 240,248,255
antiquewhite #faebd7 250,235,215
aqua #00ffff 0,255,255
aquamarine #7fffd4 127,255,212
azure #f0ffff 240,255,255
beige #f5f5dc 245,245,220
bisque #ffe4c4 255,228,196
black #000000 0,0,0
blanchedalmond #ffebcd 255,235,205
blue #0000ff 0,0,255
blueviolet #8a2be2 138,43,226
brown #a52a2a 165,42,42
burlywood #deb887 222,184,135
cadetblue #5f9ea0 95,158,160
chartreuse #7fff00 127,255,0
chocolate #d2691e 210,105,30
coral #ff7f50 255,127,80
cornflowerblue #6495ed 100,149,237
cornsilk #fff8dc 255,248,220
crimson #dc143c 220,20,60
cyan #00ffff 0,255,255
darkblue #00008b 0,0,139
darkcyan #008b8b 0,139,139
darkgoldenrod #b8860b 184,134,11
darkgray #a9a9a9 169,169,169
darkgreen #006400 0,100,0
darkgrey #a9a9a9 169,169,169
darkkhaki #bdb76b 189,183,107
darkmagenta #8b008b 139,0,139
darkolivegreen #556b2f 85,107,47
darkorange #ff8c00 255,140,0
darkorchid #9932cc 153,50,204
darkred #8b0000 139,0,0
darksalmon #e9967a 233,150,122
darkseagreen #8fbc8f 143,188,143
darkslateblue #483d8b 72,61,139
darkslategray #2f4f4f 47,79,79
darkslategrey #2f4f4f 47,79,79
darkturquoise #00ced1 0,206,209
darkviolet #9400d3 148,0,211
deeppink #ff1493 255,20,147
deepskyblue #00bfff 0,191,255
dimgray #696969 105,105,105
dimgrey #696969 105,105,105
dodgerblue #1e90ff 30,144,255
firebrick #b22222 178,34,34
floralwhite #fffaf0 255,250,240
forestgreen #228b22 34,139,34
fuchsia #ff00ff 255,0,255
gainsboro #dcdcdc 220,220,220
ghostwhite #f8f8ff 248,248,255
gold #ffd700 255,215,0
goldenrod #daa520 218,165,32
gray #808080 128,128,128
green #008000 0,128,0
greenyellow #adff2f 173,255,47
grey #808080 128,128,128
honeydew #f0fff0 240,255,240
hotpink #ff69b4 255,105,180
indianred #cd5c5c 205,92,92
indigo #4b0082 75,0,130
ivory #fffff0 255,255,240
khaki #f0e68c 240,230,140
lavender #e6e6fa 230,230,250
lavenderblush #fff0f5 255,240,245
lawngreen #7cfc00 124,252,0
lemonchiffon #fffacd 255,250,205
lightblue #ap8e6 173,216,230
lightcoral #f08080 240,128,128
lightcyan #e0ffff 224,255,255
lightgoldenrodyellow #fafad2 250,250,210
lightgray #d3d3d3 211,211,211
lightgreen #90ee90 144,238,144
lightgrey #d3d3d3 211,211,211
lightpink #ffb6c1 255,182,193
lightsalmon #ffa07a 255,160,122
lightseagreen #20b2aa 32,178,170
lightskyblue #87cefa 135,206,250
lightslategray #778899 119,136,153
lightslategrey #778899 119,136,153
lightsteelblue #b0c4de 176,196,222
lightyellow #ffffe0 255,255,224
lime #00ff00 0,255,0
limegreen #32cd32 50,205,50
linen #faf0e6 250,240,230
magenta #ff00ff 255,0,255
maroon #800000 128,0,0
mediumaquamarine #66cdaa 102,205,170
mediumblue #0000cd 0,0,205
mediumorchid #ba55d3 186,85,211
mediumpurple #9370db 147,112,219
mediumseagreen #3cb371 60,179,113
mediumslateblue #7b68ee 123,104,238
mediumspringgreen #00fa9a 0,250,154
mediumturquoise #48d1cc 72,209,204
mediumvioletred #c71585 199,21,133
midnightblue #191970 25,25,112
mintcream #f5fffa 245,255,250
mistyrose #ffe4e1 255,228,225
moccasin #ffe4b5 255,228,181
navajowhite #ffdead 255,222,173
navy #000080 0,0,128
oldlace #fdf5e6 253,245,230
olive #808000 128,128,0
olivedrab #6b8e23 107,142,35
orange #ffa500 255,165,0
orangered #ff4500 255,69,0
orchid #da70d6 218,112,214
palegoldenrod #eee8aa 238,232,170
palegreen #98fb98 152,251,152
paleturquoise #afeeee 175,238,238
palevioletred #db7093 219,112,147
papayawhip #ffefd5 255,239,213
peachpuff #ffdab9 255,218,185
peru #cd853f 205,133,63
pink #ffc0cb 255,192,203
plum #pa0p 221,160,221
powderblue #b0e0e6 176,224,230
purple #800080 128,0,128
red #ff0000 255,0,0
rosybrown #bc8f8f 188,143,143
royalblue #4169e1 65,105,225
saddlebrown #8b4513 139,69,19
salmon #fa8072 250,128,114
sandybrown #f4a460 244,164,96
seagreen #2e8b57 46,139,87
seashell #fff5ee 255,245,238
sienna #a0522d 160,82,45
silver #c0c0c0 192,192,192
skyblue #87ceeb 135,206,235
slateblue #6a5acd 106,90,205
slategray #708090 112,128,144
slategrey #708090 112,128,144
snow #fffafa 255,250,250
springgreen #00ff7f 0,255,127
steelblue #4682b4 70,130,180
tan #d2b48c 210,180,140
teal #008080 0,128,128
thistle #d8bfd8 216,191,216
tomato #ff6347 255,99,71
turquoise #40e0d0 64,224,208
violet #ee82ee 238,130,238
wheat #f5deb3 245,222,179
white #ffffff 255,255,255
whitesmoke #f5f5f5 245,245,245
yellow #ffff00 255,255,0
yellowgreen #9acd32 154,205,50

Anwenderdefinierte Farbnamen

Neben den oben genannten Namen für Farben gibt es Bezeichnungen, die sich auf die Anwenderoberfläche beziehen. Diese sind nicht an bestimmte RGB-Werte gekoppelt, sondern übernehmen die Farbwerte, die der Nutzer für bestimmte Teile seiner Oberfläche gesetzt hat. Damit lässt sich die Farbgebung einer Website individuell an die vom Anwender definierten Gegebenheiten anpassen.

Die möglichen Werte sind selbsterklärend, allerdings können nicht alle Farbwerte von allen Browsern wiedergegeben werden.

Die folgende Tabelle enthält alle durch den Anwender definierbaren Farbnamen, die in CSS 2 bzw. CSS 2.1 definiert sind. Die Hintergrundfarben der linken Spalte sind durch den in der rechten Spalte angegebenen Farbnamen deklariert. Wenn ein Streifenmuster erscheint, wie in der ersten Reihe als Beispiel gezeigt, dann unterstützt Ihr Browser den entsprechenden Wert nicht.

Achtung: die anwenderdefinierten Farbnamen werden von CSS 3 an als 'deprecated', d. h. unerwünscht, eingestuft und sind jetzt bereits im W3C CSS Validation Service so gekennzeichnet. Das W3C benutzt diese Definition als Vorstufe zur endgültigen Entfernung aus dem Standard.

Anwenderdefinierte Farben nach CSS 2.1

Farbdarstellung Farbname
(Streifenmuster als Beispiel)
activeborder
activecaption
appworkspace
background
buttonface
buttonhighlight
buttonshadow
buttontext
captiontext
graytext
highlight
highlighttext
inactiveborder
inactivecaption
inactivecaptiontext
infobackground
infotext
menu
menutext
scrollbar
threeparkshadow
threedface
threedhighlight
threedlightshadow
threedshadow
window
windowframe
windowtext

'Websichere' Farben

Die sogenannten websicheren Farben sind heute im Grunde genommen eine Sache der Vergangenheit. Hier sollen sie nur noch der Vollständigkeit halber mit erwähnt werden. Entwickelt wurde diese 'browser-safe'-Palette in den frühen Tagen des Web. Damals lag die Farbauflösung der Browser bei 256 Farben, die dazu noch zwischen Windows-PC und Mac leicht differierte. Die websichere Palette sollte die Antwort auf dieses Problem sein.

In ihr können die RGB-Komponenten nur jeweils 6 Werte annehmen: 00, 33, 66, 99, cc und ff. Damit ergaben sich 216 mögliche Farben. Eine Übersicht gibt die 216 Web Safe Color Chart.

Eine erweiterte Palette wird unter dem Titel More Crayons vorgestellt. Hier werden die RGB-Komponenten auf die Werte der Hexadezimal-Kurzangabe beschränkt, so dass sich 4096 verschiedene Farben ergeben. Aber auch das ist heute bereits überholt.
TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

© Copyright All Contents 2002-2017 K. Langenberg.
Commercial Use prohibited.


Notizen: