Zurück zum Archiv

Zur Startseite

Farben für Schrift, Hintergrund, Linien oder Rahmen können in der Auszeichnungssprache HTML (HyperText Markup Language) und der Zusatzsprache CSS (Cascading Style Sheets) auf unterschiedliche Arten definiert werden. Grundlage ist aber in jedem Fall das RGB-System mit jeweils 256 Stufen für die drei Primäfarben Rot, Grün und Blau.

In HTML lassen sich Farben nur auf zwei Arten definieren: entweder durch hexadezimal angegebene RGB-Farbwerte oder durch einen von 16 Farbnamen. In CSS sind außerdem hexadezimale RGB-Farbwerte in Kurzschreibweise, dezimal-numerische und dezimal-prozentuale RGB-Farbwerte möglich.

Hexadezimale RGB-Farbwerte (HTML und CSS)

Die hexadezimale Farbdefinition wird mit dem Nummernzeichen # eingeleitet. Dann folgen jeweils zwei Hexadezimalstellen für Rot, Grün und Blau.

Schema: #RRGGBB    Beispiel: #FFA400

Im Beispiel steht also die Hexadezimalzahl FF für Rot; A4 steht für Grün, 00 steht für Blau.

Im Dezimalsystem sind die Positionswerte der Ziffern innerhalb einer Zahl Potenzen zur Basis 10: 100 (Einer), 101 (Zehner), 102 (Hunderter) usw. Im Hexadezimalsystem sind es dagegen Potenzen zur Basis 16: 160 (Einer), 161 (Sechzehner), 162 (Zweihundertsechsundfünfziger) usw. Jede Stelle einer Dezimalzahl kann 10 unterschiedliche Zustände (Zahlenwerte) annehmen; deshalb gibt es zehn Ziffernzeichen (0, 1, 2, ..., 9). Im Hexadezimalsystem kann dagegen jede Stelle 16 unterschiedliche Zustände annehmen; entsprechend sind 16 unterschiedliche Ziffernzeichen erforderlich. Zusätzlich zu den Ziffern von 0 bis 9 werden deshalb die Buchstaben von A bis F als Ziffernzeichen verwendet.

A  entspricht dezimal 10
B  entspricht dezimal 11
C  entspricht dezimal 12
D  entspricht dezimal 13
E  entspricht dezimal 14
F  entspricht dezimal 15

In der Mathematik werden normalerweise Großbuchstaben als Hexadezimalziffern benutzt. In HTML und CSS sind sowohl Groß- als auch Kleinbuchstaben erlaubt, also zum Beispiel:

#FFA400  oder  #ffa400

Die Dezimalzahlen von 0 bis 255 lassen sich leicht in Hexadezimalzahlen umwandeln, da sich höchstens zwei Hexadezimalstellen ergeben. Die Dezimalzahl wird durch 16 dividiert; das ganzzahlige Divisionsergebnis entspricht der linken Hexadezimalstelle (Sechzehner), der Divisionsrest entspricht der rechten Hexadezimalstelle (Einer). Einige Beispiele:

Dezimalzahl	Rechenweg	Hexadezimalzahl
164	164 : 16 = 10 Rest 4	A4
255	255 : 16 = 15 Rest 15	FF
128	128 : 16 = 8 Rest 0	80
13	13 : 16 = 0 Rest 13	0D

Auch die umgekehrte Umwandlung ist kein Problem: Der Dezimalwert der linken Stelle wird mit 16 multipliziert und zum Dezimalwert der rechten Stelle addiert. Beispiele:

Hexadezimalzahl	Rechenweg	Dezimalzahl
A4	10 ∙ 16 + 4 =	164
FF	15 ∙ 16 + 15 =	255
80	8 ∙ 16 + 0 =	128

Hexadezimale RGB-Farbwerte, Kurzschreibweise (nur CSS)

Wenn alle drei Farbwerte aus jeweils zwei gleichen Ziffern bestehen, kann die Farbdefinition in CSS verkürzt werden.

Beispiel: #cc00ff    CSS-Kurzschreibweise: #c0f

Dezimal-numerische RGB-Farbwerte (nur CSS)

Farbdefinitionen mit dezimalen RGB-Farbwerten werden in CSS mit der Zeichenfolge rgb eingeleitet. Die RGB-Farbwerte stehen in runden Klammern und sind durch Kommas voneinander getrennt. Beispiele:

rgb(255,164,0)   rgb(64,0,255)   rgb(0,128,0)

Dezimal-prozentuale RGB-Farbwerte (nur CSS)

RGB-Farbwerte können in CSS auch prozentual angegeben werden. Beispiele:

rgb(100%,64%,0%)   rgb(25%,0%,100%)   rgb(0%,50%,0%)

Um numerische RGB-Farbwerte in prozentuale umzuwandeln, werden sie durch 255 diviert und mit 100 % multipliziert. Das Ergebnis wird ggf. ganzzahlig gerundet. Beispiel: rgb(200,120,240)

200 : 255 ∙ 100 % = 78 %
120 : 255 ∙ 100 % = 47 %
240 : 255 ∙ 100 % = 94 %    Lösung:  rgb(78%,47%,94%)

Farbnamen (HTML und CSS)

Anstelle von RGB-Farbwerten kann ein Farbname angegeben werden. HTML und CSS stellen allerdings nur 16 Farbnamen zur Auswahl. Es gibt zwar noch 120 weitere Farbnamen, die von neueren Browsern in der Regel korrekt interpretiert werden; sie gehören aber nicht zum HTML- oder CSS-Standard. Die Übersicht zeigt die 16 Farbnamen in alphabetischer Reihenfolge mit den entsprechenden hexadezimalen und dezimalen Notierungen.

	aqua	#00ffff	rgb(0,255,255)
	black	#000000	rgb(0,0,0)
	blue	#0000ff	rgb(0,0,255)
	fuchsia	#ff00ff	rgb(255,0,255)
	gray	#808080	rgb(128,128,128)
	green	#008000	rgb(0,128,0)
	lime	#00ff00	rgb(0,255,0)
	maroon	#800000	rgb(128,0,0)
	navy	#000080	rgb(0,0,128)
	olive	#808000	rgb(128,128,0)
	purple	#800080	rgb(128,0,128)
	red	#ff0000	rgb(255,0,0)
	silver	#c0c0c0	rgb(192,192,192)
	teal	#008080	rgb(0,128,128)
	white	#ffffff	rgb(255,255,255)
	yellow	#ffff00	rgb(255,255,0)

Übungsaufgabe

Ergänzen Sie bitte die folgende Übersicht.

hexadezimal	hex. kurz	dezimal	prozentual
#9900cc	#90c	rgb(153,0,204)	rgb(60%,0%,80%)
#009933
	#e72
		rgb(120,200,80)
			rgb(80%,40%,0%)

Lösung: Markieren Sie bitte die graue Fläche.

hexadezimal	hex. kurz	dezimal	prozentual
#9900cc	#90c	rgb(153,0,204)	rgb(60%,0%,80%)
#009933	#093	rgb(0,153,51)	rgb(0%,60%,20%)
#ee7722	#e72	rgb(238,119,34)	rgb(93%,47%,13%)
#78c850	–	rgb(120,200,80)	rgb(47%,78%,31%)
#cc6600	#c60	rgb(204,102,0)	rgb(80%,40%,0%)

Zurück zum Archiv

Zur Startseite