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:	0	1	2	3	3	4	5	6	7	8
Hexadezimal:	0	1	2	3	3	4	5	6	7	8

Dezimal:	9	10	11	12	13	14	15	16
Hexadezimal:	9	a	b	c	d	e	f	10

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.

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-2023
Commercial Use prohibited.

---

Notizen: