Webfarben sind Farben, die für die Gestaltung von Webseiten eingesetzt werden. Webdesigner haben mehrere Möglichkeiten, die Farben einzelner Elemente auf ihren Webseiten festzulegen. Viele Farben sind bereits benannt (siehe unten), so dass keine Kenntnis über die dezimale oder hexadezimale Farbnotierung notwendig ist. Letztere ist jedoch auch nicht schwer zu verstehen.
Farbnotierungen in Stylesheets (CSS)
Webentwickler haben verschiedene Möglichkeiten, eine Farbe innerhalb eines Stylesheets zu notieren:
RGB-Farbraum
Farben des RGB-Farbraums werden wie folgt definiert:
p { color: #F00; } /* #rgb */
p { color: #FF0000; } /* #rrggbb */
p { color: rgb(255, 0, 0); } /* integer 0 - 255 */
p { color: rgba(64, 0, 0, 0.7); } /* 0.7 = 70 % Deckkraft - spezifiziert in CSS 3 */
p { color: rgb(100%, 0%, 0%); } /* prozentuale Angaben 0,0 % - 100,0 % */
HSL-Farbraum
Farben nach dem Model des HSL-Farbraumes können ab CSS 3 wie folgt notiert werden:[1]
p { color: hsl(120, 100%, 50%); } /* grün */
p { color: hsl(120, 100%, 25%); } /* dunkelgrün */
p { color: hsl(120, 100%, 75%); } /* hellgrün */
p { color: hsl(120, 50%, 50%); } /* pastellgrün */
p { color: hsla(120, 100%, 50%, 0.7); } /* grün mit 70 % Deckkraft */
CMYK-Farbraum
Ab CSS 3 können Farben auch nach dem CMYK-Farbmodell angegeben werden:[2]
p { color: device-cmyk(0.0, 0.95, 1, 0.1); } /* rot */
Farbnamen
Vielen Farbwerten ist ein Name zugeordnet. Sie können wie folgt benutzt werden:
p { color: navy; /* marine */ }
p { color: red; /* rot */ }
Die Zuordnung der Farbwerte ist nachfolgend beschrieben.
Notierung mit Rückwärtskompatibilität
Da nur moderne Browser die rgba-, hsl(a)- und cmyk-Notierung interpretieren können, müssen Webentwickler eine sog. Fallback-Farbe definieren:
p {
color: red; /* Rückwärtskompatibilität */
color: cmyk(0.0, 0.95, 1, 0.1); /* Wird von modernen Browsern interpretiert */
}
Benannte Farben
Es gibt mehrere Standards, die den Hexadezimal-Codes einen Farbnamen zuordnen. So lassen sich die englischsprachigen Namen anstelle der Anteilswerte im RGB-Farbraum angeben. Durch die Angabe solcher Namen ist es für den Entwickler möglich, nicht die hexadezimale Notierung, sondern die Farbangaben nach der eigenen Wahrnehmung zu wählen. Allerdings ist die Anzahl der Farbnamen (unabhängig vom jeweiligen Standard) sehr begrenzt.
HTML 4/VGA
HTML 4: die 16 Farben des VGA-16-Farben-Standards
|
black
|
#000000
|
silver
|
#C0C0C0
|
maroon
|
#800000
|
red
|
#FF0000
|
green
|
#008000
|
lime
|
#00FF00
|
olive
|
#808000
|
yellow
|
#FFFF00
|
navy
|
#000080
|
blue
|
#0000FF
|
purple
|
#800080
|
fuchsia
|
#FF00FF
|
teal
|
#008080
|
aqua
|
#00FFFF
|
gray
|
#808080
|
white
|
#FFFFFF
|
Die dunklen Farben ergeben sich durch eine (nahezu) Halbierung des Rot-, Grün- und Blauwerts von 0xFF auf 0x80 (Ausnahme: schwarz und silber).
CSS 3
Die CSS-3-Spezifikation des World Wide Web Consortium (W3C) definiert aus der Liste des X11, die für SVG 1.0 standardisiert wurde, folgende 140 Farben:
CSS3-Farbnamen (ursprünglich X11-Farbnamen)
|
Nach Sättigung und Farbton
|
Maroon
|
#800000
|
DarkRed
|
#8B0000
|
FireBrick
|
#B22222
|
Red
|
#FF0000
|
Salmon
|
#FA8072
|
Tomato
|
#FF6347
|
Coral
|
#FF7F50
|
OrangeRed
|
#FF4500
|
Chocolate
|
#D2691E
|
SandyBrown
|
#F4A460
|
DarkOrange
|
#FF8C00
|
Orange
|
#FFA500
|
DarkGoldenrod
|
#B8860B
|
Goldenrod
|
#DAA520
|
Gold
|
#FFD700
|
Olive
|
#808000
|
Yellow
|
#FFFF00
|
YellowGreen
|
#9ACD32
|
GreenYellow
|
#ADFF2F
|
Chartreuse
|
#7FFF00
|
LawnGreen
|
#7CFC00
|
Green
|
#008000
|
Lime
|
#00FF00
|
LimeGreen
|
#32CD32
|
SpringGreen
|
#00FF7F
|
MediumSpringGreen
|
#00FA9A
|
Turquoise
|
#40E0D0
|
LightSeaGreen
|
#20B2AA
|
MediumTurquoise
|
#48D1CC
|
Teal
|
#008080
|
DarkCyan
|
#008B8B
|
Aqua
|
#00FFFF
|
Cyan
|
#00FFFF
|
DarkTurquoise
|
#00CED1
|
DeepSkyBlue
|
#00BFFF
|
DodgerBlue
|
#1E90FF
|
RoyalBlue
|
#4169E1
|
Navy
|
#000080
|
DarkBlue
|
#00008B
|
MediumBlue
|
#0000CD
|
Blue
|
#0000FF
|
BlueViolet
|
#8A2BE2
|
DarkOrchid
|
#9932CC
|
DarkViolet
|
#9400D3
|
Purple
|
#800080
|
DarkMagenta
|
#8B008B
|
Fuchsia
|
#FF00FF
|
Magenta
|
#FF00FF
|
MediumVioletRed
|
#C71585
|
DeepPink
|
#FF1493
|
HotPink
|
#FF69B4
|
Crimson
|
#DC143C
|
Brown
|
#A52A2A
|
IndianRed
|
#CD5C5C
|
RosyBrown
|
#BC8F8F
|
LightCoral
|
#F08080
|
Snow
|
#FFFAFA
|
MistyRose
|
#FFE4E1
|
DarkSalmon
|
#E9967A
|
LightSalmon
|
#FFA07A
|
Sienna
|
#A0522D
|
SeaShell
|
#FFF5EE
|
SaddleBrown
|
#8B4513
|
Peachpuff
|
#FFDAB9
|
Peru
|
#CD853F
|
Linen
|
#FAF0E6
|
Bisque
|
#FFE4C4
|
Burlywood
|
#DEB887
|
Tan
|
#D2B48C
|
AntiqueWhite
|
#FAEBD7
|
NavajoWhite
|
#FFDEAD
|
BlanchedAlmond
|
#FFEBCD
|
PapayaWhip
|
#FFEFD5
|
Moccasin
|
#FFE4B5
|
Wheat
|
#F5DEB3
|
Oldlace
|
#FDF5E6
|
FloralWhite
|
#FFFAF0
|
Cornsilk
|
#FFF8DC
|
Khaki
|
#F0E68C
|
LemonChiffon
|
#FFFACD
|
PaleGoldenrod
|
#EEE8AA
|
DarkKhaki
|
#BDB76B
|
Beige
|
#F5F5DC
|
LightGoldenrodYellow
|
#FAFAD2
|
LightYellow
|
#FFFFE0
|
Ivory
|
#FFFFF0
|
OliveDrab
|
#6B8E23
|
DarkOliveGreen
|
#556B2F
|
DarkSeaGreen
|
#8FBC8F
|
DarkGreen
|
#006400
|
ForestGreen
|
#228B22
|
LightGreen
|
#90EE90
|
PaleGreen
|
#98FB98
|
Honeydew
|
#F0FFF0
|
SeaGreen
|
#2E8B57
|
MediumSeaGreen
|
#3CB371
|
Mintcream
|
#F5FFFA
|
MediumAquamarine
|
#66CDAA
|
Aquamarine
|
#7FFFD4
|
DarkSlateGray
|
#2F4F4F
|
PaleTurquoise
|
#AFEEEE
|
LightCyan
|
#E0FFFF
|
Azure
|
#F0FFFF
|
CadetBlue
|
#5F9EA0
|
PowderBlue
|
#B0E0E6
|
LightBlue
|
#ADD8E6
|
SkyBlue
|
#87CEEB
|
LightskyBlue
|
#87CEFA
|
SteelBlue
|
#4682B4
|
AliceBlue
|
#F0F8FF
|
SlateGray
|
#708090
|
LightSlateGray
|
#778899
|
LightsteelBlue
|
#B0C4DE
|
CornflowerBlue
|
#6495ED
|
Lavender
|
#E6E6FA
|
GhostWhite
|
#F8F8FF
|
MidnightBlue
|
#191970
|
SlateBlue
|
#6A5ACD
|
DarkSlateBlue
|
#483D8B
|
RebeccaPurple
|
#663399
|
MediumSlateBlue
|
#7B68EE
|
MediumPurple
|
#9370DB
|
Indigo
|
#4B0082
|
MediumOrchid
|
#BA55D3
|
Plum
|
#DDA0DD
|
Violet
|
#EE82EE
|
Thistle
|
#D8BFD8
|
Orchid
|
#DA70D6
|
LavenderBlush
|
#FFF0F5
|
PaleVioletRed
|
#DB7093
|
Pink
|
#FFC0CB
|
LightPink
|
#FFB6C1
|
Black
|
#000000
|
DimGray
|
#696969
|
Gray
|
#808080
|
DarkGray
|
#A9A9A9
|
Silver
|
#C0C0C0
|
LightGray
|
#D3D3D3
|
Gainsboro
|
#DCDCDC
|
WhiteSmoke
|
#F5F5F5
|
White
|
#FFFFFF
|
|
Nach Helligkeit (CIE)
|
Black
|
#000000
|
Navy
|
#000080
|
DarkBlue
|
#00008B
|
MediumBlue
|
#0000CD
|
MidnightBlue
|
#191970
|
Indigo
|
#4B0082
|
Blue
|
#0000FF
|
Maroon
|
#800000
|
DarkRed
|
#8B0000
|
Purple
|
#800080
|
RebeccaPurple
|
#663399
|
DarkMagenta
|
#8B008B
|
DarkViolet
|
#9400D3
|
SaddleBrown
|
#8B4513
|
DarkSlateBlue
|
#483D8B
|
DarkGreen
|
#006400
|
DarkSlateGray
|
#2F4F4F
|
Brown
|
#A52A2A
|
FireBrick
|
#B22222
|
Sienna
|
#A0522D
|
BlueViolet
|
#8A2BE2
|
DarkOliveGreen
|
#556B2F
|
Green
|
#008000
|
Crimson
|
#DC143C
|
MediumVioletRed
|
#C71585
|
Red
|
#FF0000
|
DarkOrchid
|
#9932CC
|
Teal
|
#008080
|
DimGray
|
#696969
|
Chocolate
|
#D2691E
|
Fuchsia
|
#FF00FF
|
Magenta
|
#FF00FF
|
SlateBlue
|
#6A5ACD
|
Olive
|
#808000
|
IndianRed
|
#CD5C5C
|
DarkCyan
|
#008B8B
|
OrangeRed
|
#FF4500
|
RoyalBlue
|
#4169E1
|
ForestGreen
|
#228B22
|
MediumOrchid
|
#BA55D3
|
DeepPink
|
#FF1493
|
DarkGoldenrod
|
#B8860B
|
SeaGreen
|
#2E8B57
|
OliveDrab
|
#6B8E23
|
MediumSlateBlue
|
#7B68EE
|
Tomato
|
#FF6347
|
PaleVioletRed
|
#DB7093
|
Gray
|
#808080
|
SlateGray
|
#708090
|
Peru
|
#CD853F
|
DodgerBlue
|
#1E90FF
|
DarkOrange
|
#FF8C00
|
MediumPurple
|
#9370DB
|
SteelBlue
|
#4682B4
|
Coral
|
#FF7F50
|
LightSlateGray
|
#778899
|
Orchid
|
#DA70D6
|
Salmon
|
#FA8072
|
LightCoral
|
#F08080
|
HotPink
|
#FF69B4
|
RosyBrown
|
#BC8F8F
|
Orange
|
#FFA500
|
Goldenrod
|
#DAA520
|
CadetBlue
|
#5F9EA0
|
LightSeaGreen
|
#20B2AA
|
DarkSalmon
|
#E9967A
|
DeepSkyBlue
|
#00BFFF
|
Violet
|
#EE82EE
|
CornflowerBlue
|
#6495ED
|
MediumSeaGreen
|
#3CB371
|
SandyBrown
|
#F4A460
|
DarkTurquoise
|
#00CED1
|
LightSalmon
|
#FFA07A
|
LimeGreen
|
#32CD32
|
DarkGray
|
#A9A9A9
|
DarkKhaki
|
#BDB76B
|
Plum
|
#DDA0DD
|
Tan
|
#D2B48C
|
DarkSeaGreen
|
#8FBC8F
|
YellowGreen
|
#9ACD32
|
BurlyWood
|
#DEB887
|
Gold
|
#FFD700
|
MediumAquamarine
|
#66CDAA
|
LightPink
|
#FFB6C1
|
Silver
|
#C0C0C0
|
Lime
|
#00FF00
|
MediumTurquoise
|
#48D1CC
|
MediumSpringGreen
|
#00FA9A
|
Thistle
|
#D8BFD8
|
SpringGreen
|
#00FF7F
|
LightSteelBlue
|
#B0C4DE
|
Pink
|
#FFC0CB
|
Turquoise
|
#40E0D0
|
Aqua
|
#00FFFF
|
Cyan
|
#00FFFF
|
LawnGreen
|
#7CFC00
|
SkyBlue
|
#87CEEB
|
Chartreuse
|
#7FFF00
|
LightSkyBlue
|
#87CEFA
|
LightGray
|
#D3D3D3
|
LightBlue
|
#ADD8E6
|
LightGreen
|
#90EE90
|
GreenYellow
|
#ADFF2F
|
PeachPuff
|
#FFDAB9
|
Yellow
|
#FFFF00
|
Khaki
|
#F0E68C
|
Wheat
|
#F5DEB3
|
NavajoWhite
|
#FFDEAD
|
Gainsboro
|
#DCDCDC
|
PowderBlue
|
#B0E0E6
|
PaleGoldenrod
|
#EEE8AA
|
Moccasin
|
#FFE4B5
|
Bisque
|
#FFE4C4
|
PaleGreen
|
#98FB98
|
MistyRose
|
#FFE4E1
|
PaleTurquoise
|
#AFEEEE
|
BlanchedAlmond
|
#FFEBCD
|
Lavender
|
#E6E6FA
|
AntiqueWhite
|
#FAEBD7
|
Aquamarine
|
#7FFFD4
|
PapayaWhip
|
#FFEFD5
|
Linen
|
#FAF0E6
|
Beige
|
#F5F5DC
|
LavenderBlush
|
#FFF0F5
|
OldLace
|
#FDF5E6
|
LemonChiffon
|
#FFFACD
|
LightGoldenrodYellow
|
#FAFAD2
|
Cornsilk
|
#FFF8DC
|
Seashell
|
#FFF5EE
|
WhiteSmoke
|
#F5F5F5
|
AliceBlue
|
#F0F8FF
|
FloralWhite
|
#FFFAF0
|
GhostWhite
|
#F8F8FF
|
LightYellow
|
#FFFFE0
|
Snow
|
#FFFAFA
|
Honeydew
|
#F0FFF0
|
LightCyan
|
#E0FFFF
|
Ivory
|
#FFFFF0
|
MintCream
|
#F5FFFA
|
Azure
|
#F0FFFF
|
White
|
#FFFFFF
|
|
Alphabetisch
|
Code
|
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
|
DarkKhaki
|
#BDB76B
|
DarkMagenta
|
#8B008B
|
DarkOliveGreen
|
#556B2F
|
DarkOrange
|
#FF8C00
|
DarkOrchid
|
#9932CC
|
DarkRed
|
#8B0000
|
DarkSalmon
|
#E9967A
|
DarkSeaGreen
|
#8FBC8F
|
DarkSlateBlue
|
#483D8B
|
DarkSlateGray
|
#2F4F4F
|
DarkTurquoise
|
#00CED1
|
DarkViolet
|
#9400D3
|
DeepPink
|
#FF1493
|
DeepSkyBlue
|
#00BFFF
|
DimGray
|
#696969
|
DodgerBlue
|
#1E90FF
|
FireBrick
|
#B22222
|
FloralWhite
|
#FFFAF0
|
ForestGreen
|
#228B22
|
Fuchsia
|
#FF00FF
|
Gainsboro
|
#DCDCDC
|
GhostWhite
|
#F8F8FF
|
Gold
|
#FFD700
|
Goldenrod
|
#DAA520
|
Gray
|
#808080
|
Green
|
#008000
|
GreenYellow
|
#ADFF2F
|
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
|
LightGreen
|
#90EE90
|
LightGray
|
#D3D3D3
|
LightPink
|
#FFB6C1
|
LightSalmon
|
#FFA07A
|
LightSeaGreen
|
#20B2AA
|
LightSkyBlue
|
#87CEFA
|
LightSlateGray
|
#778899
|
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
|
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
|
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
|
|
Hierbei kann statt der Silbe gray auch grey geschrieben werden. Ferner repräsentieren aqua und cyan sowie fuchsia und magenta jeweils dieselbe Farbe. Die Liste setzt sich im Wesentlichen aus den 120 Farben des Netscape-Browsers und den 16 VGA-Farben zusammen. Nur die Farben bisque (#FFE4C4) und blanchedalmond (#FFEBCD) stammen nicht von dort.
Herstellerabhängige Farbnamen
Zusätzlich haben die Hersteller von Browsern eine Vielzahl von Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, dass alle Browser diese Farbnamen auch interpretieren können.
Websichere Farben
Eine Gruppe von Farben wird allgemein als websichere Farbpalette bezeichnet. Diese wurde Mitte der 1990er Jahre entwickelt, als Computer meist nur 256 Farben anzeigen konnten. Die Palette wurde zuerst durch Lynda Weinman vorgeschlagen.
Ziel war es, eine Farbpalette zu schaffen, die auf allen Bildschirmen gleich dargestellt wurde.
Bei sechs verschiedenen Farbtönen für jede Grundfarbe (Rot, Grün und Blau) ergeben sich 6 × 6 × 6 = 63 = 216 darstellbare Farben.
Der Spielraum für eine gute Farbgestaltung von Webseiten ist damit aber stark eingeschränkt. Hinzu kommt, dass durch unzureichend kalibrierte Bildschirme und die subjektive Wahrnehmung von Farben durch den Betrachter dieses Ziel nie ganz erreicht werden konnte.
Da heute fast alle Grafikkarten über 16,7 Millionen Farben darstellen können – wie auch die meisten Mobiltelefone – haben websicheren Farben Ihre Bedeutung verloren.
Vorlage:216 websichere Farben
Literatur
- ↑ HSLA Colors auf css3.info
- ↑ CMYK colors auf w3.org
Vorlage:Farbdarstellung