- Webfarbe
-
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 vorausgesetzt wird.
Inhaltsverzeichnis
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% Transparenz - 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% Transparenz */
CMYK-Farbraum
Ab CSS 3 können Farben auch nach dem CMYK-Farbmodell angegeben werden[2]:
p { color: cmyk(0.0, 0.95, 1, 0.1) } /* rot */
Farbnamen
Viele Farbwerte sind einem Namen zugeordnet und können wie folgt benutzt werden:
p { color: navy; /* dunkelblau */ } 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 Farbnamen den Hexadezimal-Codes zuordnen. Dabei werden sie durch ihren englischsprachigen Namen anstelle ihre Werte im RGB-Farbraum angegeben. Durch die Angabe des Namens erspart sich der Entwickler die hexadezimale Notierung.
HTML 4/VGA
VGA-FarbenHTML 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:
CSS-3-FarbenNach 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
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 andere Gruppe von Farben wird allgemein als websichere Farbpalette bezeichnet. Als die Palette der websicheren Farben entwickelt wurde, konnten Computer oft nur 256 verschiedene Farben anzeigen. Es wurde eine Palette von Farben benötigt, die nicht von der Grafik durch Dithering angenähert werden mussten. Betriebssysteme belegen für ihren eigenen Gebrauch etwa 16 bis 20 Farben, die nicht benutzt werden können, es bleiben also 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 6 × 6 × 6 = 63 = 216 darstellbare Farben. 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 0x00, 0x33, 0x66, 0x99, 0xCC, 0xFF.
Designer werden oft noch dazu angehalten, die 216 websicheren Farben in ihren Webseiten zu verwenden. Die websicheren Farben wurden aber 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, ist die Palette der websicheren Farben in den 2010er Jahren bedeutungslos geworden.
Tabelle der 216 websicheren Farben#000 #003 #006 #009 #00C #00F #030 #033 #036 #039 #03C #03F #300 #303 #306 #309 #30C #30F #330 #333 #336 #339 #33C #33F #600 #603 #606 #609 #60C #60F #630 #633 #636 #639 #63C #63F #900 #903 #906 #909 #90C #90F #930 #933 #936 #939 #93C #93F #C00 #C03 #C06 #C09 #C0C #C0F #C30 #C33 #C36 #C39 #C3C #C3F #F00 #F03 #F06 #F09 #F0C #F0F #F30 #F33 #F36 #F39 #F3C #F3F #060 #063 #066 #069 #06C #06F #090 #093 #096 #099 #09C #09F #360 #363 #366 #369 #36C #36F #390 #393 #396 #399 #39C #39F #660 #663 #666 #669 #66C #66F #690 #693 #696 #699 #69C #69F #960 #963 #966 #969 #96C #96F #990 #993 #996 #999 #99C #99F #C60 #C63 #C66 #C69 #C6C #C6F #C90 #C93 #C96 #C99 #C9C #C9F #F60 #F63 #F66 #F69 #F6C #F6F #F90 #F93 #F96 #F99 #F9C #F9F #0C0 #0C3 #0C6 #0C9 #0CC #0CF #0F0 #0F3 #0F6 #0F9 #0FC #0FF #3C0 #3C3 #3C6 #3C9 #3CC #3CF #3F0 #3F3 #3F6 #3F9 #3FC #3FF #6C0 #6C3 #6C6 #6C9 #6CC #6CF #6F0 #6F3 #6F6 #6F9 #6FC #6FF #9C0 #9C3 #9C6 #9C9 #9CC #9CF #9F0 #9F3 #9F6 #9F9 #9FC #9FF #CC0 #CC3 #CC6 #CC9 #CCC #CCF #CF0 #CF3 #CF6 #CF9 #CFC #CFF #FC0 #FC3 #FC6 #FC9 #FCC #FCF #FF0 #FF3 #FF6 #FF9 #FFC #FFF Siehe auch
Weblinks
- Eine Farbtabelle sortiert nach Schattierungen
- HTML Color Spectrum Chart
- Farbnamen des W3C
- Web Color Reference
- „the browser-safe web-palette“, ein Abgesang auf die websicheren Farben von einer ihrer Protagonistinnen: Lynda Weinmann
- „VisiBone’s ‚Web-Safe‘ Color Lab“, beschreibt eine intuitivere Anordnung der websicheren Farben
- Hexcodes der Webfarben
- FarbFinder Ein JavaScript-Programm zum direkten einfärben einer HTML-Seite. Die Tabellen sind der natürlichen Wahrnehmung entsprechend dreidimensional sortiert.
- Webfarben Hexcodes Dynamische Tabelle der Webfarben und Farbe Pickerwerkzeug
- Zusammenpassende Farb-Schemata – sehr nützlich zur Auswahl passender Schattierungen
- http://www.metacolor.de Sehr gutes und umfangreiches Tutorial über Farben im Webdesign
- A3W Multimedia – Webcolors, verschiedene Ansichten und Farbrechner
- RGB ↔ HEX Umrechner mit Farbanzeige
Einzelnachweise
Die in diesem Artikel verwendeten Farben werden auf jedem Monitor anders dargestellt und sind nicht farbverbindlich. Eine Möglichkeit, die Darstellung mit rein visuellen Mitteln näherungsweise zu kalibrieren, bietet das nebenstehende Testbild: 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.
Wikimedia Foundation.
