Text-Info

- 15min

- leicht
Mit Farbangaben in HTML, CSS oder SVG können Sie bis zu 16,7 Millionen verschiedene Farbwerte kodieren. Es gibt jedoch Standard-Paletten, die ganz bestimmte dieser 16,7 Millionen möglichen Farbwerte benutzen. Zwar besteht kein Zwang, sich an diese Paletten zu halten, doch wenn keine gestalterischen Gründe dagegensprechen, bieten diese Paletten eine gewisse Orientierung. Auf jeden Fall haben solche Farbpaletten einen technischen Vorteil: die Chance, dass die Farben auf verschiedenen Hardware-Typen und verschiedenen Betriebssystemen gleich aussehen, ist größer als bei Farben mit „beliebigen“ Farbtönen.
Die VGA-Palette (16 Farben)[Bearbeiten]
Die VGA-Palette ist der kleinste gemeinsame Nenner aller VGA-kompatiblen Grafikkarten und Bildschirme. Für die 16 Farben der VGA-Palette sind in HTML und CSS auch die vordefinierten Farbnamen erlaubt.
black |
#000000 |
grey |
#808080
|
maroon |
#800000 |
red |
#FF0000
|
green |
#008000 |
lime |
#00FF00
|
olive |
#808000 |
yellow |
#FFFF00
|
navy |
#000080 |
blue |
#0000FF
|
purple |
#800080 |
fuchsia |
#FF00FF
|
teal |
#008080 |
aqua |
#00FFFF
|
silver |
#C0C0C0 |
white |
#FFFFFF
|
Die Netscape-Palette (216 websichere Farben)[Bearbeiten]
Für eine Grafik im Format GIF können Sie pro Frame aus den 16,7 Mio. möglichen Farben des RGB-Farbmodells maximal 256 Farben wählen und abspeichern. Jede der Farben kann beliebige RGB-Werte haben, d. h. es sind auch „krumme“ Farbwerte wie 71,217,34 möglich.
Für webgerechte GIF-Grafiken steht jedoch ein Standardschema zur Verfügung, das von Netscape eingeführt wurde und auf diesem Browser plattformübergreifend optimal interpretiert wird. Nach dem Netscape-Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 dividierbar sind. R(ot), G(rün) und B(lau) sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC oder FF) haben. Ein erlaubter Wert ist danach z. B. 255,51,204 (hexadezimal: FF,33,CC). Auf diese Weise ergeben sich 6 x 6 x 6 mögliche Farben, also 216.
Die verbleibenden 40 Farben können Sie als „eiserne Reserve“ betrachten. Wenn Sie für einzelne Grafiken bestimmte, fehlende Farbtöne brauchen, können Sie unbenutzte Farben der Palette mit der gewünschten Farbe definieren.
*000*
|
300
|
600
|
900
|
C00
|
*F00*
|
*003*
|
303
|
603
|
903
|
C03
|
*F03*
|
006
|
306
|
606
|
906
|
C06
|
F06
|
009
|
309
|
609
|
909
|
C09
|
F09
|
00C
|
30C
|
60C
|
90C
|
C0C
|
F0C
|
*00F*
|
30F
|
60F
|
90F
|
C0F
|
*F0F*
|
030
|
330
|
630
|
930
|
C30
|
F30
|
033
|
333
|
633
|
933
|
C33
|
F33
|
036
|
336
|
636
|
936
|
C36
|
F36
|
039
|
339
|
639
|
939
|
C39
|
F39
|
03C
|
33C
|
63C
|
93C
|
C3C
|
F3C
|
03F
|
33F
|
63F
|
93F
|
C3F
|
F3F
|
060
|
360
|
660
|
960
|
C60
|
F60
|
063
|
363
|
663
|
963
|
C63
|
F63
|
066
|
366
|
666
|
966
|
C66
|
F66
|
069
|
369
|
669
|
969
|
C69
|
F69
|
06C
|
36C
|
66C
|
96C
|
C6C
|
F6C
|
06F
|
36F
|
66F
|
96F
|
C6F
|
F6F
|
090
|
390
|
690
|
990
|
C90
|
F90
|
093
|
393
|
693
|
993
|
C93
|
F93
|
096
|
396
|
696
|
996
|
C96
|
F96
|
099
|
399
|
699
|
999
|
C99
|
F99
|
09C
|
39C
|
69C
|
99C
|
C9C
|
F9C
|
09F
|
39F
|
69F
|
99F
|
C9F
|
F9F
|
0C0
|
3C0
|
6C0
|
9C0
|
CC0
|
FC0
|
0C3
|
3C3
|
6C3
|
9C3
|
CC3
|
FC3
|
0C6
|
3C6
|
6C6
|
9C6
|
CC6
|
FC6
|
0C9
|
3C9
|
6C9
|
9C9
|
CC9
|
FC9
|
0CC
|
3CC
|
6CC
|
9CC
|
CCC
|
FCC
|
0CF
|
3CF
|
6CF
|
9CF
|
CCF
|
FCF
|
*0F0*
|
3F0
|
*6F0*
|
9F0
|
CF0
|
*FF0*
|
0F3
|
*3F3*
|
*6F3*
|
9F3
|
CF3
|
*FF3*
|
*0F6*
|
*3F6*
|
6F6
|
9F6
|
*CF6*
|
*FF6*
|
0F9
|
3F9
|
6F9
|
9F9
|
CF9
|
FF9
|
*0FC*
|
*3FC*
|
6FC
|
9FC
|
CFC
|
FFC
|
*0FF*
|
*3FF*
|
*6FF*
|
9FF
|
CFF
|
*FFF*
|
Dies ist eigentlich keine Farbpalette im engeren Sinn, sondern eine lose Sammlung von Farben mit bestimmten Farbwerten. Die Sammlung wurde seinerzeit von Netscape eingeführt, um zusätzlich zu der Palette mit den 216 Farben, die einem algorithmischen Schema folgen, noch ein paar vordefinierte Farbtöne für Zwischentöne und Pastellfarben anzubieten. Sie stammen zumeist aus dem X Windows System (X11), wo sie in den 1980ern definiert wurden. Falls ein Namenskonflikt mit den VGA-Farben (siehe oben) auftrat, gab die W3C den VGA-Farben Vorrang. Deshalb ist darkgray
(aus X11) heller als gray
(aus den VGA-Farben).
Alle grauen Farben können auch mit „e“ geschrieben werden, Gerüchten zufolge, weil sich die Menschen bei HP die richtige Schreibweise nicht merken konnten.[1][2]
2014 wurde eine neue Farbe hinzugefügt: rebeccapurple
ist ein Andenken an Rebecca Alison Meyer, Tochter des CSS-Buch-Autoren Eric A. Meyer. Sie starb am 7. Juni 2014, ihrem sechsten Geburtstag, an einem Hirntumor.[3]
Diese Farbnamen werden von der Mehrzahl der modernen Browser bei Farbangaben in HTML oder CSS interpretiert.
HTML-Name
|
Hexcode R G B
|
Dezimalcode R G B
|
Pink
|
Pink |
FF C0 CB |
255 192 203
|
LightPink |
FF B6 C1 |
255 182 193
|
HotPink |
FF 69 B4 |
255 105 180
|
DeepPink |
FF 14 93 |
255 20 147
|
PaleVioletRed |
DB 70 93 |
219 112 147
|
MediumVioletRed |
C7 15 85 |
199 21 133
|
Rot
|
LightSalmon |
FF A0 7A |
255 160 122
|
Salmon |
FA 80 72 |
250 128 114
|
DarkSalmon |
E9 96 7A |
233 150 122
|
LightCoral |
F0 80 80 |
240 128 128
|
IndianRed |
CD 5C 5C |
205 92 92
|
Crimson |
DC 14 3C |
220 20 60
|
FireBrick |
B2 22 22 |
178 34 34
|
DarkRed |
8B 00 00 |
139 0 0
|
Red |
FF 00 00 |
255 0 0
|
Orange
|
OrangeRed |
FF 45 00 |
255 69 0
|
Tomato |
FF 63 47 |
255 99 71
|
Coral |
FF 7F 50 |
255 127 80
|
DarkOrange |
FF 8C 00 |
255 140 0
|
Orange |
FF A5 00 |
255 165 0
|
Gelb
|
Yellow |
FF FF 00 |
255 255 0
|
LightYellow |
FF FF E0 |
255 255 224
|
LemonChiffon |
FF FA CD |
255 250 205
|
LightGoldenrodYellow |
FA FA D2 |
250 250 210
|
PapayaWhip |
FF EF D5 |
255 239 213
|
Moccasin |
FF E4 B5 |
255 228 181
|
PeachPuff |
FF DA B9 |
255 218 185
|
PaleGoldenrod |
EE E8 AA |
238 232 170
|
Khaki |
F0 E6 8C |
240 230 140
|
DarkKhaki |
BD B7 6B |
189 183 107
|
Gold |
FF D7 00 |
255 215 0
|
Braun
|
Cornsilk |
FF F8 DC |
255 248 220
|
BlanchedAlmond |
FF EB CD |
255 235 205
|
Bisque |
FF E4 C4 |
255 228 196
|
NavajoWhite |
FF DE AD |
255 222 173
|
Wheat |
F5 DE B3 |
245 222 179
|
BurlyWood |
DE B8 87 |
222 184 135
|
Tan |
D2 B4 8C |
210 180 140
|
RosyBrown |
BC 8F 8F |
188 143 143
|
SandyBrown |
F4 A4 60 |
244 164 96
|
Goldenrod |
DA A5 20 |
218 165 32
|
DarkGoldenrod |
B8 86 0B |
184 134 11
|
Peru |
CD 85 3F |
205 133 63
|
Chocolate |
D2 69 1E |
210 105 30
|
SaddleBrown |
8B 45 13 |
139 69 19
|
Sienna |
A0 52 2D |
160 82 45
|
Brown |
A5 2A 2A |
165 42 42
|
Maroon |
80 00 00 |
128 0 0
|
|
HTML-Name
|
Hexcode R G B
|
Dezimalcode R G B
|
Grün
|
DarkOliveGreen |
55 6B 2F |
85 107 47
|
Olive |
80 80 00 |
128 128 0
|
OliveDrab |
6B 8E 23 |
107 142 35
|
YellowGreen |
9A CD 32 |
154 205 50
|
LimeGreen |
32 CD 32 |
50 205 50
|
Lime |
00 FF 00 |
0 255 0
|
LawnGreen |
7C FC 00 |
124 252 0
|
Chartreuse |
7F FF 00 |
127 255 0
|
GreenYellow |
AD FF 2F |
173 255 47
|
SpringGreen |
00 FF 7F |
0 255 127
|
MediumSpringGreen |
00 FA 9A |
0 250 154
|
LightGreen |
90 EE 90 |
144 238 144
|
PaleGreen |
98 FB 98 |
152 251 152
|
DarkSeaGreen |
8F BC 8F |
143 188 143
|
MediumSeaGreen |
3C B3 71 |
60 179 113
|
SeaGreen |
2E 8B 57 |
46 139 87
|
ForestGreen |
22 8B 22 |
34 139 34
|
Green |
00 80 00 |
0 128 0
|
DarkGreen |
00 64 00 |
0 100 0
|
Cyan
|
MediumAquamarine |
66 CD AA |
102 205 170
|
Aqua |
00 FF FF |
0 255 255
|
Cyan |
00 FF FF |
0 255 255
|
LightCyan |
E0 FF FF |
224 255 255
|
PaleTurquoise |
AF EE EE |
175 238 238
|
Aquamarine |
7F FF D4 |
127 255 212
|
Turquoise |
40 E0 D0 |
64 224 208
|
MediumTurquoise |
48 D1 CC |
72 209 204
|
DarkTurquoise |
00 CE D1 |
0 206 209
|
LightSeaGreen |
20 B2 AA |
32 178 170
|
CadetBlue |
5F 9E A0 |
95 158 160
|
DarkCyan |
00 8B 8B |
0 139 139
|
Teal |
00 80 80 |
0 128 128
|
Blau
|
LightSteelBlue |
B0 C4 DE |
176 196 222
|
PowderBlue |
B0 E0 E6 |
176 224 230
|
LightBlue |
AD D8 E6 |
173 216 230
|
SkyBlue |
87 CE EB |
135 206 235
|
LightSkyBlue |
87 CE FA |
135 206 250
|
DeepSkyBlue |
00 BF FF |
0 191 255
|
DodgerBlue |
1E 90 FF |
30 144 255
|
CornflowerBlue |
64 95 ED |
100 149 237
|
SteelBlue |
46 82 B4 |
70 130 180
|
RoyalBlue |
41 69 E1 |
65 105 225
|
Blue |
00 00 FF |
0 0 255
|
MediumBlue |
00 00 CD |
0 0 205
|
DarkBlue |
00 00 8B |
0 0 139
|
Navy |
00 00 80 |
0 0 128
|
MidnightBlue |
19 19 70 |
25 25 112
|
|
HTML-Name
|
Hexcode R G B
|
Dezimalcode R G B
|
Violett
|
Lavender |
E6 E6 FA |
230 230 250
|
Thistle |
D8 BF D8 |
216 191 216
|
Plum |
DD A0 DD |
221 160 221
|
Violet |
EE 82 EE |
238 130 238
|
Orchid |
DA 70 D6 |
218 112 214
|
Fuchsia |
FF 00 FF |
255 0 255
|
Magenta |
FF 00 FF |
255 0 255
|
MediumOrchid |
BA 55 D3 |
186 85 211
|
MediumPurple |
93 70 DB |
147 112 219
|
BlueViolet |
8A 2B E2 |
138 43 226
|
DarkViolet |
94 00 D3 |
148 0 211
|
DarkOrchid |
99 32 CC |
153 50 204
|
DarkMagenta |
8B 00 8B |
139 0 139
|
Purple |
80 00 80 |
128 0 128
|
Indigo |
4B 00 82 |
75 0 130
|
DarkSlateBlue |
48 3D 8B |
72 61 139
|
SlateBlue |
6A 5A CD |
106 90 205
|
MediumSlateBlue |
7B 68 EE |
123 104 238
|
RebeccaPurple |
66 33 99 |
102 51 153
|
Weiß
|
White |
FF FF FF |
255 255 255
|
Snow |
FF FA FA |
255 250 250
|
Honeydew |
F0 FF F0 |
240 255 240
|
MintCream |
F5 FF FA |
245 255 250
|
Azure |
F0 FF FF |
240 255 255
|
AliceBlue |
F0 F8 FF |
240 248 255
|
GhostWhite |
F8 F8 FF |
248 248 255
|
WhiteSmoke |
F5 F5 F5 |
245 245 245
|
Seashell |
FF F5 EE |
255 245 238
|
Beige |
F5 F5 DC |
245 245 220
|
OldLace |
FD F5 E6 |
253 245 230
|
FloralWhite |
FF FA F0 |
255 250 240
|
Ivory |
FF FF F0 |
255 255 240
|
AntiqueWhite |
FA EB D7 |
250 235 215
|
Linen |
FA F0 E6 |
250 240 230
|
LavenderBlush |
FF F0 F5 |
255 240 245
|
MistyRose |
FF E4 E1 |
255 228 225
|
Grau/Schwarz
|
Gainsboro |
DC DC DC |
220 220 220
|
LightGray |
D3 D3 D3 |
211 211 211
|
Silver |
C0 C0 C0 |
192 192 192
|
DarkGray |
A9 A9 A9 |
169 169 169
|
Gray |
80 80 80 |
128 128 128
|
DimGray |
69 69 69 |
105 105 105
|
LightSlateGray |
77 88 99 |
119 136 153
|
SlateGray |
70 80 90 |
112 128 144
|
DarkSlateGray |
2F 4F 4F |
47 79 79
|
Black |
00 00 00 |
0 0 0
|
|
Farbnamen (alphabetisch)[Bearbeiten]
Name |
Hex-Schreibweise
|
aliceblue |
#F0F8FF
|
antiquewhite |
#FAEBD7
|
aqua |
#00FFFF
|
aquamarine |
#7FFFD4
|
azure |
#F0FFFF
|
beige |
#F5F5DC
|
bisque |
#FFE4C4
|
black |
#000000
|
blanchedalmond |
#FFEBCD
|
blue |
#0000FF
|
blueviolet |
#8A2BE2
|
brown |
#A52A2A
|
burlywood |
#DEB887
|
cadetblue |
#5F9EA0
|
chartreuse |
#7FFF00
|
chocolate |
#D2691E
|
coral |
#FF7F50
|
cornflowerblue |
#6495ED
|
cornsilk |
#FFF8DC
|
crimson |
#DC143C
|
cyan |
#00FFFF
|
darkblue |
#00008B
|
darkcyan |
#008B8B
|
darkgoldenrod |
#B8860B
|
darkgray* |
#A9A9A9
|
darkgreen |
#006400
|
darkgrey* |
#A9A9A9
|
darkkhaki |
#BDB76B
|
darkmagenta |
#8B008B
|
darkolivegreen |
#556B2F
|
darkorange |
#FF8C00
|
darkorchid |
#9932CC
|
darkred |
#8B0000
|
darksalmon |
#E9967A
|
darkseagreen |
#8FBC8F
|
darkslateblue |
#483D8B
|
darkslategray* |
#2F4F4F
|
darkslategrey* |
#2F4F4F
|
darkturquoise |
#00CED1
|
darkviolet |
#9400D3
|
deeppink |
#FF1493
|
deepskyblue |
#00BFFF
|
dimgray* |
#696969
|
dimgrey* |
#696969
|
dodgerblue |
#1E90FF
|
firebrick |
#B22222
|
floralwhite |
#FFFAF0
|
forestgreen |
#228B22
|
fuchsia |
#FF00FF
|
|
Name |
Hex-Schreibweise
|
gainsboro |
#DCDCDC
|
ghostwhite |
#F8F8FF
|
gold |
#FFD700
|
goldenrod |
#DAA520
|
gray* |
#808080
|
green |
#008000
|
greenyellow |
#ADFF2F
|
grey* |
#808080
|
honeydew |
#F0FFF0
|
hotpink |
#FF69B4
|
indianred |
#CD5C5C
|
indigo |
#4B0082
|
ivory |
#FFFFF0
|
khaki |
#F0E68C
|
lavender |
#E6E6FA
|
lavenderblush |
#FFF0F5
|
lawngreen |
#7CFC00
|
lemonchiffon |
#FFFACD
|
lightblue |
#ADD8E6
|
lightcoral |
#F08080
|
lightcyan |
#E0FFFF
|
lightgoldenrodyellow |
#FAFAD2
|
lightgray |
#D3D3D3
|
lightgreen |
#90EE90
|
lightgrey |
#D3D3D3
|
lightpink |
#FFB6C1
|
lightsalmon |
#FFA07A
|
lightseagreen |
#20B2AA
|
lightskyblue |
#87CEFA
|
lightslategray |
#778899
|
lightslategrey |
#789
|
lightsteelblue |
#B0C4DE
|
lightyellow |
#FFFFE0
|
lime |
#00FF00
|
limegreen |
#32CD32
|
linen |
#FAF0E6
|
magenta |
#FF00FF
|
maroon |
#800000
|
mediumaquamarine |
#66CDAA
|
mediumblue |
#0000CD
|
mediumorchid |
#BA55D3
|
mediumpurple |
#9370DB
|
mediumseagreen |
#3CB371
|
mediumslateblue |
#7B68EE
|
mediumspringgreen |
#00FA9A
|
mediumturquoise |
#48D1CC
|
mediumvioletred |
#C71585
|
midnightblue |
#191970
|
mintcream |
#F5FFFA
|
|
Name |
Hex-Schreibweise
|
mistyrose |
#FFE4E1
|
moccasin |
#FFE4B5
|
navajowhite |
#FFDEAD
|
navy |
#000080
|
oldlace |
#FDF5E6
|
olive |
#808000
|
olivedrab |
#6B8E23
|
orange |
#FFA500
|
orangered |
#FF4500
|
orchid |
#DA70D6
|
palegoldenrod |
#EEE8AA
|
palegreen |
#98FB98
|
paleturquoise |
#AFEEEE
|
palevioletred |
#DB7093
|
papayawhip |
#FFEFD5
|
peachpuff |
#FFDAB9
|
peru |
#CD853F
|
pink |
#FFC0CB
|
plum |
#DDA0DD
|
powderblue |
#B0E0E6
|
purple |
#800080
|
RebeccaPurple |
#663399
|
red |
#FF0000
|
rosybrown |
#BC8F8F
|
royalblue |
#4169E1
|
saddlebrown |
#8B4513
|
salmon |
#FA8072
|
sandybrown |
#F4A460
|
seagreen |
#2E8B57
|
seashell |
#FFF5EE
|
sienna |
#A0522D
|
silver |
#C0C0C0
|
skyblue |
#87CEEB
|
slateblue |
#6A5ACD
|
slategray |
#708090
|
slategrey |
#708090
|
snow |
#FFFAFA
|
springgreen |
#00FF7F
|
steelblue |
#4682B4
|
tan |
#D2B48C
|
teal |
#008080
|
thistle |
#D8BFD8
|
tomato |
#FF6347
|
turquoise |
#40E0D0
|
violet |
#EE82EE
|
wheat |
#F5DEB3
|
white |
#FFFFFF
|
whitesmoke |
#F5F5F5
|
yellow |
#FFFF00
|
yellowgreen |
#9ACD32
|
|
Beachten Sie:
bei gray, lightgray, darkgray und darkslategray sind sowohl die Schreibweisen gray als auch grey möglich.
Das Schlüsselwort transparent
ist ebenfalls ein Farbname. Es darf überall dort vorkommen, wo ein Farbwert erwartet wird. Statt einer Farbe wird dann eine transparente Fläche gebildet, etwa ein unsichtbarer Rahmen oder ein durchsichtiges Element.
transparent
ist ein Synonym für rgba(0,0,0,0)
.
In CSS 2 wurde das Konzept der Systemfarben eingeführt. Dabei handelte es sich um 28 Schlüsselwörter, die die Farben wiedergeben sollen, die auch das Betriebssystem zur Darstellung von Fenstern, Text und Schaltflächen verwendet.[4]
Im CSS Color Module Level 4 wurden diese Systemfarben auf 12 reduziert:
Beispiel |
Schlüsselwort |
Farbe, die wiedergegeben wird
|
|
ActiveText |
Rahmenfarbe aktiver Links.
|
|
ButtonFace |
Oberfläche von Schaltflächen und Fenstern.
|
|
ButtonText |
Text von Schaltflächen.
|
|
Canvas |
Hintergrund
|
|
CanvasText |
Textfarbe von Anwendungen und Dokumentinhalten
|
|
Field |
Hintergrundfarbe von Eingabefeldern
|
|
FieldText |
Textfarbe von Eingabefeldern
|
|
GrayText |
Textfarbe ausgegrauter (deaktivierter) Elemente. Entspricht #000, wenn der Grafiktreiber keinen durchgängigen Grauton unterstützt.
|
|
Highlight |
Markierungsfarbe ausgewählter Bereiche.
|
|
HighlightText |
Textfarbe in ausgewählten Bereichen.
|
|
LinkText |
Textfarbe für unbesuchte, inaktive Links
|
|
VisitedText |
Textfarbe besuchter Links.
|
- ↑ ars technica: “Tomato” versus “#FF6347”—the tragicomic history of CSS color names
- ↑ Merriam-Webster: 'Gray' vs. 'Grey': What is the Difference?
- ↑ Eric Meyer: rebeccapurple
- ↑ MDN: System Colors