Farben definieren - Hexadezimalangaben

Wie früher mit den Wasserfarben müssen wir bei der Homepageerstellung unsere Farben selber mischen, dabei stehen uns allerdings nur 3 Farben zur Verfügung. Rot, Grün und Blau. Wir müssen nun angeben wie intensiv welche Farbe leuchtet, wir machen das mit Hilfe des RGB-Schemas.

Am Besten lässt sich immer alles an einem Beispiel erklären, nehmen wir die Farbe Rot, sie wird wie folgt definiert:

#ff0000

RGB Farbangabe

Die Farbangabe ist in 3 Bereiche aufgeteilt (siehe Grafik rechts). Jeder dieser Bereiche bestimmt die Intensivität einer der drei Farben. Die Werte, welche wir den einzelnen Farben zuweisen werden im Hexadezimalsystem angegeben. Das Hexadezimalsystem nimmt als Basis die Zahl 16 und kennt die Zahlen von 10 bis 15 nur als Buchstaben (a bis f). Hier ein kleines Beispiel wir man Dezimalzahlen in Hexadezimalzahlen umwandelt:

Dezimalzahl in Hexadezimalzahl umrechnen

Die Dezimalzahl wird durch 16 geteilt, der ganzzahlige Wert, durch den die Zahl teilbar ist wird notiert. Mit dem Rest der Übrig bleibt wird das gleiche wiederholt, das ganze solange bis nichts mehr geht (siehe unten).

243 : 16 = 15 Rest 3    (Wir merken uns f, da das 15 im Hexadezimalsystem entspricht)
3 : 16 = 0 Rest 3      (Wir merken uns 3)

Das was wir uns gemerkt haben (vom letzten Ergebnis ab) ist unsere gesuchte Zahl im Hexadezimalsystem. 243(d) = 3f(h)

RGB Farbangabe

Dezimal	Hexadezimal
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	a
11	b
12	c
13	d
14	e
15	f
16	10
17	11

Daraus folgt, dass die Zahl 0 die niedrigste, und der Buchstabe f den höchsten Wert darstellt.
26(d) = 1a(h) bis hin zu 255(d) = ff(h)
Das bedeutet, dass bei unserem obengenannten Beispiel der Wert für Rot maximal ist (ff) und Grün und Blau den Wert 0 haben, so entsteht die Rote Farbe.

Schwarz

#000000

Weiß

#fffffff

Rot

#ff0000

Grün

#00ff00

Blau

#0000ff

Hellgrau

#aaaaaa

Dunkelgrau

#333333

So geht das beliebig weiter, aufs richtige Mischungsverhältnis kommt es an. Jede Kombination ist möglich.

Auch bei der Farbangabe greifen wir auf CSS zurück.

Roter Absatz:

<p style="color:#ff0000">Roter Text</p>

Grüner Link:

<a style="color:#00ff00">Grüner Link</a>

Dunkelgraue Schrift in der CSS Klasse "content" in einem externen Stylesheet definiert:

.content{
	 color:#424242;
}

Schwarze Schrift und weiße Hintergrundfarbe im gesamten body der Seite. Wieder in einem externen Stylesheet definiert.

* body {
		color : #000000;
		background-color : #ffffff;

}

zurück