[HTML Style Guide]
[Vorherige Seite] [Naechste Seite] [Inhalt dieses Abschnitts] [Home Page]

Die Performance verbessern: Farben

Eine einfache Regel wird Ihnen helfen, die Probleme, die durch unterschiedliche Hardware, Software und Einstellungen hervorgerufen werden, zu umgehen: benutzen Sie die HTML BODY Attribute mit Vorsicht. Im speziellen empfehle ich, die Standardwerte für Text und Links nicht ohne guten Grund zu ändern, da die Standards i.A. für jedes System geeignet sind. (Zusätzlich kann es die Benutzer verwirren, die Standardfarbe für Links zu ändern -- "Ist das ein Link oder nur farbiger, unterstrichener Text?") Ich empfehle dagegen, die Hintergrundfarbe zu ändern [BGCOLOR], da das Standard-Grau, das die meisten Browser produzieren, ziemlich trist aussieht. Wählen Sie aber die Hintergrundfarbe vorsichtig: nehmen Sie eine helle Farbe, so daß die Standard-Textfarbe sich gut davon abhebt, und benutzen Sie keine selbstdefinierten Farben, da diese normalerweise nicht gut auf Systemen dargestellt werden, die nur wenige Farben unterstützen. Ich empfehle, die Auswahl auf Farben aus der "universellen" oder "sicheren" 216-Farben Palette zu beschränken (die 16-Farben Palette ist wirklich zu eingeschränkt). Die 216-Farben Palette ist unterhalb verkleinert dargestellt; sie entstammt einer Tabelle, die von Robert B. Hess entworfen wurde -- wenn Sie den Microsoft Internet Explorer oder Netscape 4.0 verwenden, können Sie den Hex-Code jeder Farbe in einem kleinen Popup-Fenster sehen, indem Sie den Mauszeiger einige Sekunden über einer Zelle halten; wenn Sie einen andern Browser verwenden, sollte der Hex-Code in der Statuszeile auftauchen. Sie können eine andere, größere Darstellung dieser sicheren Farben mit den zugehörigen Hex-Codes und numerischen Rot-, Grün- und Blau-Werten auf Lynda Weinman's Web Site finden(http://www.lynda.com/hex.html).

Die "Safety Palette"
#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

(Diese Tabelle entstammt Robert B. Hess's intensiverer Beschreibung der Safety Palette [engl.])

[safety icon]

Robert Hess hat auch ein Icon gebastelt (hier rechts), das alle 216 Farben der sicheren Palette enthält. Das Icon kann benutzt werden, um eine Farbpalette für Ihr Graphikprogramm zu erstellen (wie Farbpaletten erzeugt werden, variiert von Programm zu Programm; sehen Sie in der Hilfe-Datei der Anwendung nach, um Informationen zu erhalten).

Das wichtigste ist, sich zu merken, daß der normale Weg zum Festlegen von Farbwerten in HTML über die sogenannten Hex-Codes führt, die wie #FFCC33 aussehen. Für die universellen 216 Farben können Sie sich den Hex-Code als drei Paare von Werten merken, die jeweils die Intensitäten von Rot/Grün/Blau darstellen und die immer vom Symbol # eingeleitet werden; der Code für Schwarz ist #000000 und Weiß ist #FFFFFF. Die Methode, eine der universellen Farben zu wählen, ist diese: Benutzen Sie nur die folgenden Werte für die drei Paare, aus denen sich der Hex-Code zusammensetzt (Ich habe auch die numerischen Entsprechungen angegeben, die normalerweise in Farbpaletten benutzt werden):

WertNumerische
Entsprechung
000
3351
66102
99153
CC204
FF255

Die Paare hier sind geordnet, vom dunkelsten zum hellsten Wert. Das bedeutet, daß #CCCCFF das blasseste Blau erzeugt, #FFFFCC das blasseste Gelb, #003300 das dunkelste Grün, #CCCCCC das blasseste Grau und so weiter. Mit etwas Übung und Ausprobieren werden Sie lernen, die Hex-Codes mit wenigen Schwierigkeiten einzufügen. Ein guter HTML-Editor wie HomeSite (dem Sie auf diesen Seiten ja öfter begegnen) wird Ihnen auch beim korrekten Einfügen der Hexcodes helfen und Sie dabei unterstützen, Ihre bevorzugten Farben später leicht wieder zu finden.

[Vorherige Seite] [Naechste Seite] [Inhalt dieses Abschnitts] [Home Page]

Bernhard Friedrich
doozer@hsguide.com