Webfarbe
Webfarben sind Farben, die für die Gestaltung von Webseiten eingesetzt werden. Die Spezifikationen der Webbrowser bieten die Möglichkeit, die darstellbaren Farbvorgaben hexadezimal oder dezimal zu bezeichnen oder die browsereigenen Farbbezeichnungen zu nutzen.
Farbnotierungen in Stylesheets (CSS)
Webentwickler können eine Farbe innerhalb eines Stylesheets notieren.
RGB-Farbraum
Farben des RGB-Farbraums sind 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
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
Ab CSS 3 können Farben außerdem nach dem CMYK-Farbmodell angegeben werden:[2]
p { color: device-cmyk(0.0, 0.95, 1, 0.1); } /* Rot */
Farbnamen
Vielen Farbwerten ist ein Name zugeordnet. Eine solche Angabe wird beispielsweise wie folgend notiert.
p { color: navy; /* Marineblau */ }
p { color: red; /* Rot */ }
Die Zuordnung der Farbwerte ist nachfolgend beschrieben.
Notierung mit Rückwärtskompatibilität
Da nur neuere Browser die rgba-, hsl(a)- und cmyk-Notierung interpretieren können, sollten Webentwickler eine „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
Es gibt mehrere Standards, die den Hexadezimal-Codes einen Farbnamen zuordnen. So lassen sich definierte englische Farbnamen anstelle der Anteilswerte im RGB-Farbraum angeben. Die Nutzung solcher Namen erleichtert es dem Designer die Farbtöne nach eigener Wahrnehmung zu wählen, statt die unhandliche (formale) hexadezimale Notierung. Abhängig vom jeweiligen Standard ist die Anzahl an Farbnamen begrenzt, da diese naturgemäß bereits vorgegeben sein müssen.
HTML 4/VGA
| 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
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:
| CSS3-Farbnamen (ursprünglich X11-Farbnamen) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. Die Farben bisque (#FFE4C4) und blanchedalmond (#FFEBCD) stammen nicht von dort.
2014 wurde die Farbe rebeccapurple (#663399) in Erinnerung an Eric Meyers Tochter Rebecca, die an ihrem sechsten Geburtstag an einem Hirntumor starb, neu aufgenommen.[3][4]
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.
Websichere Farben
Mit Beginn der Webgestaltungen wurde eine Bezeichnungsgruppe von Farben als „websichere Farbpalette“ bezeichnet. Diese wurde Mitte der 1990er Jahre entwickelt, als Computer meist nur 256 Farben anzeigen konnten. Die Palette wurde zuerst durch Lynda Weinman vorgeschlagen. Das Ziel dieser Farbpalette war es, eine einheitliche Farbdarstellung auf den unterschiedlichen Bildschirmen zu erreichen. Die sechs verschiedenen Farbtönungen jeder Grundfarbe des Bildschirms: Rot, Grün und Blau ergab 6 × 6 × 6 = 63 = 216 darstellbare Farben.
Der Spielraum für eine gute Farbgestaltung von Webseiten ist zwangsläufig eingeschränkt. Durch unzureichend kalibrierte Bildschirme und die subjektive Wahrnehmung des Betrachters konnte dieses Ziel von Gleichheit nicht erreicht werden. Spätestens seit dem Jahr 2000 können fast alle Grafikkarten eine ausreichend große Anzahl darstellen. Bei einer Notierung von 256 unterschiedenen Anteilen je der drei bildschirmbedingten Grundfarben ergeben sich 2563 also über 16,7 Millionen Farbdarstellungen. Dadurch hat die Palette der „websicheren Farben“ heute keine Bedeutung mehr.
| Tabelle der 216 websicheren Farben[5] | |||||
|---|---|---|---|---|---|
| #000 | #003 | #006 | #009 | #00C | #00F |
| #030 | #033 | #036 | #039 | #03C | #03F |
| #060 | #063 | #066 | #069 | #06C | #06F |
| #090 | #093 | #096 | #099 | #09C | #09F |
| #0C0 | #0C3 | #0C6 | #0C9 | #0CC | #0CF |
| #0F0 | #0F3 | #0F6 | #0F9 | #0FC | #0FF |
| #300 | #303 | #306 | #309 | #30C | #30F |
| #330 | #333 | #336 | #339 | #33C | #33F |
| #360 | #363 | #366 | #369 | #36C | #36F |
| #390 | #393 | #396 | #399 | #39C | #39F |
| #3C0 | #3C3 | #3C6 | #3C9 | #3CC | #3CF |
| #3F0 | #3F3 | #3F6 | #3F9 | #3FC | #3FF |
| #600 | #603 | #606 | #609 | #60C | #60F |
| #630 | #633 | #636 | #639 | #63C | #63F |
| #660 | #663 | #666 | #669 | #66C | #66F |
| #690 | #693 | #696 | #699 | #69C | #69F |
| #6C0 | #6C3 | #6C6 | #6C9 | #6CC | #6CF |
| #6F0 | #6F3 | #6F6 | #6F9 | #6FC | #6FF |
| #900 | #903 | #906 | #909 | #90C | #90F |
| #930 | #933 | #936 | #939 | #93C | #93F |
| #960 | #963 | #966 | #969 | #96C | #96F |
| #990 | #993 | #996 | #999 | #99C | #99F |
| #9C0 | #9C3 | #9C6 | #9C9 | #9CC | #9CF |
| #9F0 | #9F3 | #9F6 | #9F9 | #9FC | #9FF |
| #C00 | #C03 | #C06 | #C09 | #C0C | #C0F |
| #C30 | #C33 | #C36 | #C39 | #C3C | #C3F |
| #C60 | #C63 | #C66 | #C69 | #C6C | #C6F |
| #C90 | #C93 | #C96 | #C99 | #C9C | #C9F |
| #CC0 | #CC3 | #CC6 | #CC9 | #CCC | #CCF |
| #CF0 | #CF3 | #CF6 | #CF9 | #CFC | #CFF |
| #F00 | #F03 | #F06 | #F09 | #F0C | #F0F |
| #F30 | #F33 | #F36 | #F39 | #F3C | #F3F |
| #F60 | #F63 | #F66 | #F69 | #F6C | #F6F |
| #F90 | #F93 | #F96 | #F99 | #F9C | #F9F |
| #FC0 | #FC3 | #FC6 | #FC9 | #FCC | #FCF |
| #FF0 | #FF3 | #FF6 | #FF9 | #FFC | #FFF |
Weblinks
- CSS-3-Farbnamen-Definitionen des W3C auf w3.org
- Colorschemedesigner.com – zusammenpassende Farb-Schemata, nützlich zur Auswahl passender Schattierungen
- Metacolor.de – umfangreiches Tutorial über Farben im Webdesign
- Colorizer.org – umfangreicher Farbauswähler mit Umrechnungen (RGB, HEX, HSL, HSV/HSB, CMYK)
- html-colors.org – benannte Farben mit Dezimal- und Hexadezimalwerten in Tabellen, farblich gruppiert und sortiert nach Abstufungen
Einzelnachweise
- HSLA Colors auf css3.info
- CMYK colors auf w3.org
- Re: [CfC] adding 'rebeccapurple' color to CSS Color Level 4. 21. Juni 2014, abgerufen am 24. April 2021 (englisch).
- Eric Meyer: rebeccapurple. 19. Juni 2014, abgerufen am 24. April 2021 (englisch).
- In der Tabelle ist jeder aufgeführten Farbcode der RGB-Hex-Wert in seiner CSS-Kurzform; so entspricht zum Beispiel
#609=rgb(102, 0, 153)oder hex.#660099. Siehe auch CSS: Use Shorthand Hex Colors (engl.) und en:Web colors #Shorthand hexadecimal form (engl.)
