| Die WebSafe Farben sind eine Auswahl (Palette) von 216 standardisierten Farben. | Die Verwendung dieser Farben bringt unter bestimmten Bedingungen (für Geschäfts-Grafik) Vorteile. |
|
|
|
 Farbe
|
Farbe in der Informatik: RGB, CMY, HSB ... |
| Live WebSafe | Darstellung und Formulierung (Dezimal, Hexadezimal) |
| Nachbar-Farben | Abstufung der WebSafe Palette |
| WebSafe Palette | Historische Ziele und aktuelle Kommentare |
| CSS-Kurznamen | Eine praktische Syntax-Variante für WebSafe Farben |
| VGA-Palette | Beziehungen zwischen VGA-Farben und WebSafe-Farben |
| Farbtabelle | Muster einer Farbtabelle (CLUT) für WebSafe Farben |
| GIF oder PNG | WebSafe Farben für die Index-Farbtabelle |
| Verwandte Themen | Index-Farben, VGA-Farben, ANSI Escape-Sequenzen |
| Links |
Ausgewählte
Links zum Thema 'WebSafe Colors'
|
Live WebSafe Farben |
||||||||||||||||||||||
|
#FFF
#FFFFFF
rgb(255,255,255)
|
Der Hintergrund des Farb-Feldes (links) kann mit
HTML+CSS
programmiert werden (hexadezimal, dezimal):
<div style="background-color:#FFF;"></div>
<div style="background-color:#FFFFFF;"></div> <div style="background-color:rgb(255,255,255);"></div> |
|||||||||||||||||||||
|
Zufalls (WebSafe) FarbeIn dieser Palette (Farben-Auswahl) kann jede der 3 Grundfarben (Rot, Grün, Blau) nur einen von 6 möglichen Werten annehmen. • Klicken sie die Felder der Tabelle links, um die gewünschte WebSafe Farbe einzustellen: Wählen sie aus jeder Spalte einen der 6 möglichen Werte. Das ergibt 6*6*6=216 Kombinationen. |
|||||||||||||||||||||
WebSafe Nachbar-Farben |
|||||||||||||||
|
Diese Tabelle demonstriert die Abstufung der WebSafe Farb-Skala. • Der minimale Abstand zwischen 2 WebSafe Farben beträgt 51 (dezimal) bzw. #33 (Hex) in RGB-Zahlenwerten oder ca. 11.5% des maximal möglichen Abstands (255*sqr(3)=442). • Wenn der Wert einer Grundfarbe bereits am Ende der Skala liegt (#00 bzw. #FF), dann gibt es dazu keine Nachbar-Farbe. |
||||||||||||||
| Die Abstufung ist für übliche Geschäfts-Grafik (Linien-, Säulen-, Balken- Kreis-Diagramme) völlig ausreichend, jedoch nicht zur Darstellung von Bildern (z.B. Portrait, Landschaft, ..). | Der Unterschied zwischen der aktuell ausgewählten Farbe und den Nachbar-Farben sollte auf ihrem Monitor deutlich erkennbar sein ! | ||||||||||||||
Standard WebSafe Palette |
|
ZieleMit der Auswahl dieser 216 Farben verfolgte man mehrere Ziele:► Die Zahl 216 (Farb-Index) lässt sich mit 8 Bit darstellen. ► Die Farben sind gleichmäßig über alle darstellbaren Farben verteilt. ► Die Darstellung der Farben sollte auf jedem Monitor genau gleich erfolgen - Daher der Name WebSafe Colors. |
•
Die beiden ersten Ziele wurden erreicht. Wenn man das wünscht, ist es auch
heute noch sinnvoll, WebSafe Farben zu verwenden. • Das Namen-gebende Ziel wurde verfehlt. Allerdings gibt es EntwicklerInnen, die gerne daran glauben wollen. |
Darstellung mit 8 Bit = 1 ByteMit 8 Bit = 1 Byte lassen sich 28=256 verschiedene Farben angeben. Damit ist eine Art Farb-Index gemeint, d.h. eine fortlaufende Nummer für jede der 256 (oder hier 216) Farben.• Die meisten der restlichen 256-216=40 Farben werden vom Betriebssystem als "System-Farben" verwendet, z.B. für Menü-Balken, Fenster, Rollbalken, usw. • Jede Farbe wird unabhängig davon durch die Zahlen-Werte der 3 Grundfarben (Rot, Grün, Blau) bestimmt. Diese Werte sind in einer Farb-Tabelle (Color Lookup Table, CLUT) eingetragen. Diese Tabelle hat 256 (216) Zeilen und 3 Spalten (R,G,B). Der 1-Byte Farb-Index bezeichnet jene Zeile in der CLUT-Tabelle, in welcher man die RGB-Werte der entsprechenden Farbe findet. Mangelnde Unterscheidung zwischen Farb-Index und RGB-Werten einer Farbe führt oft zu Missverständnissen.. ♦ Details zum Thema Index-Farben, Muster einer CLUT-Tabelle für WebSafe-Farben. • Diese Vorgangsweise war historisch wichtig, um VGA-Bildschirme anzusteuern, die lediglich 256 unterschiedliche Farben darstellen konnten. Heutige Monitore lassen sich meist auf 16 Bit oder 24 Bit Farb-Tiefe einstellen, selten noch auf 8 Bit. |
Abstufung der WebSafe FarbenEs ist sinnvoll, aber nicht selbstverständlich, die Farbe einer Palette gleichmäßig über den gesamten darstellbaren Bereich zu verteilen.• Die WebSafe Farben reichen bis an die Bereichs-Grenzen - Die Werte jeder Grundfarbe reichen von #00 bis #FF. • Der Bereich dazwischen ist in 5 zahlenmäßig genau gleiche Intervalle unterteilt. Die Breite beträgt jeweils #33 = dezimal 51. Daraus ergeben sich die möglichen Werte jeder Grundfarbe mit #00, #33, #66, #99, #CC, #FF
• Durch Kombination von 3 Grundfarben mit je 6 möglichen Werten erhält man 6*6*6=216 verschiedene WebSafe Farben. Diese Palette wurde von Lynda Weinman vorgeschlagen und von Netscape erstmals umgesetzt. Die Abstufung der Farbtöne ist für Geschäfts-Grafik (Linien-, Säulen- oder Kreis-Diagramme) mehr als ausreichend. Im Zweifel kann man für Geschäfts-Grafik immer die WebSafe Farben als Index-Farben verwenden. |
Gleiche Darstellung auf jedem MonitorDas Namen-gebende Ziel wurde nicht erreicht: Die Farben von Webseiten und anderen Objekten sehen leider nicht auf jedem Monitor gleich aus. Der Farb-Eindruck hängt von der Hardware (Bauart des Monitors, verwendetes Material, Alterung) und von der individuellen Einstellung ab. |
Trotzdem hält sich hartnäckig der Glaube an die "exakte" Wiedergabe dieser 216 Farben. Das schadet jedoch nicht, denn bei sorgfältig eingestellten Monitoren trifft die Annahme zu. Es hängt vom Aufwand ab, den man treibt, um einen Monitor zu kalibrieren, wie genau das Ziel tatsächlich getroffen wird. |
CSS-Kurznamen |
|
|
Cascading StyleSheets (CSS)
bietet zur Definition beliebiger Farben 2 verschiedene Varianten an: ● Dezimale RGB-Angabe in der Form rgb(r,g,b) ● Hexadezimale RGB-Angabe in der Form #RRGGBB Zusätzlich gibt es 2 Varianten für ausgewählte Farben: ● Farb-Namen (Seite VGA-Farben) für 16 Farben. ● Hexadezimale Kurz-Form für 4096 Farben. |
●
Hexadezimale Kurz-Form:
Man gibt für jede der 3 Grundfarben nur eine einzige Hexadezimale
Ziffer 0..F an.
Zur Interpretation wird diese Ziffer wiederholt. Beispiel: Die Kurz-Angabe #69C ist äquivalent zu den Standard-Varianten #6699CC oder rgb(102,153,204) oder zur Farbe ■ |
| ► Die Kurz-Form ist ideal geeignet, um die 216 WebSafe Farben zu bezeichnen. Die Kurz-Variante wird im Kapitel zur Live-Darstellung (ganz oben auf dieser Seite) immer angegeben. | Umgekehrt ist nicht jede der 4096 in CSS-Kurzform möglichen Farben eine WebSafe Farbe ! |
VGA-Farben - teilweise WebSafe |
|||||||||||||||||||||||||||||||||
|
VGA-Farben: Die VGA-Palette umfasst 16 Farben, von denen diese 8 gleichzeitig auch WebSafe Farben sind:
|
Die anderen 8 VGA-Farben sind keine WebSafe Farben.
Die obere Zeile gibt die VGA-Farben an, die untere Zeile eine
Näherung mit WebSafe-Farben (Angabe in CSS-Kurzform):
|
||||||||||||||||||||||||||||||||
| Klicken sie auf ein WebSafe Farbfeld (mit CSS Kurz-Bezeichnung), um diese Farbe im Kapitel Live WebSafe (ganz oben) anzuzeigen. | ♦ Details zu VGA-Farben | ||||||||||||||||||||||||||||||||
Farb-Tabelle (CLUT) |
|||||
|
Rechts ein Muster für eine Farb-Tabelle (Color Lookup Table, CLUT) der WebSafe Farben. • Eine Palette ist eine Auswahl aus allen darstellbaren Farben. Die WebSafe Palette definiert 216 Farben. • Der Index (Spalte links) ist eine fortlaufende Zahl, welche für jede Farbe der Palette jene Zeile angibt, in welcher die Zahlenwerte der 3 Grundfarben zu finden sind. • Ausgewählte Farbe (Klicken sie ein Farbfeld):
|
|||||
Der Index lässt sich mit nur 8 Bit = 1 Byte darstellen.
Vorteil: Das erspart 2/3 jenes Speicherplatzes, den man für die Zahlenwerte der
3 Grundfarben braucht.• Dieser Vorteil kommt zum Tragen, wenn nur wenige unterschiedliche Farben verwendet werden, und wenn die Farben sehr vieler Bildpunkte gespeichert oder übertragen werden sollen. • Das Grafik-Format GIF verwendet ausschließlich Index-Farben, das Format PNG kann optional Index-Farben verwenden. |
Nachteil: Index-Farben können nicht direkt zur Ansteuerung eines Bildpunktes (Pixel)
verwendet werden. Man muss die durch den Index angegebene Zeile der CLUT-Tabelle aufsuchen
und dort die Zahlenwerte der 3 Grundfarben ablesen. Dieser Nachteil wirkt sich umso weniger aus,
je schneller der Prozessor des PC bzw. der Grafik-Karte arbeitet.• Index-Farben sind nur dann sinnvoll, wenn die Grafik eine "abzählbare Anzahl" verschiedener Farben enthält. Beim Versuch, mehr als 256 verschiedene Farben darzustellen, wächst die Farbtabelle und der benötigte Speicherplatz - Die Vorteile der Index-Farben gehen dann verloren. • Das Grafik-Format JPEG ist auf die Darstellung einer gleitenden Farb-Skala spezialisiert ('unzählige' Farben) und verwendet daher keine Index-Farben. |
||||
|
Die hier gezeigte CLUT-Tabelle ist lediglich ein Muster ! Es gibt viele verschiedene Möglichkeiten, die 216 WebSafe Farben in einer anders angeordneten Farbtabelle zu verwalten. |
In der Informatik-Frühzeit waren Index-Farben die einzigen überhaupt
darstellbaren Farben, da die ersten Farb-Monitore nur 4 bzw. 8 Bit an Farb-Information
annehmen konnten. ♦ Details zu Index-Farben |
||||
WebSafe Farben für GIF oder PNG |
|||||
|
Die WebSafe Palette kann auch als Farbtabelle für
Grafik-Dateien in Index-Farben verwenden werden (z.B. GIF, PNG). Das Muster rechts zeigt das gleiche Bild links in 24 Bit (TrueColor), rechts in nur 8 Bit WebSafe Farben. • Die Anwendung von Index-Farben wird für Bilder mit 'unzählig' vielen Farben wie in diesem Beispiel nicht empfohlen ! - Das Beispiel demonstriert lediglich, dass es auch mit WebSafe Farben möglich ist, Bilder halbwegs brauchbar darzustellen. • Das empfohlene Format für solche Bilder ist JPEG (Internet) oder TIFF (zur Bearbeitung am eigenen PC) in 24 Bit TrueColor Farben. |
|
||||
|
Unter speziellen Bedingungen kann es sinnvoll sein, WebSafe Farben für die
Farbtabelle von Bildern in Index-Farben (GIF, PNG) zu verwenden: WebSafe Farben sind gleichmäßig verteilt und daher einerseits für alle Bilder brauchbar, andererseits für kein einzelnes Bild optimiert. |
Die Bedeutung der 'Farben-Anzahl' wird meist gewaltig überschätzt. Für Grafik und Bilder am eigenen PC sind schon 4096 Farben vollkommen ausreichend. Das gilt natürlich nicht für Anwendungen im professionellen Grafik-Bereich. ♦ Details zu Index-Farben |
||||
|
|
| WebReference - Web Color Reference |
Wikipedia: Farbtiefe,
Webfarben,
HiColor,
TrueColor
|
