Farbangaben in HTML und XHTML
(Auszug aus "HTML & XHTML ─ kurz & gut" von Jennifer Niederst Robbins)
Da Farben zur Darstellung von (X)HTML gehören, sollten sie mit Cascading Style Sheets und nicht mit HTML-Attributen definiert werden. Das folgende Material dient nur der Vollständigkeit.
Sowohl in (X)HTML als auch in CSS können Farbwerte anhand numerischer Werte oder standardisierter Farbnamen angegeben werden.
RGB-Werte
Die häufigste und genauste Art, eine Farbe zu definieren, geschieht durch die Angabe ihrer numerischen RGB(Rot, Grün, Blau)-Werte. Die RGB-Werte für eine bestimmte Farbe (auf einer Skala von 0 bis 255) lassen sich mit Bildbearbeitungsprogrammen wie Adobe Photoshop ermitteln. Zum Beispiel:
- Rot: 212 Grün: 232 Blau: 119
Um diese Werte als Attributwerte verwenden zu können, müssen sie in ihre hexadezimale (Base-16-)Entsprechung umgewandelt werden. In diesem Beispiel wurden die vorigen Werte durch ihre hexadezimalen Entsprechungen ersetzt:
- Rot: D4 Grün: E8 Blau: 77
In (X)HTML werden diese Werte als Folge von sechs Zeichen angegeben, denen ein #-Symbol vorangestellt wird:
- #D4E877
Die allgemeine Schreibweise lautet:
- #RRGGBB
RR steht für Rot, GG für Grün und BB für Blau, jeweils in hexadezimaler Notation.
Glücklicherweise zeigt Adobe Photoshop die hexadezimalen Werte im unteren Teil des Farbwählers neben dem #-Symbol automatisch an. Der Hex-Wert kann direkt aus dem Farbwähler kopiert werden und direkt in ein Stylesheet oder HTML-Dokument eingefügt werden.
Wenn Sie ein Bildbearbeitungsprogramm verwenden, das keine hexadezimalen Farbwerte anzeigt, finden Sie im Web bergeweise Konvertierungsprogramme. Suchen Sie einfach nach »RGB to Hex« oder verwenden Sie gleich einen der vielen webbasierten Farbwähler.
Standardisierte Farbnamen
Farben können auch anhand vordefinierter Farbnamen angegeben werden. Die Schreibweise für Farbnamen ist ziemlich einfach:
<body link="navy">
HTML 4.01 und XHTML 1.0 enthalten 16 gültige Farbnamen (wobei viele Browser den gesamten CSS3-Satz unterstützen). Hier die Namen und die entsprechenden hexadezimalen Werte:
| black | #000000 | green | #008000 |
| silver | #C0C0C0 | lime | #00FF00 |
| gray | #808080 | olive | #808000 |
| white | #FFFFFF | yellow | #FFFF00 |
| maroon | #800000 | navy | #000080 |
| red | #FF0000 | blue | #0000FF |
| purple | #800080 | teal | #008080 |
| fuchsia | #FF00FF | aqua | #00FFFF |
Diese Farbnamen können auch in Stylesheets verwendet werden. In der CSS 2.1-Spezifikation wird außerdem die Farbe orange (#FFA500) aufgeführt. Hier werden also offiziell 17 Farben unterstützt. CSS 3 dagegen kennt 140 Standard-Farbnamen, die bereits jetzt von vielen Browsern unterstützt werden. Ihre Verwendung in (X)HTML-Dokumenten kann jedoch dazu führen, dass die Dokumente nicht mehr validiert werden.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema HTML & XHTML bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2010 O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "HTML & XHTML ─ kurz & gut" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de