Webfarbe

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche

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, so dass keine Kenntnis über die dezimale oder hexadezimale Farbnotierung notwendig ist.

Farbnotierungen in Stylesheets (CSS)[Bearbeiten]

Webentwickler haben verschiedene Möglichkeiten, eine Farbe innerhalb eines Stylesheets zu notieren:

RGB-Farbraum[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Es gibt mehrere Standards die Farbnamen den Hexadezimal-Codes 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 ohne die hexadezimale Notierung die Farbangaben nach Vorstellung zu wählen.

HTML 4/VGA[Bearbeiten]

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[Bearbeiten]

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
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
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
Alphabetische Reihenfolge
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
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 daher.

Herstellerabhängige Farbnamen[Bearbeiten]

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[Bearbeiten]

Eine Gruppe von Farben wird allgemein als websichere Farbpalette bezeichnet. Diese wurde entwickelt als Computer meist nur 256 Farben anzeigen konnten und eine Palette von Farben benötigt wurde, die nicht von der Grafik durch Dithering angenähert werden mussten. Betriebssysteme belegen für eigenen Gebrauch etwa 16 bis 20 nicht anders benutzbare Farben, so verblieben zirka 236 frei wählbare Farben. Eine weitere Überlegung war, für jede Grundfarbe (Rot, Grün, und Blau) sechs verschiedene Farbtöne anbieten zu können, also wurden (für die drei Grundfarben) 6 × 6 × 6 = 63 = 216 darstellbare Farben gewählt. Die Palette wurde zuerst durch Lynda Weinman vorgeschlagen. Standardmäßig umgesetzt wurde sie zuerst von Netscape, wobei die restlichen 40 von 256 Farben frei definierbar waren. Die websicheren Farben haben keine Namen, werden also durch die Angaben ihrer RGB-Werte im RGB-Farbraum festgelegt. Die RGB-Werte je Farbe betragen in hexadezimaler Darstellung 0016, 3316, 6616, 9916, CC16, FF16.

Designer werden oft dazu angehalten, die 216 websicheren Farben in ihren Webseiten zu verwenden. Die websicheren Farben wurden Mitte der 1990er Jahre entwickelt, als Grafikkarten mit 8 Bit Farbtiefe der übliche Standard waren. Durch die Verbreitung von Grafikkarten, die 24 Bit Farbtiefe oder besser darstellen können, hat die zwingende Verwendung der Palette der websicheren Farben in den letzten Jahren an Bedeutung verloren. Bei Webseiten für einen breiten Anwenderkreis (Portale, Suchmaschinen, News) mit unterschiedlichsten Monitoren und Computerarten ist die Anwendung websicherer Farben auch heute und wohl in Zukunft alternativlos. Der grafisch anspruchsvolle Benutzer kann eine ausreichende Übereinstimmung der rechnerisch programmierten Farbwerte mit den dargestellten Bildergebnissen durch das Kalibrieren des verwendeten Monitors zur Darstellung der Webfarbe mit rein visuellen Mitteln näherungsweise oder zwischen den von manchen Herstellern angebotenen Alternativen zur Standard-Darstellung wählen. Die Erwartungen an eine farbgetreue Wiedergabe können bei handelsüblichen Monitoren (Twisted Nematic) dennoch nicht hoch sein. Herstellereigenheiten, Betrachtungswinkel und Umgebungslicht beeinflussen die Darstellung stark und tragen dazu bei, dass Farbunterschiede von im Farbraum benachbarten Farben mehrheitlich nicht oder kaum erkennbar sind.

Tabelle der 216 websicheren Farben
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Einzelnachweise[Bearbeiten]

  1. HSLA Colors auf css3.info
  2. CMYK colors auf w3.org
Farb-Check-RGB.png

Die in diesem Artikel angezeigten Farben sind nicht farbverbindlich und können auf verschiedenen Monitoren unterschiedlich erscheinen.
Eine Möglichkeit, die Darstellung mit rein visuellen Mitteln näherungsweise zu kalibrieren, bietet das nebenstehende Testbild (nur wenn die Seite nicht gezoomt dargestellt wird): Tritt auf einer oder mehreren der drei grauen Flächen ein Buchstabe („R“ für Rot, „G“ für Grün oder „B“ für Blau) stark hervor, sollte die Gammakorrektur des korrespondierenden Monitor-Farbkanals korrigiert werden. Das Bild ist auf einen Gammawert von 2,2 eingestellt – den gebräuchlichen Wert für IBM-kompatible Computer. Apple-Macintosh-Rechner hingegen verwenden bis einschließlich System 10.5 („Leopard“) standardmäßig einen Gammawert von 1,8, seit dem System 10.6 („Snow Leopard“) kommt Gamma 2,2 zum Einsatz.