Farbe/Farbpaletten
Text-Info
- 15min
- leicht
Mit Farbangaben in HTML, CSS oder SVG können Sie bis zu 16,7 Millionen verschiedene Farbwerte kodieren. Es gibt jedoch Standard-Paletten, die ganz bestimmte dieser 16,7 Millionen möglichen Farbwerte benutzen. Zwar besteht kein Zwang, sich an diese Paletten zu halten, doch wenn keine gestalterischen Gründe dagegensprechen, bieten diese Paletten eine gewisse Orientierung. Auf jeden Fall haben solche Farbpaletten einen technischen Vorteil: die Chance, dass die Farben auf verschiedenen Hardware-Typen und verschiedenen Betriebssystemen gleich aussehen, ist größer als bei Farben mit „beliebigen“ Farbtönen.
Inhaltsverzeichnis
Die VGA-Palette (16 Farben)
Die VGA-Palette ist der kleinste gemeinsame Nenner aller VGA-kompatiblen Grafikkarten und Bildschirme. Für die 16 Farben der VGA-Palette sind in HTML und CSS auch die vordefinierten Farbnamen erlaubt.
| black | #000000 | grey | #808080 |
| maroon | #800000 | red | #FF0000 |
| green | #008000 | lime | #00FF00 |
| olive | #808000 | yellow | #FFFF00 |
| navy | #000080 | blue | #0000FF |
| purple | #800080 | fuchsia | #FF00FF |
| teal | #008080 | aqua | #00FFFF |
| silver | #C0C0C0 | white | #FFFFFF |
Die Netscape-Palette (216 websichere Farben)
Für eine Grafik im Format GIF können Sie pro Frame aus den 16,7 Mio. möglichen Farben des RGB-Farbmodells maximal 256 Farben wählen und abspeichern. Jede der Farben kann beliebige RGB-Werte haben, d. h. es sind auch „krumme“ Farbwerte wie 71,217,34 möglich.
Für webgerechte GIF-Grafiken steht jedoch ein Standardschema zur Verfügung, das von Netscape eingeführt wurde und auf diesem Browser plattformübergreifend optimal interpretiert wird. Nach dem Netscape-Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 dividierbar sind. R(ot), G(rün) und B(lau) sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC oder FF) haben. Ein erlaubter Wert ist danach z. B. 255,51,204 (hexadezimal: FF,33,CC). Auf diese Weise ergeben sich 6 x 6 x 6 mögliche Farben, also 216.
Die verbleibenden 40 Farben können Sie als „eiserne Reserve“ betrachten. Wenn Sie für einzelne Grafiken bestimmte, fehlende Farbtöne brauchen, können Sie unbenutzte Farben der Palette mit der gewünschten Farbe definieren.
| *000* | 300 | 600 | 900 | C00 | *F00* |
| *003* | 303 | 603 | 903 | C03 | *F03* |
| 006 | 306 | 606 | 906 | C06 | F06 |
| 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C | F0C |
| *00F* | 30F | 60F | 90F | C0F | *F0F* |
| 030 | 330 | 630 | 930 | C30 | F30 |
| 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336 | 636 | 936 | C36 | F36 |
| 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C |
| 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 |
| 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 |
| 069 | 369 | 669 | 969 | C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C |
| 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 |
| 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 |
| 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C |
| 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
| 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
| 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC |
| 0CF | 3CF | 6CF | 9CF | CCF | FCF |
| *0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* |
| 0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* |
| *0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* |
| 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| *0FC* | *3FC* | 6FC | 9FC | CFC | FFC |
| *0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
Farbnamen
Dies ist eigentlich keine Farbpalette im engeren Sinn, sondern eine lose Sammlung von Farben mit bestimmten Farbwerten. Die Sammlung wurde seinerzeit von Netscape eingeführt, um zusätzlich zu der Palette mit den 216 Farben, die einem algorithmischen Schema folgen, noch ein paar vordefinierte Farbtöne für Zwischentöne und Pastellfarben anzubieten. Sie stammen zumeist aus dem X Windows System (X11), wo sie in den 1980ern definiert wurden. Falls ein Namenskonflikt mit den VGA-Farben (siehe oben) auftrat, gab die W3C den VGA-Farben Vorrang. Deshalb ist darkgray (aus X11) heller als gray (aus den VGA-Farben).
Alle grauen Farben können auch mit „e“ geschrieben werden, Gerüchten zufolge, weil sich die Menschen bei HP die richtige Schreibweise nicht merken konnten.[1][2]
2014 wurde eine neue Farbe hinzugefügt: rebeccapurple ist ein Andenken an Rebecca Alison Meyer, Tochter des CSS-Buch-Autoren Eric A. Meyer. Sie starb am 7. Juni 2014, ihrem sechsten Geburtstag, an einem Hirntumor.[3]
Diese Farbnamen werden von der Mehrzahl der modernen Browser bei Farbangaben in HTML oder CSS interpretiert.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Farbnamen (alphabetisch)
|
|
|
transparent
Das Schlüsselwort transparent ist ebenfalls ein Farbname. Es darf überall dort vorkommen, wo ein Farbwert erwartet wird. Statt einer Farbe wird dann eine transparente Fläche gebildet, etwa ein unsichtbarer Rahmen oder ein durchsichtiges Element.
transparent ist ein Synonym für rgb(0 0 0 / 0).
currentColor
Das Schlüsselwort currentColor enthält den berechneten Wert der Schriftfarbe eines Elements. Diesen Wert können Sie als Standardfarbwert festlegen und überall dort verwenden, wo eine Farbangabe erwartet wird. Die Darstellung ist also abhängig von den Textfarben der Vorfahrenelemente.
Information: color-Eigenschaft mit falschen Namen?
Genau genommen müsste sie eigentlich
text-color heißen.Zukünftig sollen wie in SVG eine fill- und eine stroke-Eigenschaft weitere Gestaltungsmöglichkeiten bieten.
Der Wert der Eigenschaft color wird automatisch auf Nachfahrenlemente vererbt. Im Beispiel wird die Textfarbe des body-Elements – hier der Defaultwert der meisten Browser, schwarz – für alle Nachfahren verwendet, ohne dass eine Angabe zur Textfarbe erfolgt.
Des Weiteren wird bei Rahmen, Außenlinien oder Schlagschatten ohne Farbangabe die Textfarbe als Farbe für den Schatten bzw. Linien verwendet.
h1 {
color: royalblue;
border-bottom: thick solid;
}
aside {
float: right;
box-shadow: 5px 10px 15px;
outline: medium solid;
}
aside.hinweis {
color: red;
}
Da nur jeweils ein Farb-Wert festgelegt werden kann, bleibt der Nutzen überschaubar.
Eine Einsatzmöglichkeit ist bei SVG-Icons, bei denen die Füllung abhängig vom aktuellen Farbwert angepasst werden kann.
Vielseitiger ist die Verwendung von Custom properties (CSS-Variablen)
Mit custom properties ist es möglich, mehrere Farben festzulegen und über die var()-Funktion als Wert beliebig oft wieder einzusetzen. Änderungen von Farbwerten können nun zentral für das ganze Stylesheet durchgeführt werden.
Systemfarben
In CSS 2 wurde das Konzept der Systemfarben eingeführt. Dabei handelte es sich um 28 Schlüsselwörter, die die Farben wiedergeben sollen, die auch das Betriebssystem zur Darstellung von Fenstern, Text und Schaltflächen verwendet.[4]
Im CSS Color Module Level 4 wurden diese Systemfarben auf 12 reduziert:
| Beispiel | Schlüsselwort | Farbe, die wiedergegeben wird |
|---|---|---|
ActiveText |
Rahmenfarbe aktiver Links. | |
ButtonFace |
Oberfläche von Schaltflächen und Fenstern. | |
ButtonText |
Text von Schaltflächen. | |
Canvas |
Hintergrund | |
CanvasText |
Textfarbe von Anwendungen und Dokumentinhalten | |
Field |
Hintergrundfarbe von Eingabefeldern | |
FieldText |
Textfarbe von Eingabefeldern | |
GrayText |
Textfarbe ausgegrauter (deaktivierter) Elemente. Entspricht #000, wenn der Grafiktreiber keinen durchgängigen Grauton unterstützt. | |
Highlight |
Markierungsfarbe ausgewählter Bereiche. | |
HighlightText |
Textfarbe in ausgewählten Bereichen. | |
LinkText |
Textfarbe für unbesuchte, inaktive Links | |
VisitedText |
Textfarbe besuchter Links. |
Weblinks
- ↑ ars technica: “Tomato” versus “#FF6347”—the tragicomic history of CSS color names
- ↑ Merriam-Webster: 'Gray' vs. 'Grey': What is the Difference?
- ↑ Eric Meyer: rebeccapurple
- ↑ MDN: System Colors
