CSS-Farbreferenz
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Wie bereits ausführlich unter Wie man Farben bestimmt beschrieben, gibt es fünf unterschiedliche Methoden, um Farbwerte in CSS zu definieren:
- Beschreibende Farbnamen
color: red;
- Hexadezimale RGB-Werte (mit 6 oder 3 Zeichen)
color: #ff0000;
color: #f00;
- Dezimale RGB-Werte
color: rgb(255, 0, 0);
- RGB-Prozentwerte
color: rgb(100%, 0%, 0%);
- Systemspezifische Farbnamen
color: AppWorkspace;
Diese Seite umfasst eine vollständige Referenz zu den ersten zwei Methoden, den Farbnamen. Die CSS2-Empfehlung enthält insgesamt 17 beschreibende Farbnamen, die in der Tabelle Farbnamen im CSS-Standard aufgelistet sind. Ursprünglich von Netscape stammen weitere 124 Farbnamen, die von beinah allen Browsern unterstützt werden. Sie werden in der Tabelle Erweitere Palette an Farbnamen gelistet. Außerdem gibt es in CSS2 noch 28 systemspezifische Farbnamen, die den Farben der grafischen Benutzeroberfläche im Betriebssystem des Benutzers entsprechen. Die Tabelle Systemspezifische CSS-Farbnamen fasst sie übersichtlich zusammen. Systemspezifische Farbnamen sind den meisten aktuellen Browsern bekannt, alte Browser hingegen unterstützen sie in der Regel nicht.
Tabelle: Farbnamen im CSS-Standard.
Farbname | Hexadezimalwert | Rot | Grün | Blau |
---|---|---|---|---|
aqua | #00FFFF | 0 | 255 | 255 |
black | #000000 | 0 | 0 | 0 |
blue | #0000FF | 0 | 0 | 255 |
fuchsia | #FF00FF | 255 | 0 | 255 |
grey | #808080 | 128 | 128 | 128 |
green | #008000 | 0 | 128 | 0 |
lime | #00FF00 | 0 | 255 | 0 |
maroon | #800000 | 128 | 0 | 0 |
navy | #000080 | 0 | 0 | 128 |
olive | #808000 | 128 | 128 | 0 |
purple | #800080 | 128 | 0 | 128 |
red | #FF0000 | 255 | 0 | 0 |
silver | #C0C0C0 | 192 | 192 | 192 |
teal | #008080 | 0 | 128 | 128 |
white | #FFFFFF | 255 | 255 | 255 |
yellow | #FFFF00 | 255 | 255 | 0 |
orange | #FFA500 | 255 | 156 | 0 |
Tabelle: Erweitere Palette an Farbnamen.
Farbname | Hexadezimalwert | Rot | Grün | Blau |
---|---|---|---|---|
aliceblue | #F0F8FF | 240 | 248 | 255 |
antiquewhite | #FAEBD7 | 250 | 235 | 215 |
aquamarine | #7FFFD4 | 127 | 255 | 212 |
azure | #F0FFFF | 240 | 255 | 255 |
beige | #F5F5DC | 245 | 245 | 220 |
bisque | #FFE4C4 | 255 | 228 | 196 |
blanchedalmond | #FFEBCD | 255 | 235 | 205 |
blueviolet | #8A2BE2 | 138 | 43 | 226 |
brown | #A52A2A | 165 | 42 | 42 |
burlywood | #DEB887 | 222 | 184 | 135 |
cadetblue | #5F9EA0 | 95 | 158 | 160 |
chartreuse | #7FFF00 | 127 | 255 | 0 |
chocolate | #D2691E | 210 | 105 | 30 |
coral | #FF7F50 | 255 | 127 | 80 |
cornflowerblue | #6495ED | 100 | 149 | 237 |
cornsilk | #FFF8DC | 255 | 248 | 220 |
crimson | #DC143D | 220 | 20 | 61 |
cyan | #00FFFF | 0 | 255 | 255 |
darkblue | #00008B | 0 | 0 | 139 |
darkcyan | #008B8B | 0 | 139 | 139 |
darkgoldenrod | #B8860B | 139 | 134 | 11 |
darkgray | #A9A9A9 | 169 | 169 | 169 |
darkgreen | #006400 | 0 | 100 | 0 |
darkkhaki | #BDB76B | 189 | 183 | 107 |
darkmagenta | #8B008B | 139 | 0 | 139 |
darkolivegreen | #556B2F | 85 | 107 | 47 |
darkorange | #FF8C00 | 255 | 140 | 0 |
darkorchid | #9932CC | 153 | 50 | 204 |
darkred | #8B0000 | 139 | 0 | 0 |
darksalmon | #E9967A | 233 | 150 | 122 |
darkseagreen | #8FBC8F | 143 | 188 | 143 |
darkslateblue | #483D8B | 72 | 61 | 139 |
darkslategray | #2F4F4F | 47 | 79 | 79 |
darkturquoise | #00CED1 | 0 | 206 | 209 |
darkviolet | #9400D3 | 148 | 0 | 211 |
deeppink | #FF1493 | 255 | 20 | 147 |
deepskyblue | #00BFFF | 0 | 191 | 255 |
dimgray | #696969 | 105 | 105 | 105 |
dodgerblue | #1E90FF | 30 | 144 | 255 |
firebrick | #B22222 | 178 | 34 | 34 |
floralwhite | #FFFAF0 | 255 | 250 | 240 |
forestgreen | #228B22 | 34 | 139 | 34 |
gainsboro | #DCDCDC | 220 | 220 | 220 |
ghostwhite | #F8F8FF | 248 | 248 | 255 |
gold | #FFD700 | 255 | 215 | 0 |
goldenrod | #DAA520 | 218 | 165 | 32 |
greenyellow | #ADFF2F | 173 | 255 | 47 |
honeydew | #F0FFF0 | 240 | 255 | 240 |
hotpink | #FF69B4 | 255 | 105 | 180 |
indianred | #CD5C5C | 205 | 92 | 92 |
indigo | #4B0082 | 75 | 0 | 130 |
ivory | #FFFFF0 | 255 | 255 | 240 |
khaki | #F0E68C | 240 | 230 | 140 |
lavender | #E6E6FA | 230 | 230 | 250 |
lavenderblush | #FFF0F5 | 255 | 240 | 245 |
lawngreen | #7CFC00 | 124 | 252 | 0 |
lemonchiffon | #FFFACD | 255 | 250 | 205 |
lightblue | #ADD8E6 | 173 | 216 | 230 |
lightcoral | #F08080 | 240 | 128 | 128 |
lightcyan | #E0FFFF | 224 | 255 | 255 |
lightgoldenrodyellow | #FAFAD2 | 250 | 250 | 210 |
lightgreen | #90EE90 | 144 | 238 | 144 |
lightgrey | #D3D3D3 | 211 | 211 | 211 |
lightpink | #FFB6C1 | 255 | 182 | 193 |
lightsalmon | #FFA07A | 255 | 160 | 122 |
lightseagreen | #20B2AA | 32 | 178 | 170 |
lightskyblue | #87CEFA | 135 | 206 | 250 |
lightslategray | #778899 | 119 | 136 | 153 |
lightsteelblue | #B0C4DE | 176 | 196 | 222 |
lightyellow | #FFFFE0 | 255 | 255 | 224 |
limegreen | #32CD32 | 50 | 205 | 50 |
linen | #FAF0E6 | 250 | 240 | 230 |
magenta | #FF00FF | 255 | 0 | 255 |
mediumaquamarine | #66CDAA | 102 | 205 | 170 |
mediumblue | #0000CD | 0 | 0 | 205 |
mediumorchid | #BA55D3 | 186 | 85 | 211 |
mediumpurple | #9370DB | 147 | 112 | 219 |
mediumseagreen | #3CB371 | 60 | 179 | 113 |
mediumslateblue | #7B68EE | 123 | 104 | 238 |
mediumspringgreen | #00FA9A | 0 | 250 | 154 |
mediumturquoise | #48D1CC | 72 | 209 | 204 |
mediumvioletred | #C71585 | 199 | 21 | 133 |
midnightblue | #191970 | 25 | 25 | 112 |
mintcream | #F5FFFA | 245 | 255 | 250 |
mistyrose | #FFE4E1 | 255 | 228 | 225 |
moccasin | #FFE4B5 | 255 | 228 | 181 |
navajowhite | #FFDEAD | 255 | 222 | 173 |
oldlace | #FDF5E6 | 253 | 245 | 230 |
olivedrab | #6B8E23 | 107 | 142 | 35 |
orange | #FFA500 | 255 | 165 | 0 |
orangered | #FF4500 | 255 | 69 | 0 |
orchid | #DA70D6 | 218 | 112 | 214 |
palegoldenrod | #EEE8AA | 238 | 232 | 170 |
palegreen | #98FB98 | 152 | 251 | 152 |
paleturquoise | #AFEEEE | 175 | 238 | 238 |
palevioletred | #DB7093 | 219 | 112 | 147 |
papayawhip | #FFEFD5 | 255 | 239 | 213 |
peachpuff | #FFDAB9 | 255 | 218 | 185 |
peru | #CD853F | 205 | 133 | 63 |
pink | #FFC0CB | 255 | 192 | 203 |
plum | #DDA0DD | 221 | 160 | 221 |
powderblue | #B0E0E6 | 176 | 224 | 230 |
rosybrown | #BC8F8F | 188 | 143 | 143 |
royalblue | #4169E1 | 65 | 105 | 225 |
saddlebrown | #8B4513 | 139 | 69 | 19 |
salmon | #FA8072 | 250 | 128 | 114 |
sandybrown | #F4A460 | 244 | 164 | 96 |
seagreen | #2E8B57 | 46 | 139 | 87 |
seashell | #FFF5EE | 255 | 245 | 238 |
sienna | #A0522D | 160 | 82 | 45 |
skyblue | #87CEEB | 135 | 206 | 235 |
slateblue | #6A5ACD | 106 | 90 | 205 |
slategray | #708090 | 112 | 128 | 144 |
snow | #FFFAFA | 255 | 250 | 250 |
spinggreen | #00FF7F | 0 | 255 | 127 |
steelblue | #4682B4 | 70 | 130 | 180 |
tan | #D2B48C | 210 | 180 | 140 |
thistle | #D8BFD8 | 216 | 191 | 216 |
tomato | #FF6347 | 255 | 99 | 71 |
turquoise | #40E0D0 | 64 | 224 | 208 |
violet | #EE82EE | 238 | 130 | 238 |
wheat | #F5DEB3 | 245 | 222 | 179 |
whitesmoke | #F5F5F5 | 245 | 245 | 245 |
yellowgreen | #9ACD32 | 154 | 205 | 50 |
Tabelle: Systemspezifische CSS-Farbnamen.
Farbname | Beschreibung |
---|---|
ActiveBorder | Rahmenfarbe der aktiven Fenstertitelzeile |
ActiveCaption | Farbe der Überschrift der aktiven Fenstertitelzeile |
AppWorkspace | Farbe des Hintergrunds der aktiven Anwendung |
Background | Farbe des Desktop-Hintergrunds |
ButtonFace | Farbe der Buttons im Dialogfenster |
ButtonHighlight | Hervorhebende Farben für 3D-Lichtreflexe von Buttons in Dialogfenstern (Ränder in Richtung der Lichtquelle) |
ButtonShadow | Farben für 3D-Schatten von Buttons in Dialogfenstern (Ränder entgegen der Lichtquelle) |
ButtonText | Farbe der Texte beschrifteter Buttons in Dialogfenstern |
CaptionText | Farbe der Überschriften in Dialogfenstern |
GrayText | Farbe des deaktivierten Texts in Dialogfenstern |
Highlight | Hintergrundfarbe für ausgewählte Einträge in Auswahllisten |
HighlightText | Textfarbe für selektierten Text |
InactiveBorder | Farbe eines nicht aktiven Fensterrahmens |
InactiveCaption | Farbe der Überschrift eines nicht aktiven Fensters |
InactiveCaptionText | Farbe des Texts in einem nicht aktiven Fenster |
InfoBackground | Hintergrundfarbe des Hilfefensters |
InfoText | Textfarbe des Hilfefensters |
Menu | Farbe einer Menüleiste |
MenuText | Farbe des Texts in Menüeinträgen |
Scrollbar | Hintergrundfarbe des Scroll-Balkens |
ThreeDDarkShadow | dunkle Farbe des Schattens bei 3D-Elementen |
ThreeDFace | Farbe von 3D-Elementen |
ThreeDHighlight | Farbe angeklickter 3D-Elemente |
ThreeDLightShadow | helle Farbe des Schattens bei 3D-Elementen |
ThreeDShadow | Farbe des Schattens bei 3D-Elementen |
Window | Hintergrundfarbe in Dokumentfenstern |
WindowFrame | Farbe des Fensterrahmens |
WindowText | Farbe des normalen Texts in Dokumentfenstern |
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" 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.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg