Codierung von Farbwerten und ihre Anwendung

Das Thema zerfällt, auch ohne daß man es hinschmeißt, in drei Teile:
1. Wie codiert man Farben und
2. wozu ge- oder mißbraucht man diese Farbcodes. Also, was alles kann man färben (schnelle Vorabantwort: ALLES).
3. Wie werden die Farben dargestellt. Das darstellende Garät reagiert vermöge seiner Gamma-Korrektur unterschiedlich. CSS setzt als Default ein Gamma von 2,2 voraus.

Beginnen wir mit Punkt 1. Im Vergleich zu den Möglichkeiten der Farbcodierung in HTML kommen hier drei dazu:

Möglichkeiten der Codierung von Farben
Farbcode Erklärung Farbbeispiel
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellowFarbnamen, wie bei HTML üblich
aqua bzw. #00ffff
black bzw. #000000
blue bzw. #0000ff
fuchsia bzw. #ff00ff
green bzw. #008000
lime bzw. #00ff00
maroon bzw. #800000
navy bzw. #000080
olive bzw. #808000
orange bzw. #ffa500
purple bzw. #800080
red bzw. #ff0000
teal bzw. #008080
silver bzw. #c0c0c0
white bzw. #ffffff
yellow bzw. #ffff00
#rgbFarbwerte, kodiert mit einstelligen hexadezimalen Zahlwerten. Die Angabe wird interpretiert mit jeweils verdoppelten Ziffern. #a90 bedeutet also #aa9900. Achtung, eine "#000", die ja gelegentlich vorkommen soll, darf man nicht zu "#0" oder gar "#" verkürzen! #ac3
#rrggbbFarbwerte mit zweistelligen hexadezimalen Zahlwerten, wie bei HTML #a0c030
rgb(rrr,ggg,bbb)Farbwerte mit dreistelligen dezimalen Zahlen 000...255, führende Nullen dürfen entfallen rgb(0,99,255)
rgb(r%,g%,b%)Farbwerte mit prozentualen Farbanteilen rgb(75%,55%,21%)
schluesselwortrelative Farbwerte, hier im Beispiel an die Schrift vergeben, die über Schlüsselwörter Farbgleichheit zu anderen Fensterelementen (den sog. "Sytem-Farben") herstellen. Ich gebe die Übersicht unten mit an.window
buttonface
highlight

Unsinnige Zahlenangaben sollen "geclipt", also auf sinnige zurückgestutzt werden. Demnach sollte <span style="color:rgb(-100,256,0);">einfache grüne Schrift ergeben.


Welche relativen Farbwerte (theoretisch) verfügbar sind, ist in der folgenden Aufstellung dargestellt: Die Farbwerte sind mit

<td style= "background-color:farbname">&nbsp;</td>

aufgerufen worden. Wenn auf speziellen Browsern insbesondere der nicht-Windows-Welt (ja, die gibt es und man kann in ihr friedlich und sicher leben!) nicht alle Felder die erwartete Farbe zeigen, kann das verschiedene Gründe haben: Entweder werden die betreffenden Sytemfarben nicht unterstützt oder sie haben unerwartete Einstellungen. Kein Grund zur Sorge!

Die Systemfarben sollen künftig (unter CSS3) so ist zu lesen, wegfallen! Also gar nicht erst angewöhnen!


Systemfarben im Überblick
Farbcode Erklärung Farbbeispiel
activeborderFarbe der aktiven Fenstertitelzeile  
activecaptionFarbe der Überschrift  
appworkspaceFarbe des Hintergrunds der aktiven Anwendung  
backgroundFarbe des Desktop-Hintergrunds  
buttonfaceFarbe von Buttons in Dialogfenstern  
buttonhighlightFarbe für 3D-Schatten von Buttons in Dialogfenstern  
buttontextFarbe von Texten beschrifteter Buttons in Dialogfenstern  
captiontextFarbe von Überschriften in Dialogfenstern  
graytextFarbe von deaktiviertem Text Dialogfenstern  
highlightFarbe von ausgewählten Einträgen in Auswahllisten.  
highlighttextFarbe von selektiertem Text.  
inactiveborderFarbe einer nicht aktiven Fenstertitelzeile  
inactivecaptionFarbe der Überschrift in einer nicht aktiven Fenstertitelzeile  
infobackgroundFarbe für Tooltips und Hints (kleine Popup-Hilfen)  
infotextTextfarbe für Tooltips und Hints (kleine Popup-Hilfen)  
menuFarbe für Menüleisten  
menutextFarbe für Menüeinträge  
scrollbarFarbe der Scroll-Leiste in Fenstern  
threeddarkshadowDunkle Farbe bei Schatten von 3D-Elementen  
threedfaceFarbe von 3D-Elementen  
threedhighlightFarbe von gerade angeklickten 3D-Elementen  
threedlightshadowHelle Farbe bei Schatten von 3D-Elementen  
threedshadowDunkle Farbe bei Schatten von 3D-Elementen  
windowHintergrundfarbe von Dokumentfenstern  
windowframeFarbe von Fensterrahmen  
windowtextFarbe von normalem Text in Dokumentfenstern  
CSS-Kurs, © Rolf Hirte, 2001/2007

Valid XHTML 1.0!CSS-Validierung