ÿþ<HTML> <HEAD> <TITLE> Farben auf HTML-Seiten </TITLE> <META NAME="description" content="Erklärungen über Farbzahlen und websichere Farben für Anfänger."> <META NAME="resource-type" content="document"> <META NAME="robots" content="index,follow"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel=stylesheet type="text/css" href="../perau2.css"> <link rel=stylesheet media=print type="text/css" href="../print.css"> <!-- Erstellt von Strobl Hans --> </HEAD> <BODY> <center> <div class=noprint> <TABLE border=0 cellspacing=0 cellpadding=1> <TR> <TD align=center> <A HREF="../index.htm" target="_top"> <IMG SRC="../grafiken/homesmal.gif" WIDTH="18" HEIGHT="14" BORDER="0" alt="Homepage"></A></TD> <TD class="kopfzeile" align=center nowrap><A HREF="../index.htm" target="_top"> &nbsp;&nbsp;Bundesgymnasium&nbsp;und&nbsp;Bundesrealgymnasium&nbsp;Villach&nbsp;-&nbsp;Peraustrasse</A></TD> <td align=center valign=top>&nbsp;&nbsp; <A HREF="http://babel.altavista.com/babelfish/trurl_pagecontent?lp=de_en&trurl=http://www.peraugym.at/html/html-farben.htm"><IMG SRC="../grafiken/english.gif" WIDTH="52" HEIGHT="21" BORDER="0" alt="Translation by Altavista"></A></TD> </TR> </TABLE> <HR width=99%> </div> <TABLE width=99% border=0 cellspacing=5 cellpadding=0> <TR> <td width=5%><div class=noprint> <a href="javascript:window.print()"><img src=../grafiken/drucken.gif border=0 alt=Ausdrucken!></a> </div></TD> <td class=seitentitel align=center> <a href="html.html" target="_top"><a href="html.html" target="_top">Farben auf HTML-Seiten </A></TD> <td width=5%> &nbsp; </TD> </TR> </table> <BR><br> <table width=99% border=0 cellspacing=0 cellpadding=7> <tr><td> Auf dem Monitor werden Farben durch ihre Anteile von <b>R</b>ot, <b>G</b>rün und <b>B</b>lau festgelegt. Für jede dieser drei Grundfarben können 256 verschiedene Stufen gewählt werden, sodaß 256 x 256 x 256 = 16,8 Millionen Farben angegeben werden können. </TD> <td valign=top align=center rowspan=2> <a href="html-farben-links.htm"><img src="rgb.gif" width="221" height="138" border="1" alt="RGB-Farben"></A> </TD> </TR> <tr><td> Beispiele für RGB-Kombinationen: 0/0/0 = Schwarz, 255/255/255 = Weiß, 255/0/0 = sattes Rot, 100/100/100 = mittleres Grau, 255/255/0 = sattes Gelb. </td></tr> <tr><td colspan=2> Auf HTML-Seiten werden die 256 Werte nicht mit 10 Ziffern (dezimal), sondern mit 16 Ziffern (hexadezimal) angegeben, weil das 16er-Zahlensystem besser zum Dualsystem des Computers paßt und eine Zahlenstelle weniger braucht. Für die Werte 10, 11 ... 15 werden dabei als Zahlzeichen die Buchstaben A, B ... F verwendet, sodaß die Zahlenreihe (anstatt von 0 bis 255) von 0 bis FF geht. Somit schauen die oben genannten Farbzahlen, wenn man für Rot, Grün und Blau je 2 Stellen verwendet, in HTML-Seiten so aus: <BR> 000000 (schwarz), FFFFFF (weiß), FF0000 (rot), A0A0A0 (grau), FFFF00 (gelb). </td></tr> <tr><td colspan=2> Neben den <a href="http://de.wikipedia.org/wiki/Wikipedia:Farbtabelle" target="_top"><img src="../grafiken/verweis.gif" border=0>&nbsp;<b>Farbzahlen</b></A> interpretieren manche Browser auch <a href="http://de.wikipedia.org/wiki/Web-Farben#Herstellerabh.C3.A4ngige_Farbnamen" target="_top"><img src="../grafiken/verweis.gif" border=0>&nbsp;<b>Farbnamen</b></A>. Diese sollen nicht verwendet werden, damit die Darstellung browserunabhängig ist. </table> <br><hr width=99%><br> <table width=99% border=0 cellspacing=0 cellpadding=7> <tr><td> Die <b>Wiedergabe</b> der Farben auf dem Monitor hängt von der Hardware (Grafikkarte, Monitor) und Software (Betriebssystem, Treiber, Browser) ab. Damit zwischen allen Farben unterschieden werden kann, muß die Anzeige auf eine <a href="html-bilder-glossar.htm"><img src="../grafiken/verweis.gif" border=0>&nbsp;Farbtiefe</A> von <b>24&nbsp;bit</b> ("True Color") einstellbar sein. Aber auch unter dieser Voraussetzung kann sich die Wiedergabe unter verschiedenen Kombinationen von Betriebssystemen und Browsern deutlich unterscheiden. </td></tr> <tr><td> Wenn ein Computersystem eine RGB-Zahl nicht wiedergeben kann, weicht es auf eine ähnliche Farbe aus. Ist die geringe Abweichung wegen örtlicher Nähe auffallend, kann sie den Eindruck beträchtlich stören. Wenn das System statt dessen ein Nebeneinander von Punkten in verschiedenen Farben anzeigt ("Dithering"), ist der Mangel ganz deutlich wahrnehmbar. </td> </TR> <tr><td> Aus der Zeit, in der die Geräte nur insgesamt 256 verschiedene Farben darstellen konnten, stammt eine Palette von 6x6x6 = 216 Farben, die von allen Browsern in gleicher Weise wiedergegeben werden (sollen). Sie werden mit den Zahlen 00, 33, 66, 99, CC und FF festgelegt, wobei die Kombinationen 00FF33, 33FF00, 0033FF und 3300FF ausscheiden, sodaß <b>212 Farben</b> als "<b>websicher</b>" gelten. Wenn allerdings für die Anzeige nur eine Farbtiefe von 5x5x5 Farben, also 15 (oder 16) bit eingestellt ist, reduziert sich die Zahl der wirklich websicheren Farben auf 22. </td></tr> <tr><td> Da die Palette der websicheren Farben durch mathematisch gleichmäßige Aufteilung und nicht aufgrund von gestalterischen Bedürfnissen zustandekam, bietet sie vor allem bei den hellen Farben nur wenige Varianten. Daher lehnen manche Webdesigner diese Einschränkung ab. </td></tr> <tr><td> Wenn man auf eine fehlerfreie Wiedergabe Wert legt, besteht die Alternative zur Einschränkung auf die 212 websicheren Farben darin, die Darstellung der gewählten Farben unter gängigen Kombinationen von Betriebssystemen und Browsern zu testen, z.B. Windows 7 + MSIE9, Windows XP + MSIE8, Windows + Firefox | Opera. </td></tr> </table> <BR> <div class=noprint> <TABLE width=99% border=0 cellspacing=0 cellpadding=0> <tr align=right> <td align=right><a href="html-farben-links.htm"> <img src="../grafiken/verweis.gif" border=0> <b>Links zum Thema "Farben auf HTML-Seiten"</b> </A></TD> </TR></table> </div> <TABLE width=99% border=0 cellspacing=0 cellpadding=0> <TR><td class=vermerk> <div class=noprint> SH, 30.12.2004; zuletzt geändert am 4.8.2011 </div> </TD> <td align=right class=url> www.peraugym.at/html </A></TD> </TR></table> <div class=noprint> <HR width=99%> <TABLE width=99% border=0 cellspacing=0 cellpadding=0 class="linktabelle"> <tr> <td class="menuzeile"><a href="html-erstellen.htm">Erstellen</A></TD> <td class="menuzeile"><a href="html-befehle.htm">Befehle</A></TD> <td class="menuzeile"><a href="html-woerter.htm">Abk.</A></TD> <td class="menuzeile"><a href="html-farben.htm">Farben </A></TD> <td class="menuzeile"><a href="html-bilder.htm">Bilder </A></TD> <td class="menuzeile"><a href="html-photo.htm">Photo</A></TD> <td class="menuzeile"><a href="html-wordart.htm">WordArt</A></TD> <td class="menuzeile"><a href="html-seitengestaltung.htm">Gestaltung</A></TD> <td class="menuzeile"><a href="html-tutorials.htm">Tutorials</A></TD> <td class="menuzeile"><a href="html-glossar.htm">Glossar</A></TD> </TR></table> </div> </BODY> </HTML>