Workshop: Farben
Farben kannst Du für Text, Hintergrund, Tabellen, Rahmen, Trennlinien und einiges mehr angeben. Dafür bieten HTML und CSS zwei Methoden: Die Angabe von Farbnamen und die hexadezimale Angabe.
Farbnamen
In HTML 4.0 die 16 Farbnamen Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow festgelegt, die auch in den Stylesheets gültig ist. Es gibt noch weitere Farbnamen, die aber nur von einzelnen Browsern erkannt werden. Weiterhin sind in CSS 2 die 28 Systemfarben activeborder, activecaption, appworkspace, background, buttonface, buttonhighlight, buttonshadow, buttontext, captiontext, graytext, highlight, highlighttext, inactiveborder, inactivecaption, inactivecaptiontext, infobackground, infotext, menu, menutext, scrollbar, threeddarkshadow, threedface, threedhighlight, threedlightshadow, threedshadow, window, windowframe, windowtext festgelegt.
Die beiden folgenden Beispiele zeigen Dir den richtigen Einsatz der Farbnamen.
Dafür ist es egal, ob Du HTML oder CSS verwendest.
Die Syntax sieht für HTML so aus:
,
,
,
,
,
,
<p>Irgendein Text und dieser in <font color="red">rot</font></p>
Der gleiche Absatz mit CSS formatiert würde so aussehen::
,
,
,
,
,
,
<p>Irgendein Text und dieser in <span style="color:red">rot</span></p>
Dieses Beispiel legt für einen Wort die Schriftfarbe rot fest. Dafür wird einfach der standardisierte Farbname red für rot angegeben.
Hexadezimale Angabe von RGB-Werten
Das hexadezimale Zahlensystem ist in der Welt der Programmierer weit verbreitet und wird in HTML und CSS zur Angabe von Farben verwendet. Mit der hexadezimalen Angabe kannst Du aus 16,7 Millionen verschiedene Farbtöne auswählen. Auch wenn diese Methode am Anfang kompliziert aussieht, solltest Du sie bevorzugen, da sie browserunabhängig ist. Die Angabe der sog. RGB-Werte sind absolut und sehen mit jedem Browser gleich aus.
Das hexadezimale Zahlensystem
Zunächst mußt Du den Unterschied zwischen unserem herkömmlichen dezimale und dem hexadezimalen Zahlensystem kennen.
Das dezimale Zahlensystem besteht aus den 10 verschiedenen Ziffern
0-9. Der Wert mehrstelliger Zahlen, wie z.B. 356 errechnet sich so:
3 x 100 + 5 x 10 + 6 = 356.
Das hexadezimale Zahlensystem besteht aus den 16 verschiedenen Ziffern
0-9 und a-f, die für die Werte von 0-15 stehen:
| Hexadezimale Ziffer | Wert |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| A | 10 |
| B | 11 |
| C | 12 |
| D | 13 |
| E | 14 |
| F | 15 |
Der Dezimalwert einer zweistelligen Zahl wie z.B. C6 errechnet sich so:
C x 16 + 6 = 12 x 16 + 6 = 198.
Die kleinste zweistellige Zahl ist 00, die größte ff, die dann nach
F x 16 + F = 15 x 16 + 15 = 255
Sollte Dir dieser Wert bekannt vorkommen, so ist das richtig. Ein Byte hat ebenfalls den maximalen Wert 255.
RGB-Wert
Die Bildschirmfarben setzen sich aus den Grundfarben Rot, Grün und Blau zusammen. Diese mischt Du, in dem Du für jede Grundfarbe einen zweistelligen Wert zwischen 00 und FF (255). Die Angabe erfolgt nach dem Schema RRGGBB. Zwei Stellen für den Rot-Anteil (RR), zwei für Grün (GG) und zwei für Blau (BB). FF für Rot, 0 für Grün und blau ergibt z.B. Rot. Hier ein paar Beispiele:
| 000000 | Rot=0, Grün=0 und Blau=0. Dies ergibt die Farbe schwarz |
| FFFFFF | Rot=255, Grün=255 und Blau=255. Alle Farben haben den maximalen Wert. Das ergibt weiß. |
| 990000 | Rot=153, Grün=0 und Blau=0. Nur Rot hat einen Wert größer 0, also ergibt dies einen Rotton. |
| CCCC00 | Rot=204, Grün=204 und Blau=0. Nur Grün und Rot haben Werte größer 0. Grün und Rot ergeben einen Gelbton. |
Es gibt es 216 sog. sichere Farben. Diese werden auf Windows und Mac-Rechnern richtig angezeigt.
Das folgende Beispiel legt für einen Absatz die Textfarbe auf Rot fest:
,
,
,
,
,
,
<p><font color="#ff0000">Irgendein Text in rot</font></p>
Der gleiche Absatz mit CSS formatiert würde so aussehen::
,
,
,
,
,
,
<p style="color:#ff0000">Irgendein Text in rot</p>
Hexadezimale Werte werden mit einem # eingeleitet. Danach folgen die zweistelligen Werte für die drei Grundfarben Rot, Grün, Blau.
Dezimale Angabe von RGB-Werten in CSS
CSS bietet die Möglichkeit RGB-Werte im Bereich von 0 und 255 und von 0 bis 100% anzugeben. Das folgende Beispiel legt für einen Absatz die Textfarbe auf rot und verwendet dafür die Werte 0 bis 255:
,
,
,
,
,
,
<p><font color="rgb(255,0,0)">Irgendein Text in rot</font></p>
Der gleiche Absatz mit CSS formatiert würde so aussehen::
,
,
,
,
,
,
<p style="color:rgb(255,0,0)">Irgendein Text in rot</p>
Das nächste Beispiel legt für einen Absatz die Hintergrundfarbe auf gelb und verwendet dafür die Werte 0 bis 100%:
,
,
,
,
,
,
<p>Irgendein Text und dieser in <font color="rgb(80%,80%,0)">rot</font></p>
Der gleiche Absatz mit CSS formatiert würde so aussehen::
,
,
,
,
,
,
<p>Irgendein Text und dieser in <span style="color:rgb(80%,80%,0)">rot</span></p>