Farben definieren

1 – HTML 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:

Farbcode für Rot:
#ff0000

2 – Erklärung RGB-Schema

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).

Vielleicht interessiert dich hier an der Stelle, wie du mit HTML & CSS Kunst und Formen erstellen kannst.

3 – Hex Farben berechnen

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 3; dies entspricht 3 x 16 hoch 0)*
15 : 16 = 0 Rest 15 (Wir merken uns f; dies entspricht 15 x 16 hoch 1)
Also: 243(d) = f3(h)

(*Hinweis: Hier war zuvor ein Fehler. Vielen Dank Hr. J. Niemann für die Korrektur)

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

4 – Hex Farben berechnen

Dezimal Hexadezimal
0 0
1 1
2 2
9 9
10 a
11 b
12 c
13 d
14 e
15 f

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.

5- Beispielfarben

#000000 /*Schwarz*/

#fffffff /*Weiß*/

#ff0000 /*Rot*/

#00ff00 /*Grün*/

#0000ff /*Blau*/

#aaaaaa /*Hellgrau*/

#333333 /*Dunkelgrau*/

So geht das beliebig weiter, aufs richtige Mischungsverhältnis kommt es an. Jede Kombination ist möglich. Je größer die Zahlen werden, desto heller.

Spannendes Tutorial: Colorpicker mit JavaScript programmieren.

6 – 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;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen