Web-Farben<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../favicon.ico"><link rel="stylesheet" href="../../wikistatic.css"></head> <body><div id=topbar><table width='98%' border=0><tr><td><a href="../../h/ha/hauptseite.html" title="Hauptseite">Hauptseite</a> | <b><a href="http://de.wikipedia.org/wiki/Web-Farben" title="Web-Farben">Aktueller Wikipedia-Artikel</a></b></td> <td align=right nowrap><form name=search class=inline method=get action="../../../search/search.html"><input name=search size=19><input type=submit value=Search></form></td></tr></table></div> <div id=article><h1>Web-Farben</h1>Webautoren haben eine Vielzahl von Möglichkeiten die <A HREF="../../f/fa/farbe.html" title="Farbe">Farben</A> einzelner Elemente auf ihren Webseiten festzulegen. Farben können als <A HREF="../../r/rg/rgb_farbraum.html" title="RGB-Farbraum">RGB</A>-Werte im Hexadezimalformat definiert werden. Außerdem können englische Farbnamen verwendet werden.<p> <A NAME="Standardisierte Farbnamen"><H2>Standardisierte Farbnamen</H2><p> Die <A HREF="../../h/hy/hypertext_markup_language.html" title="Hypertext Markup Language">HTML</A> 4.01 Spezifikation des <A HREF="../../w/wo/world_wide_web_consortium.html" title="World Wide Web Consortium">W3C</A> definiert sechzehn verschiedene Farbnamen:<p> <table border="0" ><tr> <th >Farbe </th><th >Hexadezimal </th><th >Farbe </th><th >Hexadezimal </td></tr><tr > <td >black </td><td style="background:#000000; color:#ffffff; font-family:monospace;">#000000 </td><td >silver </td><td style="background:#c0c0c0; color:#000000; font-family:monospace;">#c0c0c0 </td></tr><tr > <td >gray </td><td style="background:#808080; color:#ffffff; font-family:monospace;">#808080 </td><td >white </td><td style="background:#ffffff; color:#000000; font-family:monospace;">#ffffff </td></tr><tr > <td >maroon </td><td style="background:#800000; color:#ffffff; font-family:monospace;">#800000 </td><td >red </td><td style="background:#ff0000; color:#000000; font-family:monospace;">#ff0000 </td></tr><tr > <td >purple </td><td style="background:#800080; color:#ffffff; font-family:monospace;">#800080 </td><td >fuchsia </td><td style="background:#ff00ff; color:#000000; font-family:monospace;">#ff00ff </td></tr><tr > <td >green </td><td style="background:#008000; color:#ffffff; font-family:monospace;">#008000 </td><td >lime </td><td style="background:#00ff00; color:#000000; font-family:monospace;">#00ff00 </td></tr><tr > <td >olive </td><td style="background:#808000; color:#ffffff; font-family:monospace;">#808000 </td><td >yellow </td><td style="background:#ffff00; color:#000000; font-family:monospace;">#ffff00 </td></tr><tr > <td >navy </td><td style="background:#000080; color:#ffffff; font-family:monospace;">#000080 </td><td >blue </td><td style="background:#0000ff; color:#000000; font-family:monospace;">#0000ff </td></tr><tr > <td >teal </td><td style="background:#008080; color:#ffffff; font-family:monospace;">#008080 </td><td >aqua </td><td style="background:#00ffff; color:#000000; font-family:monospace;">#00ffff </td></tr></table><p> <A NAME="Herstellerabhängige Farbnamen"><H2>Herstellerabhängige Farbnamen</H2><p> Zusätzlich haben die Hersteller von Browsern eine Vielzahl von Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, das alle Browser diese Farbnamen auch interpretieren können. Um browserunabhängiges HTML zu erzeugen, sollte man diese Farbnamen nicht verwenden bzw. mithilfe der folgenden Tabelle durch ihre hexadezimalen Entsprechungen ersetzen.<p> Die folgende Tabelle enthält etliche herstellerabhängige Farbnamen, wie sie z.B. der <A HREF="../../n/ne/netscape_navigator.html" title="Netscape Navigator">Netscape Navigator</A> oder der <A HREF="../../i/in/internet_explorer.html" title="Internet Explorer">Internet Explorer</A> verwenden und ihre hexadezimalen Entsprechungen:<p> <table border="0" ><tr > <th >Farbe </th><th >hexadezimal </th><th >Farbe </th><th >hexadezimal </td></tr><tr > <td >indianred </td><td style="background:#cd5c5c; color:#ffffff; font-family:monospace;">#cd5c5c </td><td >darksalmon </td><td style="background:#e9967a; color:#ffffff; font-family:monospace;">#e9967a </td></tr><tr > <td >lightcoral </td><td style="background:#f08080; color:#ffffff; font-family:monospace;">#f08080 </td><td >salmon </td><td style="background:#fa8072; color:#ffffff; font-family:monospace;">#fa8072 </td></tr><tr > <td >orangered </td><td style="background:#ff4500; color:#ffffff; font-family:monospace;">#ff4500 </td><td >red </td><td style="background:#ff0000; color:#ffffff; font-family:monospace;">#ff0000 </td></tr><tr > <td >crimson </td><td style="background:#dc143c; color:#ffffff; font-family:monospace;">#dc143c </td><td >firebrick </td><td style="background:#b22222; color:#ffffff; font-family:monospace;">#b22222 </td></tr><tr > <td >darkred </td><td style="background:#8b0000; color:#ffffff; font-family:monospace;">#8b0000 </td><td >mediumvioletred </td><td style="background:#c71585; color:#ffffff; font-family:monospace;">#c71585 </td></tr><tr > <td >pink </td><td style="background:#ffc0cb; font-family:monospace;">#ffc0cb </td><td >lightpink </td><td style="background:#ffb6c1; font-family:monospace;">#ffb6c1 </td></tr><tr > <td >hotpink </td><td style="background:#ff69b4; font-family:monospace;">#ff69b4 </td><td >deeppink </td><td style="background:#ff1493; font-family:monospace;">#ff1493 </td></tr><tr > <td >palevioletred </td><td style="background:#db7093; font-family:monospace;">#db7093 </td><td >darkkhaki </td><td style="background:#bdb76b; font-family:monospace;">#bdb76b </td></tr><tr > <td >khaki </td><td style="background:#f0e68c; font-family:monospace;">#f0e68c </td><td >palegoldenrod </td><td style="background:#eee8aa; font-family:monospace;">#eee8aa </td></tr><tr > <td >lightgoldenrodyellow </td><td style="background:#fafad2; font-family:monospace;">#fafad2 </td><td >lightyellow </td><td style="background:#ffffe0; font-family:monospace;">#ffffe0 </td></tr><tr > <td >lemonchiffon </td><td style="background:#fffacd; font-family:monospace;">#fffacd </td><td >yellow </td><td style="background:#ffff00; font-family:monospace;">#ffff00 </td></tr><tr > <td >gold </td><td style="background:#ffd700; font-family:monospace;">#ffd700 </td><td >papayawhip </td><td style="background:#ffefd5; font-family:monospace;">#ffefd5 </td></tr><tr > <td >moccasin </td><td style="background:#ffe4b5; font-family:monospace;">#ffe4b5 </td><td >peachpuff </td><td style="background:#ffdab9; font-family:monospace;">#ffdab9 </td></tr><tr > <td >cyan </td><td style="background:#00ffff; font-family:monospace;">#00ffff </td><td >aqua </td><td style="background:#00ffff; font-family:monospace;">#00ffff </td></tr><tr > <td >aquamarine </td><td style="background:#7fffd4; font-family:monospace;">#7fffd4 </td><td >turquoise </td><td style="background:#40e0d0; font-family:monospace;">#40e0d0 </td></tr><tr > <td >mediumturquoise </td><td style="background:#48d1cc; font-family:monospace;">#48d1cc </td><td >darkturquoise </td><td style="background:#00ced1; font-family:monospace;">#00ced1 </td></tr><tr > <td >cadetblue </td><td style="background:#5f9ea0; color:#ffffff; font-family:monospace;">#5f9ea0 </td><td >slategray </td><td style="background:#708090; color:#ffffff; font-family:monospace;">#708090 </td></tr><tr > <td >lightcyan </td><td style="background:#e0ffff; font-family:monospace;">#e0ffff </td><td >paleturquoise </td><td style="background:#afeeee; font-family:monospace;">#afeeee </td></tr><tr > <td >powderblue </td><td style="background:#b0e0e6; font-family:monospace;">#b0e0e6 </td><td >lightsteelblue </td><td style="background:#b0c4de; font-family:monospace;">#b0c4de </td></tr><tr > <td >steelblue </td><td style="background:#4682b4; color:#ffffff; font-family:monospace;">#4682b4 </td><td >lightblue </td><td style="background:#add8e6; font-family:monospace;">#add8e6 </td></tr><tr > <td >skyblue </td><td style="background:#87ceeb; font-family:monospace;">#87ceeb </td><td >lightskyblue </td><td style="background:#87cefa; font-family:monospace;">#87cefa </td></tr><tr > <td >deepskyblue </td><td style="background:#00bfff; font-family:monospace;">#00bfff </td><td >cornflowerblue </td><td style="background:#6495ed; font-family:monospace;">#6495ed </td></tr><tr > <td >royalblue </td><td style="background:#4169e1; font-family:monospace;">#4169e1 </td><td >mediumslateblue </td><td style="background:#7b68ee; font-family:monospace;">#7b68ee </td></tr><tr > <td >dodgerblue </td><td style="background:#1e90ff; font-family:monospace;">#1e90ff </td><td >blue </td><td style="background:#0000ff; color:#ffffff; font-family:monospace;">#0000ff </td></tr><tr > <td >mediumblue </td><td style="background:#0000cd; color:#ffffff; font-family:monospace;">#0000cd </td><td >darkblue </td><td style="background:#00008b; color:#ffffff; font-family:monospace;">#00008b </td></tr><tr > <td >navy </td><td style="background:#000080; color:#ffffff; font-family:monospace;">#000080 </td><td >midnightblue </td><td style="background:#191970; color:#ffffff; font-family:monospace;">#191970 </td></tr><tr > <td >lightsalmon </td><td style="background:#ffa07a; font-family:monospace;">#ffa07a </td><td >orange </td><td style="background:#ffa500; font-family:monospace;">#ffa500 </td></tr><tr > <td >darkorange </td><td style="background:#ff8c00; font-family:monospace;">#ff8c00 </td><td >coral </td><td style="background:#ff7f50; font-family:monospace;">#ff7f50 </td></tr><tr > <td >tomato </td><td style="background:#ff6347; font-family:monospace;">#ff6347 </td><td >orangered </td><td style="background:#ff4500; font-family:monospace;">#ff4500 </td></tr><tr > <td >aquamarine </td><td style="background:#7fffd4; font-family:monospace;">#7fffd4 </td><td >mediumspringgreen </td><td style="background:#00fa9a; font-family:monospace;">#00fa9a </td></tr><tr > <td >springgreen </td><td style="background:#00ff7f; font-family:monospace;">#00ff7f </td><td >palegreen </td><td style="background:#98fb98; font-family:monospace;">#98fb98 </td></tr><tr > <td >greenyellow </td><td style="background:#adff2f; font-family:monospace;">#adff2f </td><td >chartreuse </td><td style="background:#7fff00; font-family:monospace;">#7fff00 </td></tr><tr > <td >lawngreen </td><td style="background:#7cfc00; font-family:monospace;">#7cfc00 </td><td >lime </td><td style="background:#00ff00; font-family:monospace;">#00ff00 </td></tr><tr > <td >lightgreen </td><td style="background:#90ee90; font-family:monospace;">#90ee90 </td><td >yellowgreen </td><td style="background:#9acd32; font-family:monospace;">#9acd32 </td></tr><tr > <td >limegreen </td><td style="background:#32cd32; font-family:monospace;">#32cd32 </td><td >mediumseagreen </td><td style="background:#3cb371; font-family:monospace;">#3cb371 </td></tr><tr > <td >darkseagreen </td><td style="background:#8fbc8f; font-family:monospace;">#8fbc8f </td><td >forestgreen </td><td style="background:#228b22; color:#ffffff; font-family:monospace;">#228b22 </td></tr><tr > <td >seagreen </td><td style="background:#2e8b57; color:#ffffff; font-family:monospace;">#2e8b57 </td><td >green </td><td style="background:#008000; color:#ffffff; font-family:monospace;">#008000 </td></tr><tr > <td >olivedrab </td><td style="background:#6b8e23; color:#ffffff; font-family:monospace;">#6b8e23 </td><td >olive </td><td style="background:#808000; color:#ffffff; font-family:monospace;">#808000 </td></tr><tr > <td >darkolivegreen </td><td style="background:#556b2f; color:#ffffff; font-family:monospace;">#556b2f </td><td >darkgreen </td><td style="background:#006400; color:#ffffff; font-family:monospace;">#006400 </td></tr><tr > <td >mediumaquamarine </td><td style="background:#66cdaa; font-family:monospace;">#66cdaa </td><td >turquoise </td><td style="background:#40e0d0; font-family:monospace;">#40e0d0 </td></tr><tr > <td >lightseagreen </td><td style="background:#20b2aa; font-family:monospace;">#20b2aa </td><td >darkcyan </td><td style="background:#008b8b; color:#ffffff; font-family:monospace;">#008b8b </td></tr><tr > <td >teal </td><td style="background:#008080; color:#ffffff; font-family:monospace;">#008080 </td><td >lavender </td><td style="background:#e6e6fa; font-family:monospace;">#e6e6fa </td></tr><tr > <td >thistle </td><td style="background:#d8bfd8; font-family:monospace;">#d8bfd8 </td><td >plum </td><td style="background:#dda0dd; font-family:monospace;">#dda0dd </td></tr><tr > <td >violet </td><td style="background:#ee82ee; font-family:monospace;">#ee82ee </td><td >fuchsia </td><td style="background:#ff00ff; font-family:monospace;">#ff00ff </td></tr><tr > <td >magenta </td><td style="background:#ff00ff; font-family:monospace;">#ff00ff </td><td >orchid </td><td style="background:#da70d6; font-family:monospace;">#da70d6 </td></tr><tr > <td >mediumorchid </td><td style="background:#ba55d3; font-family:monospace;">#ba55d3 </td><td >darkorchid </td><td style="background:#9932cc; color:#ffffff; font-family:monospace;">#9932cc </td></tr><tr > <td >blueviolet </td><td style="background:#8a2be2; color:#ffffff; font-family:monospace;">#8a2be2 </td><td >darkviolet </td><td style="background:#9400d3; color:#ffffff; font-family:monospace;">#9400d3 </td></tr><tr > <td >mediumpurple </td><td style="background:#9370db; color:#ffffff; font-family:monospace;">#9370db </td><td >slateblue </td><td style="background:#6a5acd; color:#ffffff; font-family:monospace;">#6a5acd </td></tr><tr > <td >purple </td><td style="background:#800080; color:#ffffff; font-family:monospace;">#800080 </td><td >darkmagenta </td><td style="background:#8b008b; color:#ffffff; font-family:monospace;">#8b008b </td></tr><tr > <td >darkslateblue </td><td style="background:#483d8b; color:#ffffff; font-family:monospace;">#483d8b </td><td >indigo </td><td style="background:#4b0082; color:#ffffff; font-family:monospace;">#4b0082 </td></tr><tr > <td >honeydew </td><td style="background:#f0fff0; font-family:monospace;">#f0fff0 </td><td >mintcream </td><td style="background:#f5fffa; font-family:monospace;">#f5fffa </td></tr><tr > <td >azure </td><td style="background:#f0ffff; font-family:monospace;">#f0ffff </td><td >aliceblue </td><td style="background:#f0f8ff; font-family:monospace;">#f0f8ff </td></tr><tr > <td >ghostwhite </td><td style="background:#f8f8ff; font-family:monospace;">#f8f8ff </td><td >whitesmoke </td><td style="background:#f5f5f5; font-family:monospace;">#f5f5f5 </td></tr><tr > <td >lavenderblush </td><td style="background:#fff0f5; font-family:monospace;">#fff0f5 </td><td >mistyrose </td><td style="background:#ffe4e1; font-family:monospace;">#ffe4e1 </td></tr><tr > <td >antiquewhite </td><td style="background:#faebd7; font-family:monospace;">#faebd7 </td><td >seashell </td><td style="background:#fff5ee; font-family:monospace;">#fff5ee </td></tr><tr > <td >snow </td><td style="background:#fffafa; font-family:monospace;">#fffafa </td><td >white </td><td style="background:#ffffff; font-family:monospace;">#ffffff </td></tr><tr > <td >beige </td><td style="background:#f5f5dc; font-family:monospace;">#f5f5dc </td><td >linen </td><td style="background:#faf0e6; font-family:monospace;">#faf0e6 </td></tr><tr > <td >oldlace </td><td style="background:#fdf5e6; font-family:monospace;">#fdf5e6 </td><td >floralwhite </td><td style="background:#fffaf0; font-family:monospace;">#fffaf0 </td></tr><tr > <td >ivory </td><td style="background:#fffff0; font-family:monospace;">#fffff0 </td><td >gainsboro </td><td style="background:#dcdcdc; font-family:monospace;">#dcdcdc </td></tr><tr > <td >lightgrey </td><td style="background:#d3d3d3; font-family:monospace;">#d3d3d3 </td><td >silver </td><td style="background:#c0c0c0; font-family:monospace;">#c0c0c0 </td></tr><tr > <td >darkgray </td><td style="background:#a9a9a9; font-family:monospace;">#a9a9a9 </td><td >gray </td><td style="background:#808080; color:#ffffff; font-family:monospace;">#808080 </td></tr><tr > <td >dimgray </td><td style="background:#696969; color:#ffffff; font-family:monospace;">#696969 </td><td >darkslategray </td><td style="background:#2f4f4f; color:#ffffff; font-family:monospace;">#2f4f4f </td></tr><tr > <td >lightslategray </td><td style="background:#778899; color:#ffffff; font-family:monospace;">#778899 </td><td >slategray </td><td style="background:#708090; color:#ffffff; font-family:monospace;">#708090 </td></tr><tr > <td >cornsilk </td><td style="background:#fff8dc; font-family:monospace;">#fff8dc </td><td >blanchedalmond </td><td style="background:#ffebcd; font-family:monospace;">#ffebcd </td></tr><tr > <td >bisque </td><td style="background:#ffe4c4; font-family:monospace;">#ffe4c4 </td><td >navajowhite </td><td style="background:#ffdead; font-family:monospace;">#ffdead </td></tr><tr > <td >wheat </td><td style="background:#f5deb3; font-family:monospace;">#f5deb3 </td><td >sandybrown </td><td style="background:#f4a460; font-family:monospace;">#f4a460 </td></tr><tr > <td >goldenrod </td><td style="background:#daa520; font-family:monospace;">#daa520 </td><td >darkgoldenrod </td><td style="background:#b8860b; font-family:monospace;">#b8860b </td></tr><tr > <td >peru </td><td style="background:#cd853f; font-family:monospace;">#cd853f </td><td >chocolate </td><td style="background:#d2691e; font-family:monospace;">#d2691e </td></tr><tr > <td >maroon </td><td style="background:#800000; color:#ffffff; font-family:monospace;">#800000 </td><td >saddlebrown </td><td style="background:#8b4513; color:#ffffff; font-family:monospace;">#8b4513 </td></tr><tr > <td >brown </td><td style="background:#a52a2a; color:#ffffff; font-family:monospace;">#a52a2a </td><td >sienna </td><td style="background:#a0522d; color:#ffffff; font-family:monospace;">#a0522d </td></tr><tr > <td >darkred </td><td style="background:#8b0000; color:#ffffff; font-family:monospace;">#8b0000 </td><td >burlywood </td><td style="background:#deb887; font-family:monospace;">#deb887 </td></tr><tr > <td >tan </td><td style="background:#d2b48c; font-family:monospace;">#d2b48c </td><td >rosybrown </td><td style="background:#bc8f8f; font-family:monospace;">#bc8f8f </td></tr><tr > <td >black </td><td style="background:#000000; color:#ffffff; font-family:monospace;">#000000 </td><td > </td><td > </td></tr></table><p> Auch wenn man die Farbnamen nicht verwendet, kann diese Tabelle ganz nützlich sein, um Farbwerte auszuwählen. Ein Beispiel: Das englische "lavender" steht für das deutsche "<A HREF="../../l/la/lavendel.html" title="Lavendel">Lavendel</A>", was man leicht nachprüfen kann. Mit <code>style="color: #e6e6fa"</code> oder <code>style="background-color: #e6e6fa"</code> können jetzt einzelne Elemente oder eine ganze Webseite lavendelfarben gestaltet werden.<p> <A NAME="Websichere Farben"><H2>Websichere Farben</H2><p> Eine andere Gruppe von Farben wird allgemein als <strong>"Websichere Farbpalette"</strong> 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 <A HREF="../../d/di/dithering.html" title="Dithering">Dithering</A> angenähert werden mußte. Betriebssysteme belegen für ihren eigenen Gebrauch etwa 16 bis 20 Farben, die nicht benutzt werden können, es bleiben also cirka 236 frei wählbare Farben. Eine weitere Überlegung war, für jede <A HREF="../../g/gr/grundfarbe.html" title="Grundfarbe">Grundfarbe</A> (Rot, Grün, und Blau) sechs verschiedene <A HREF="../../f/fa/farbton.html" title="Farbton">Farbtöne</A> anbieten zu können, also 6×6×6=216 Farben. Die Palette wurde zuerst durch Lynda Weinman vorgeschlagen.<p> Die Websicheren Farben haben keine Namen, werden also durch die Angaben ihrer drei Werte im <A HREF="../../r/rg/rgb_farbraum.html" title="RGB-Farbraum">RGB-Farbraum</A> festgelegt. Die folgende Tabelle benutzt für die Farbangaben die Kurznotation, die in den <A HREF="../../c/ca/cascading_style_sheets.html" title="Cascading Style Sheets">Cascading Style Sheets</A> (CSS) definiert ist. Die Ziffer "3" entspricht der Zahl "33", die Ziffer "C" der Zahl "CC". Zum Beispiel ist die Zahl "#F63" äquivalent zu "#FF6633". Im HTML-Quelltext muß die lange Schreibweise verwendet werden. Die Tabelle zeigt alle websicheren Farben, unterstrichen sind jene Farben, die als wirklich websicher anzusehen sind (<em>Erklärung im nächsten Abschnitt</em>).<p> <table border="0" cellpadding="6" cellspacing="2" ><tr> <td style="background: #000; color: white;"><u>000</u> </td><td style="background: #300; color: white;">300 </td><td style="background: #600; color: white;">600 </td><td style="background: #900; color: white;">900 </td><td style="background: #C00; color: white;">C00 </td><td style="background: #F00; color: white;"><u>F00</u> </td><td style="background: #003; color: white;"><u>003</u> </td><td style="background: #303; color: white;">303 </td><td style="background: #603; color: white;">603 </td><td style="background: #903; color: white;">903 </td><td style="background: #C03; color: white;">C03 </td><td style="background: #F03; color: white;"><u>F03</u> <tr --- > <td style="background: #006; color: white;">006 </td><td style="background: #306; color: white;">306 </td><td style="background: #606; color: white;">606 </td><td style="background: #906; color: white;">906 </td><td style="background: #C06; color: white;">C06 </td><td style="background: #F06; color: white;">F06 </td><td style="background: #009; color: white;">009 </td><td style="background: #309; color: white;">309 </td><td style="background: #609; color: white;">609 </td><td style="background: #909; color: white;">909 </td><td style="background: #C09; color: white;">C09 </td><td style="background: #F09; color: white;">F09 </td></tr><tr --- > <td style="background: #00C; color: white;">00C </td><td style="background: #30C; color: white;">30C </td><td style="background: #60C; color: white;">60C </td><td style="background: #90C; color: white;">90C </td><td style="background: #C0C; color: white;">C0C </td><td style="background: #F0C; color: white;">F0C </td><td style="background: #00F; color: white;"><u>00F</u> </td><td style="background: #30F; color: white;">30F </td><td style="background: #60F; color: white;">60F </td><td style="background: #90F; color: white;">90F </td><td style="background: #C0F; color: white;">C0F </td><td style="background: #F0F; color: white;"><u>F0F</u> </td></tr><tr --- > <td style="background: #030; color: white;">030 </td><td style="background: #330; color: white;">330 </td><td style="background: #630; color: white;">630 </td><td style="background: #930; color: white;">930 </td><td style="background: #C30; color: white;">C30 </td><td style="background: #F30; color: white;">F30 </td><td style="background: #033; color: white;">033 </td><td style="background: #333; color: white;">333 </td><td style="background: #633; color: white;">633 </td><td style="background: #933; color: white;">933 </td><td style="background: #C33; color: white;">C33 </td><td style="background: #F33; color: white;">F33 </td></tr><tr --- > <td style="background: #036; color: white;">036 </td><td style="background: #336; color: white;">336 </td><td style="background: #636; color: white;">636 </td><td style="background: #936; color: white;">936 </td><td style="background: #C36; color: white;">C36 </td><td style="background: #F36; color: white;">F36 </td><td style="background: #039; color: white;">039 </td><td style="background: #339; color: white;">339 </td><td style="background: #639; color: white;">639 </td><td style="background: #939; color: white;">939 </td><td style="background: #C39; color: white;">C39 </td><td style="background: #F39; color: white;">F39 </td></tr><tr --- > <td style="background: #03C; color: white;">03C </td><td style="background: #33C; color: white;">33C </td><td style="background: #63C; color: white;">63C </td><td style="background: #93C; color: white;">93C </td><td style="background: #C3C; color: white;">C3C </td><td style="background: #F3C; color: white;">F3C </td><td style="background: #03F; color: white;">03F </td><td style="background: #33F; color: white;">33F </td><td style="background: #63F; color: white;">63F </td><td style="background: #93F; color: white;">93F </td><td style="background: #C3F; color: white;">C3F </td><td style="background: #F3F; color: white;">F3F </td></tr><tr --- > <td style="background: #060; color: white;">060 </td><td style="background: #360; color: white;">360 </td><td style="background: #660; color: white;">660 </td><td style="background: #960; color: white;">960 </td><td style="background: #C60; color: white;">C60 </td><td style="background: #F60; color: white;">F60 </td><td style="background: #063; color: white;">063 </td><td style="background: #363; color: white;">363 </td><td style="background: #663; color: white;">663 </td><td style="background: #963; color: white;">963 </td><td style="background: #C63; color: white;">C63 </td><td style="background: #F63; color: white;">F63 </td></tr><tr --- > <td style="background: #066; color: white;">066 </td><td style="background: #366; color: white;">366 </td><td style="background: #666; color: white;">666 </td><td style="background: #966; color: white;">966 </td><td style="background: #C66; color: white;">C66 </td><td style="background: #F66; color: white;">F66 </td><td style="background: #069; color: white;">069 </td><td style="background: #369; color: white;">369 </td><td style="background: #669; color: white;">669 </td><td style="background: #969; color: white;">969 </td><td style="background: #C69; color: white;">C69 </td><td style="background: #F69; color: white;">F69 </td></tr><tr --- > <td style="background: #06C; color: white;">06C </td><td style="background: #36C; color: white;">36C </td><td style="background: #66C; color: white;">66C </td><td style="background: #96C; color: white;">96C </td><td style="background: #C6C; color: white;">C6C </td><td style="background: #F6C; color: white;">F6C </td><td style="background: #06F; color: white;">06F </td><td style="background: #36F; color: white;">36F </td><td style="background: #66F; color: white;">66F </td><td style="background: #96F; color: white;">96F </td><td style="background: #C6F; color: white;">C6F </td><td style="background: #F6F; color: white;">F6F </td></tr><tr --- > <td style="background: #090; color: white;">090 </td><td style="background: #390; color: white;">390 </td><td style="background: #690; color: white;">690 </td><td style="background: #990; color: white;">990 </td><td style="background: #C90; color: white;">C90 </td><td style="background: #F90; color: white;">F90 </td><td style="background: #093; color: white;">093 </td><td style="background: #393; color: white;">393 </td><td style="background: #693; color: white;">693 </td><td style="background: #993; color: white;">993 </td><td style="background: #C93; color: white;">C93 </td><td style="background: #F93; color: white;">F93 </td></tr><tr --- > <td style="background: #096; color: white;">096 </td><td style="background: #396; color: white;">396 </td><td style="background: #696; color: white;">696 </td><td style="background: #996; color: white;">996 </td><td style="background: #C96; color: white;">C96 </td><td style="background: #F96; color: white;">F96 </td><td style="background: #099; color: white;">099 </td><td style="background: #399; color: white;">399 </td><td style="background: #699; color: white;">699 </td><td style="background: #999; color: white;">999 </td><td style="background: #C99; color: white;">C99 </td><td style="background: #F99; color: white;">F99 </td></tr><tr --- > <td style="background: #09C; color: white;">09C </td><td style="background: #39C; color: white;">39C </td><td style="background: #69C; color: white;">69C </td><td style="background: #99C; color: white;">99C </td><td style="background: #C9C; color: white;">C9C </td><td style="background: #F9C; color: white;">F9C </td><td style="background: #09F; color: white;">09F </td><td style="background: #39F; color: white;">39F </td><td style="background: #69F; color: white;">69F </td><td style="background: #99F; color: white;">99F </td><td style="background: #C9F; color: white;">C9F </td><td style="background: #F9F; color: white;">F9F </td></tr><tr --- > <td style="background: #0C0; color: black;">0C0 </td><td style="background: #3C0; color: black;">3C0 </td><td style="background: #6C0; color: black;">6C0 </td><td style="background: #9C0; color: black;">9C0 </td><td style="background: #CC0; color: black;">CC0 </td><td style="background: #FC0; color: black;">FC0 </td><td style="background: #0C3; color: black;">0C3 </td><td style="background: #3C3; color: black;">3C3 </td><td style="background: #6C3; color: black;">6C3 </td><td style="background: #9C3; color: black;">9C3 </td><td style="background: #CC3; color: black;">CC3 </td><td style="background: #FC3; color: black;">FC3 </td></tr><tr --- > <td style="background: #0C6; color: black;">0C6 </td><td style="background: #3C6; color: black;">3C6 </td><td style="background: #6C6; color: black;">6C6 </td><td style="background: #9C6; color: black;">9C6 </td><td style="background: #CC6; color: black;">CC6 </td><td style="background: #FC6; color: black;">FC6 </td><td style="background: #0C9; color: black;">0C9 </td><td style="background: #3C9; color: black;">3C9 </td><td style="background: #6C9; color: black;">6C9 </td><td style="background: #9C9; color: black;">9C9 </td><td style="background: #CC9; color: black;">CC9 </td><td style="background: #FC9; color: black;">FC9 </td></tr><tr --- > <td style="background: #0CC; color: black;">0CC </td><td style="background: #3CC; color: black;">3CC </td><td style="background: #6CC; color: black;">6CC </td><td style="background: #9CC; color: black;">9CC </td><td style="background: #CCC; color: black;">CCC </td><td style="background: #FCC; color: black;">FCC </td><td style="background: #0CF; color: black;">0CF </td><td style="background: #3CF; color: black;">3CF </td><td style="background: #6CF; color: black;">6CF </td><td style="background: #9CF; color: black;">9CF </td><td style="background: #CCF; color: black;">CCF </td><td style="background: #FCF; color: black;">FCF </td></tr><tr --- > <td style="background: #0F0; color: black;"><u>0F0</u> </td><td style="background: #3F0; color: black;">3F0 </td><td style="background: #6F0; color: black;"><u>6F0</u> </td><td style="background: #9F0; color: black;">9F0 </td><td style="background: #CF0; color: black;">CF0 </td><td style="background: #FF0; color: black;"><u>FF0</u> </td><td style="background: #0F3; color: black;">0F3 </td><td style="background: #3F3; color: black;"><u>3F3</u> </td><td style="background: #6F3; color: black;"><u>6F3</u> </td><td style="background: #9F3; color: black;">9F3 </td><td style="background: #CF3; color: black;">CF3 </td><td style="background: #FF3; color: black;"><u>FF3</u> </td></tr><tr --- > <td style="background: #0F6; color: black;"><u>0F6</u> </td><td style="background: #3F6; color: black;"><u>3F6</u> </td><td style="background: #6F6; color: black;">6F6 </td><td style="background: #9F6; color: black;">9F6 </td><td style="background: #CF6; color: black;"><u>CF6</u> </td><td style="background: #FF6; color: black;"><u>FF6</u> </td><td style="background: #0F9; color: black;">0F9 </td><td style="background: #3F9; color: black;">3F9 </td><td style="background: #6F9; color: black;">6F9 </td><td style="background: #9F9; color: black;">9F9 </td><td style="background: #CF9; color: black;">CF9 </td><td style="background: #FF9; color: black;">FF9 </td></tr><tr --- > <td style="background: #0FC; color: black;"><u>0FC</u> </td><td style="background: #3FC; color: black;"><u>3FC</u> </td><td style="background: #6FC; color: black;">6FC </td><td style="background: #9FC; color: black;">9FC </td><td style="background: #CFC; color: black;">CFC </td><td style="background: #FFC; color: black;">FFC </td><td style="background: #0FF; color: black;"><u>0FF</u> </td><td style="background: #3FF; color: black;"><u>3FF</u> </td><td style="background: #6FF; color: black;"><u>6FF</u> </td><td style="background: #9FF; color: black;">9FF </td><td style="background: #CFF; color: black;">CFF </td><td style="background: #FFF; color: black;"><u>FFF</u> </td></tr></table><p> <A NAME="Wirklich websichere Farben"><H2>Wirklich websichere Farben</H2><p> Designer werden oft noch dazu angehalten, die 216 websicheren Farben in ihren Webseiten zu verwenden. Die websicheren Farben wurden aber zu einer Zeit (ca. <A HREF="../../1/19/1995.html" title="1995">1995</A>) entwickelt als Grafikkarten und Monitore mit 8 Bit <A HREF="../../f/fa/farbtiefe.html" title="Farbtiefe">Farbtiefe</A> der übliche Standard waren. <p> Bei der Verwendung von 16 Bit <A HREF="../../f/fa/farbtiefe.html" title="Farbtiefe">Farbtiefe</A> ergeben sich weitere Probleme: David Lehn und Hadley Stern haben festgestellt, das nur 22 der 216 websicheren Farben bei 16 Bit Farbtiefe ohne Neuberechnung richtig dargestellt werden. Sie bezeichneten diese Gruppe von 22 Farben als <strong>"Wirklich websichere Farbpalette"</strong>. Sie besteht hauptsächlich aus grünen und gelben Farbtönen, ihre Werte sind in der obigen Tabelle unterstrichen dargestellt.<p> Durch die Verbreitung von Grafikkarten und Monitoren, die 24 Bit oder mehr <A HREF="../../f/fa/farbtiefe.html" title="Farbtiefe">Farbtiefe</A> darstellen können, verliert die Palette der websicheren Farben zunehmend an Bedeutung.<p> <A NAME="Farbdefinition in CSS"><H2>Farbdefinition in CSS</H2><p> In den <A HREF="../../c/ca/cascading_style_sheets.html" title="Cascading Style Sheets">Cascading Style Sheets</A> sind dieselben Farbnamen definiert wie in der <A HREF="../../h/hy/hypertext_markup_language.html" title="Hypertext Markup Language">HTML</A> 4 Spezifikation, also für die 16 oben aufgelisteten Farben. Zusätzlich definiert CSS 2.1 den Farbnamen "orange": <table border="0" ><tr> <th >Farbe </th><th >Hexadezimal </td></tr><tr > <td >orange </td><td style="color:#000000; background-color:#ffa500; font-family:monospace;" > #ffa500 </td></tr></table><p> CSS 2 und CSS 2.1 erlauben Webautoren auch die Verwendung der Farben des Betriebssystems (<em>system colors</em>), auf dem der Browser läuft. Dadurch kann der Inhalt einer Webseite farblich an das jeweilige Betriebssystem angepasst werden. <p> <em>Siehe auch:</em> <A HREF="http://www.w3.org/TR/CSS21/ui.html#system-colors" class="external">[1]</A>. Bis Anfang 2004 sah es so aus, das CSS 3 diese Werte wieder als <em>deprecated</em> (<em>mißbilligt</em>) einstuft, dies ändert sich aber eventuell:<A HREF="http://www.w3.org/TR/css3-color/#css2-system" class="external">[1]</A>.<p> <em>Siehe auch:</em> <A HREF="../../h/hy/hypertext_markup_language.html" title="Hypertext Markup Language">HTML</A>, <A HREF="../../c/ca/cascading_style_sheets.html" title="Cascading Style Sheets">CSS</A>, <A HREF="../../f/fa/farbe.html" title="Farbe">Farbe</A>, <A HREF="../../r/rg/rgb_farbraum.html" title="RGB-Farbraum">RGB-Farbraum</A>, <A HREF="../../w/we/webdesign.html" title="Webdesign">Webdesign</A><p> <A NAME="Externe Links"><H2>Externe Links</H2><p> <ul><li> <A HREF="http://www.webreference.com/html/reference/color/" class="external">Web Color Reference</A> </li><li> <A HREF="http://hotwired.lycos.com/webmonkey/00/37/index2a.html" class="external">"Death of the Websafe Color Palette?"</A>, ein Artikel von David Lehn und Hadley Stern </li><li> <A HREF="http://www.lynda.com/hex.html" class="external">"the browser-safe web-palette"</A>, ein Abgesang auf die websicheren Farben von einer ihrer Propagandistinnen: Lynda Weinmann </li><li> <A HREF="http://www.visibone.com/colorlab/" class="external">"VisiBone's "Web-Safe" Color Lab"</A>, beschreibt eine mehr intuitive Anordnung der websicheren Farben </li><li> <A HREF="http://www.wackerart.de/mixer.html" class="external">"RGB-Color Mixer Applet"</A>, Java-Plugin notwendig </li><li> <A HREF="http://www.wackerart.de/rgbfarben.html" class="external">Weitere Farbtabellen</A><p> </li></ul><p> <p></div><br><div id=footer><table border=0><tr><td> <small>Dies ist ein Artikel aus der freien Enzyklopädie <a href="http://de.wikipedia.org">Wikipedia</a>. Stand: August 2004. Der Artikel steht unter der <a href="http://www.gnu.org/licenses/fdl.txt">GNU Free Documentation License</a>.</small></td></tr></table></div>