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 vorausgesetzt wird.
Inhaltsverzeichnis |
[Bearbeiten] Farbnotierungen in Stylesheets (CSS)
Webentwickler haben verschiedene Möglichkeiten, eine Farbe innerhalb eines Stylesheets zu notieren:
[Bearbeiten] RGB-Farbraum
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% Transparenz - spezifiziert in CSS 3 */ p { color: rgb(100%, 0%, 0%) } /* prozentuale Angaben 0.0% - 100.0% */
[Bearbeiten] HSL-Farbraum
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% Transparenz */
[Bearbeiten] CMYK-Farbraum
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 */
[Bearbeiten] Farbnamen
Viele Farbwerte sind einem Namen zugeordnet und können wie folgt benutzt werden:
p { color: navy; /* dunkelblau */ } p { color: red; /* rot */ }
Die Zuordnung der Farbwerte ist nachfolgend beschrieben.
[Bearbeiten] Notierung mit Rückwärtskompatibilität
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 */ }
[Bearbeiten] Benannte Farben
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.
[Bearbeiten] HTML 4/VGA
| 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).
[Bearbeiten] CSS 3
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:
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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.
[Bearbeiten] Herstellerabhängige Farbnamen
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.
[Bearbeiten] Websichere Farben
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 2010er Jahren bedeutungslos geworden.
| #000 | #003 | #006 | #009 | #00C | #00F | #030 | #033 | #036 | #039 | #03C | #03F |
| #300 | #303 | #306 | #309 | #30C | #30F | #330 | #333 | #336 | #339 | #33C | #33F |
| #600 | #603 | #606 | #609 | #60C | #60F | #630 | #633 | #636 | #639 | #63C | #63F |
| #900 | #903 | #906 | #909 | #90C | #90F | #930 | #933 | #936 | #939 | #93C | #93F |
| #C00 | #C03 | #C06 | #C09 | #C0C | #C0F | #C30 | #C33 | #C36 | #C39 | #C3C | #C3F |
| #F00 | #F03 | #F06 | #F09 | #F0C | #F0F | #F30 | #F33 | #F36 | #F39 | #F3C | #F3F |
| #060 | #063 | #066 | #069 | #06C | #06F | #090 | #093 | #096 | #099 | #09C | #09F |
| #360 | #363 | #366 | #369 | #36C | #36F | #390 | #393 | #396 | #399 | #39C | #39F |
| #660 | #663 | #666 | #669 | #66C | #66F | #690 | #693 | #696 | #699 | #69C | #69F |
| #960 | #963 | #966 | #969 | #96C | #96F | #990 | #993 | #996 | #999 | #99C | #99F |
| #C60 | #C63 | #C66 | #C69 | #C6C | #C6F | #C90 | #C93 | #C96 | #C99 | #C9C | #C9F |
| #F60 | #F63 | #F66 | #F69 | #F6C | #F6F | #F90 | #F93 | #F96 | #F99 | #F9C | #F9F |
| #0C0 | #0C3 | #0C6 | #0C9 | #0CC | #0CF | #0F0 | #0F3 | #0F6 | #0F9 | #0FC | #0FF |
| #3C0 | #3C3 | #3C6 | #3C9 | #3CC | #3CF | #3F0 | #3F3 | #3F6 | #3F9 | #3FC | #3FF |
| #6C0 | #6C3 | #6C6 | #6C9 | #6CC | #6CF | #6F0 | #6F3 | #6F6 | #6F9 | #6FC | #6FF |
| #9C0 | #9C3 | #9C6 | #9C9 | #9CC | #9CF | #9F0 | #9F3 | #9F6 | #9F9 | #9FC | #9FF |
| #CC0 | #CC3 | #CC6 | #CC9 | #CCC | #CCF | #CF0 | #CF3 | #CF6 | #CF9 | #CFC | #CFF |
| #FC0 | #FC3 | #FC6 | #FC9 | #FCC | #FCF | #FF0 | #FF3 | #FF6 | #FF9 | #FFC | #FFF |
[Bearbeiten] Siehe auch
[Bearbeiten] Weblinks
- Eine Farbtabelle sortiert nach Schattierungen
- HTML Color Spectrum Chart
- Farbnamen des W3C
- Web Color Reference
- „the browser-safe web-palette“, ein Abgesang auf die websicheren Farben von einer ihrer Protagonistinnen: Lynda Weinmann
- „VisiBone’s ‚Web-Safe‘ Color Lab“, beschreibt eine intuitivere Anordnung der websicheren Farben
- Hexcodes der Webfarben
- FarbFinder Ein JavaScript-Programm zum direkten einfärben einer HTML-Seite. Die Tabellen sind der natürlichen Wahrnehmung entsprechend dreidimensional sortiert.
- Webfarben Hexcodes Dynamische Tabelle der Webfarben und Farbe Pickerwerkzeug
- Zusammenpassende Farb-Schemata – sehr nützlich zur Auswahl passender Schattierungen
- http://www.metacolor.de Sehr gutes und umfangreiches Tutorial über Farben im Webdesign
- A3W Multimedia – Webcolors, verschiedene Ansichten und Farbrechner
- RGB ↔ HEX Umrechner mit Farbanzeige
[Bearbeiten] Einzelnachweise
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: 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.
