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 notwendig ist.
Inhaltsverzeichnis |
Farbnotierungen in Stylesheets (CSS) [Bearbeiten]
Webentwickler haben verschiedene Möglichkeiten, eine Farbe innerhalb eines Stylesheets zu notieren:
RGB-Farbraum [Bearbeiten]
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 % Deckkraft - spezifiziert in CSS 3 */ p { color: rgb(100%, 0%, 0%) } /* prozentuale Angaben 0,0 % - 100,0 % */
HSL-Farbraum [Bearbeiten]
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 % Deckkraft */
CMYK-Farbraum [Bearbeiten]
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 [Bearbeiten]
Vielen Farbwerten ist ein Name zugeordnet. Sie 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 [Bearbeiten]
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 [Bearbeiten]
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 [Bearbeiten]
| HTML 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 [Bearbeiten]
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-Farben | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 [Bearbeiten]
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 [Bearbeiten]
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 letzten Jahren bedeutungslos geworden.
| Tabelle der 216 websicheren Farben | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| #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 | ||||||
Siehe auch [Bearbeiten]
Weblinks [Bearbeiten]
- Farbnamen des W3C auf w3.org
- Umfangreicher Farbauswähler mit Umrechnungen (RGB, HEX, HSL, HSV/HSB, CMYK) auf colorizer.org
Einzelnachweise [Bearbeiten]
- ↑ HSLA Colors auf css3.info
- ↑ CMYK colors auf w3.org
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 (nur wenn die Seite nicht gezoomt dargestellt wird): 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.
