Webfarben

Webfarben sind Farben benutzt in Anzeigen von Webseiten auf der Weltweites Netzund die Methoden zur Beschreibung und Angabe dieser Farben. Farben können als als spezifiziert werden RGB Triplet oder in hexadezimal Format (a Hex -Triplet) oder nach ihren gemeinsamen englischen Namen in einigen Fällen. EIN Farbwerkzeug oder andere Grafiksoftware wird oft verwendet, um Farbwerte zu erzeugen. In einigen Verwendungen werden hexadezimale Farbcodes mit Notation unter Verwendung eines Leitfadens angegeben Nummernschild (#).[1][2] Eine Farbe wird gemäß der Intensität ihrer roten, grünen und blauen Komponenten angegeben, die jeweils durch acht dargestellt werden Bits. Somit werden 24 Bit verwendet, um eine Webfarbe innerhalb der anzugeben SRGB Gamut und 16.777.216 Farben, die so angegeben werden können.

Farben außerhalb des SRGB -Zahnbetriebs können in angegeben werden in Cascading Style Sheets Indem Sie einen oder mehrere der roten, grünen und blauen Komponenten negativ oder mehr als 100%machen, ist der Farbraum theoretisch eine unbegrenzte Extrapolation von SRGB ähnlich wie SCRGB.[3] Das Angeben einer Nicht-SRGB-Farbe auf diese Weise erfordert die RGB () Funktionsaufruf. Es ist unmöglich mit der hexadezimalen Syntax (und damit im Erbe unmöglich Html Dokumente, die keine CSS verwenden).

Die ersten Versionen von Mosaik und Netscape Navigator benutzte die X11 Farbnamen als Grundlage für ihre Farblisten, wie beide als begonnen als X Fenstersystem Anwendungen. Webfarben haben eine eindeutige kolorimetrische Definition. SRGB, was die bezieht die Chromatitäten von einem bestimmten Phosphor Set, eine bestimmte Übertragungskurve, adaptive WhitePoint und Betrachtungsbedingungen.[4] Diese wurden als ähnlich wie viele reale Welt ausgewählt Monitore und Betrachtungsbedingungen, damit das Rendering ziemlich nahe an den angegebenen Werten ist, auch ohne Farbmanagement. Benutzeragenten variieren in der Treue, mit der sie die angegebenen Farben darstellen. Fortgeschrittene Benutzeragenten verwenden eine Farbverwaltung, um eine bessere Farbzutgung zu bieten. Dies ist besonders wichtig für Web-to-Print Anwendungen.

Hex -Triplet

A Hex -Triplet ist ein sechsstelliger dreistelliger, drei-Byte hexadezimal Nummer verwendet in Html, CSS, SVGund andere Computeranwendungen zur Darstellung von Farben. Die Bytes repräsentieren die rot, grün und blauen Komponenten der Farbe. Ein Byte stellt eine Zahl im Bereich 00 bis ff (in Hexadezimalnotation) oder 0 bis 255 in Dezimalnotation dar. Dies stellt die geringste (0) bis die meisten (255) Intensität jeder der Farbkomponenten dar. Somit geben Webfarben Farben in der an 24-Bit-RGB-Farbschema. Das Hex -Triplett wird durch Verkettung von drei Bytes in Hexadezimalnotation in der folgenden Reihenfolge gebildet:

  • Byte 1: Rotwert (Farbtyp rot)
  • Byte 2: Grünwert (Farbart grün)
  • Byte 3: Blauer Wert (Farbart Blau)

Betrachten Sie beispielsweise die Farbe, bei der die rot/grün/blauen Werte Dezimalzahlen sind: Rot = 36, grün = 104, blau = 160 (eine graublaue Farbe). Die Dezimalzahlen 36, 104 und 160 entsprechen den Hexadezimalzahlen 24, 68 bzw. A0. Das Hex -Triplett wird durch Verkettung der sechs Hexadezimalstellen zusammen, 2468A0 in diesem Beispiel zusammengefasst.

Wenn einer der drei Farbwerte weniger als 10 Hex (16 Dezimal) beträgt, muss er mit einem führenden Nullpunkt dargestellt werden, so dass das Triplett immer genau sechs Ziffern hat. Zum Beispiel würde das Dezimal -Triplet 4, 8, 16 durch die Hex -Ziffern 04, 08, 10 dargestellt und das Hex -Triplet 040810 bildet.

Die Anzahl der Farben, die durch dieses System dargestellt werden können, beträgt 166 oder 2563 oder 224 = 16.777.216.

Shorthand Hexadezimalform

Es wird eine abgekürzte, drei (hexadezimale) Digit-Form verwendet.[5] Die Erweiterung dieser Form in die sechsstellige Form ist so einfach wie die Verdoppelung jeder Ziffer: 09c wird 0099cc, wie im Folgenden dargestellt CSS Beispiel:

.Dreidler { Farbe: #09c;  } .SechsDigit  { Farbe: #0099cc; } / * gleiche Farbe wie oben */ 

Diese Kurzform reduziert die Palette auf 4.096 Farben, entspricht der 12-Bit-Farbe im Gegensatz zu 24-Bit-Farbe unter Verwendung der gesamten sechsstelligen Form (16.777.216 Farben). Diese Einschränkung reicht für viele textbasierte Dokumente aus.

RGB in Hexadezimal umwandeln

RGB -Werte sind normalerweise im Bereich von 0–255 angegeben; Wenn sie sich im Bereich von 0–1 befinden, werden die Werte vor der Konvertierung mit 255 multipliziert. Diese Zahl geteilt durch sechzehn (Ganzzahlabteilung; ignorieren Sie einen Rest) ergibt die erste hexadezimale Ziffer (zwischen 0 und f, wobei die Buchstaben a zu f die Zahlen 10 bis 15 darstellen. Siehe hexadezimal für mehr Details). Der Rest gibt die zweite hexadezimale Ziffer. Zum Beispiel unterteilt der RGB -Wert 201 in 12 Gruppen von 16 Gruppen, weshalb die erste Ziffer C. ein Rest von neun ist die Hexadezimalzahl C9. Dieser Vorgang wird für jeden der drei Farbwerte wiederholt.

Die Konvertierung zwischen Zahlenbasen ist ein gemeinsames Merkmal von Taschenrechnern, einschließlich der beiden Handmodelle und der Softwarerechner, die mit den meisten modernen gebündelt sind Betriebssysteme. Webbasierte Tools speziell zum Konvertieren von Farbwerten sind ebenfalls verfügbar.

HTML -Farbnamen

Jüngste W3c Spezifikationen von Farbnamen unterscheiden zwischen Basic und erweitert Farben.[6] In HTML und XHTML können Farben für Text, Hintergrundfarbe, Rahmenränder, Tabellen und einzelne Tabellenzellen verwendet werden.[7]

Grundfarben

Die Grundfarben sind 16 Farben in der definiert Html 4.01 Spezifikation, ratifiziert 1999,[8] wie folgt (Namen werden in diesem Zusammenhang als Fall unempfindlich definiert):

CSS 1–2.0, HTML 3.2–4 und VGA -Farbnamen
Name Verhexen
(RGB)
Rot
(RGB)
Grün
(RGB)
Blau
(RGB)
Farbton
(HSL/HSV)
Sättigung.
(HSL)
Licht
(HSL)
Sättigung.
(HSV)
Wert
(HSV)
CGA -Nummer (Name); alias
Weiß #Ffffff 100% 100% 100% 0° 0% 100% 0% 100% 15 (weiß)
Silber #C0C0C0 75% 75% 75% 0° 0% 75% 0% 75% 07 (hellgrau)
Grau #808080 50% 50% 50% 0° 0% 50% 0% 50% 08 (Dunkelgrau)
Schwarz #000000 0% 0% 0% 0° 0% 0% 0% 0% 00 (schwarz)
Rot #Ff0000 100% 0% 0% 0° 100% 50% 100% 100% 12 (hochrot)
Kastanienbraun #800000 50% 0% 0% 0° 100% 25% 100% 50% 04 (niedrig rot)
Gelb #Ffff00 100% 100% 0% 60° 100% 50% 100% 100% 14 (gelb)
Olive #808000 50% 50% 0% 60° 100% 25% 100% 50% 06 (braun)
Limette #00ff00 0% 100% 0% 120° 100% 50% 100% 100% 10 (hoch grün); grün
Grün #008000 0% 50% 0% 120° 100% 25% 100% 50% 02 (niedrig grün)
Aqua #00ffff 0% 100% 100% 180° 100% 50% 100% 100% 11 (High Cyan); Cyan
Blaugrün #008080 0% 50% 50% 180° 100% 25% 100% 50% 03 (niedriger Cyan)
Blau #0000ff 0% 0% 100% 240° 100% 50% 100% 100% 09 (hochblau)
Marine #000080 0% 0% 50% 240° 100% 25% 100% 50% 01 (niedrig blau)
Fuchsie #Ff00ff 100% 0% 100% 300° 100% 50% 100% 100% 13 (High Magenta); Magenta
Violett #800080 50% 0% 50% 300° 100% 25% 100% 50% 05 (niedrige Magenta)

Diese 16 wurden als SRGB bezeichnet und in der HTML 3.0 -Spezifikation enthalten, wobei festgestellt wurde VGA Palette."[9]

Verlängerte Farben

SVG -Version von X11 -Farbnamen
SVG1.1 Namens Colors mit SRGB Hex/DEC- und HSL -Codes bei UHD (4K) Auflösung

Erweiterte Farben sind das Ergebnis von Zusammenführungsspezifikationen aus HTML 4.01-, CSS 2.0-, SVG 1.0- und CSS3 -Benutzeroberflächen (CSS3 UI).[6]

Mehrere Farben sind definiert von Internetbrowser. Ein bestimmter Browser erkennt möglicherweise nicht alle diese Farben, aber ab 2005 unterstützen alle modernen, allgemeinen Gebrauchsbrowser die vollständige Liste der Farben. Viele dieser Farben stammen aus der Liste von X11 Farbnamen verteilt mit dem X Fenstersystem. Diese Farben wurden durch standardisiert SVG 1.0, und werden von akzeptiert von SVG voll Benutzeragenten. Sie sind nicht Teil von SVG winzig.

Die Liste der mit dem X11 -Produkt ausgelieferten Farben variiert zwischen Implementierungen und Zusammenstößen mit bestimmten HTML -Namen wie Grün. X11 Farben sind einfach als einfach definiert RGB (daher kein bestimmter Farbraum) und nicht SRGB. Dies bedeutet, dass die Liste der Farben in x11 (z. B. in /usr/lib/x11/rgb.txt) nicht direkt verwendet werden sollte, um Farben für das Web auszuwählen.[10]

Die Liste der Web -X11 -Farben der CSS3 -Spezifikation sowie deren hexadezimalen und dezimalen Äquivalente ist unten gezeigt. Vergleichen Sie die alphabetischen Listen in den W3C -Standards. This includes the common synonyms: aqua (HTML4/CSS 1.0 standard name) and cyan (common sRGB name), magenta (common sRGB name) and fuchsia (HTML4/CSS 1.0 standard name), gray (HTML4/CSS 1.0 standard name) and grau.[11][12]

Html Name R g b
Verhexen Dezimal
Rosa Farben
Mediumviolettred C7 15 85 199 21 133
Dunkelrosa FF 14 93 255 20 147
Paevioletred DB 70 93 219 112 147
Hotpink FF 69 B4 255 105 180
Hell-Pink Ff B6 C1 255 182 193
Rosa Ff c0 cb 255 192 203
Rote Farben
Dunkelrot 8B 00 00 139 0 0
Rot FF 00 00 255 0 0
Firebrick B2 22 22 178 34 34
Crimson DC 14 3c 220 20 60
Indisch CD 5c 5c 205 92 92
Lightcoral F0 80 80 240 128 128
Lachs FA 80 72 250 128 114
Darksalmon E9 96 7a 233 150 122
LightSalmon Ff a0 7a 255 160 122
Orangefarbene Farben
Orange Rot FF 45 00 255 69 0
Tomate FF 63 47 255 99 71
Dunkelorange FF 8c 00 255 140 0
Koralle FF 7f 50 255 127 80
Orange Ff a5 00 255 165 0
Gelbe Farben
Darkkhaki Bd B7 6b 189 183 107
Gold Ff d7 00 255 215 0
Khaki F0 E6 8c 240 230 140
Pfirsichpuff Ff da b9 255 218 185
Gelb Ff ff 00 255 255 0
Palegoldenrod Ee e8 aa 238 232 170
Moccasin Ff e4 b5 255 228 181
Papayawhip Ff ef d5 255 239 213
LightGoldenrodybellow Fa fa d2 250 250 210
Lemonchiffon Ff fa cd 255 250 205
Hellgelb Ff ff e0 255 255 224
Braune Farben
Kastanienbraun 80 00 00 128 0 0
Braun A5 2a 2a 165 42 42
Sattelbrown 8b 45 13 139 69 19
Sienna A0 52 2d 160 82 45
Schokolade D2 69 1e 210 105 30
Darkgoldenrod B8 86 0B 184 134 11
Peru CD 85 3f 205 133 63
Rosybrown BC 8f 8f 188 143 143
Goldenrod Da a5 20 218 165 32
Sandybrown F4 A4 60 244 164 96
Bräunen D2 B4 8c 210 180 140
Kräftiges Holz De b8 87 222 184 135
Weizen F5 de B3 245 222 179
Navajowhite Ff de ad 255 222 173
Bisque Ff e4 c4 255 228 196
Blanchedalmond FF EB CD 255 235 205
Cornsilk Ff f8 dc 255 248 220
Html Name R g b
Verhexen Dezimal
Grüne Farben
Dunkelgrün 00 64 00 0 100 0
Grün 00 80 00 0 128 0
Darkolivegreen 55 6b 2f 85 107 47
Waldgrün 22 8b 22 34 139 34
Meeresgrün 2e 8b 57 46 139 87
Olive 80 80 00 128 128 0
Olivgrün 6b 8e 23 107 142 35
MediumSeagreen 3c B3 71 60 179 113
Limegreen 32 CD 32 50 205 50
Limette 00 ff 00 0 255 0
Frühlingsgrün 00 ff 7f 0 255 127
Mediumspringgreen 00 FA 9A 0 250 154
Dagegen 8f BC 8f 143 188 143
Mediumaquamarine 66 CD AA 102 205 170
Gelbgrün 9a CD 32 154 205 50
Rasengrün 7c FC 00 124 252 0
Chartreuse 7f ff 00 127 255 0
Hellgrün 90 EE 90 144 238 144
Grün Gelb Ad ff 2f 173 255 47
Blasses Grün 98 FB 98 152 251 152
Cyan -Farben
Blaugrün 00 80 80 0 128 128
Darkcyan 00 8B 8B 0 139 139
LOLLESSEAGREEN 20 B2 AA 32 178 170
Kadettenblau 5f 9e A0 95 158 160
Darkturquoise 00 CE D1 0 206 209
Mediumturquoise 48 D1 CC 72 209 204
Türkis 40 E0 D0 64 224 208
Aqua 00 ff ff 0 255 255
Cyan 00 ff ff 0 255 255
Aquamarin 7f ff d4 127 255 212
Paleturquoise AF EE EE 175 238 238
Lichtcyan E0 ff ff 224 255 255
Blaue Farben
Mitternachtsblau 19 19 70 25 25 112
Marine 00 00 80 0 0 128
Dunkelblau 00 00 8B 0 0 139
Mittelblau 00 00 CD 0 0 205
Blau 00 00 ff 0 0 255
Königsblau 41 69 E1 65 105 225
Stahlblau 46 82 B4 70 130 180
Dodgerblue 1e 90 ff 30 144 255
Deepskyblue 00 bf ff 0 191 255
Kornblumenblau 64 95 ed 100 149 237
Himmelblau 87 CE EB 135 206 235
LightskyBlue 87 CE fa 135 206 250
Lightsteelblue B0 C4 DE 176 196 222
Hellblau Ad d8 e6 173 216 230
Powderblue B0 E0 E6 176 224 230
Html Name R g b
Verhexen Dezimal
Farben lila, violettes und Magenta
Indigo 4b 00 82 75 0 130
Violett 80 00 80 128 0 128
Darkmagenta 8B 00 8B 139 0 139
Dunkelviolett 94 00 D3 148 0 211
DarkSlateBlue 48 3d 8b 72 61 139
Blau Violett 8a 2b e2 138 43 226
Darkorchid 99 32 cc 153 50 204
Fuchsie Ff 00 ff 255 0 255
Magenta Ff 00 ff 255 0 255
SlateBlue 6a 5a CD 106 90 205
MediumslateBlue 7b 68 ee 123 104 238
Mediumorchid Ba 55 D3 186 85 211
Mediumpurpur 93 70 dB 147 112 219
Orchidee DA 70 D6 218 112 214
Violett EE 82 EE 238 130 238
Pflaume DD A0 DD 221 160 221
Distel D8 BF D8 216 191 216
Lavendel E6 E6 FA 230 230 250
Weiße Farben
Nebel Ff e4 e1 255 228 225
Altweiß Fa eb d7 250 235 215
Leinen Fa f0 e6 250 240 230
Beige F5 F5 DC 245 245 220
Weißer Rauch F5 F5 F5 245 245 245
Lavenderblush Ff f0 f5 255 240 245
Oldlace FD F5 E6 253 245 230
Alice blau F0 f8 ff 240 248 255
Muschel Ff f5 ee 255 245 238
Ghostwhite F8 F8 ff 248 248 255
Honigtau F0 ff f0 240 255 240
Floralwhite Ff fa f0 255 250 240
Azurblau F0 ff ff 240 255 255
Mintcream F5 ff fa 245 255 250
Schnee Ff fa fa 255 250 250
Elfenbein Ff ff f0 255 255 240
Weiß Ff ff ff 255 255 255
Graue und schwarze Farben
Schwarz 00 00 00 0 0 0
DarkSlateGray 2f 4f 4f 47 79 79
Dimgray 69 69 69 105 105 105
Schiefer grau 70 80 90 112 128 144
Grau 80 80 80 128 128 128
LightslateGray 77 88 99 119 136 153
Dunkelgrau A9 A9 A9 169 169 169
Silber C0 C0 C0 192 192 192
Hellgrau D3 D3 D3 211 211 211
Gainsboro DC DC DC 220 220 220

CSS -Farben

Das Cascading Style Sheets Die Spezifikation definiert die gleiche Anzahl benannter Farben wie die HTML 4 -Spezifikation, nämlich die 16 HTML -Farbenund 124 Farben aus der NetScape X11 Farbe Liste für insgesamt 140 Namen, die von Internet Explorer (dh) 3.0 und Netscape Navigator 3.0 erkannt wurden.[13] Blooberry.com stellt fest, dass Opera 2.1 und Safari 1 auch die erweiterte Liste von Netscape mit 140 Farbnamen enthielten. Später entdeckten 14 Namen nicht in der Opera 3.5 unter Windows 98.[14]

In CSS 2.1 wurde die Farbe 'Orange' (einer der 140) in den Abschnitt mit den 16 HTML4 -Farben als 17. Farbe hinzugefügt.[15] Die CSS3.0 -Spezifikation enthielt nicht Orange Im Abschnitt "HTML4 Color Keywords", der in "Basic Color Keywords" umbenannt wurde.[16] In derselben Referenz wurde der Abschnitt "SVG Color Keywords" in einem früheren Arbeitsentwurf umbenannt "erweiterte Farbschlüsselwörter", nachdem er als "X11 -Farb -Schlüsselwörter" begonnen hatte.[17] Der Arbeitsentwurf für das Farbmodul Level 4 kombiniert die grundlegenden und erweiterten Abschnitte in einem einfachen "Namen Colors".[18]

Farbe in CSS 2.1 hinzugefügt
Name Verhexen
(RGB)
Rot
(RGB)
Grün
(RGB)
Blau
(RGB)
Farbton
(HSL/HSV)
Sättigung.
(HSL)
Licht
(HSL)
Sättigung.
(HSV)
Wert
(HSV)
Alias
Orange #FFA500 100% 65% 0% 39° 100% 50% 100% 100%

CSS 2, SVG und CSS 2.1 ermöglichen Webautoren die Verwendung Systemfarben, die Farbnamen sind, deren Werte aus dem entnommen werden BetriebssystemAuswahl der hervorgehobenen Textfarbe des Betriebssystems oder der Hintergrundfarbe für Tooltip -Steuerelemente. Auf diese Weise können Webautoren ihre Inhalte im Einklang mit dem Betriebssystem des Benutzeragenten stylen.[19] Das CSS3 Farbmodul hat veraltet Die Verwendung von Systemfarben zugunsten der CSS3 UI -System -Aussehenseigenschaft, Eigenschaft,[20][21] was selbst anschließend von CSS3 fallen gelassen wurde.[22]

Die CSS3 -Spezifikation führt ebenfalls ein HSL -Farbraum Werte zu Stilblättern:[23]

/ * RGB -Modell *// p { Farbe: #F00 } / * #rgb */ p { Farbe: #Ff0000 } / * #rrggbb */ p { Farbe: RGB(255, 0, 0) } / * Ganzzahl Range 0 - 255 *// p { Farbe: RGB(100%, 0%, 0%) } / * Schwimmerbereich 0,0% - 100,0% */ / * RGB mit Alpha -Kanal, hinzugefügt zu CSS3 */ p { Farbe: RGBA(255, 0, 0, 0,5) } / * 0,5 Deckkraft, halbtransparent */ / * HSL -Modell, hinzugefügt zu CSS3 */ p { Farbe: HSL(0, 100%, 50%) } /* rot */ p { Farbe: HSL(120, 100%, 50%) } /* grün */ p { Farbe: HSL(120, 100%, 25%) } /* dunkelgrün */ p { Farbe: HSL(120, 100%, 75%) } /* hellgrün */ p { Farbe: HSL(120, 50%, 50%) } / * Pastellgrün */ / * HSL -Modell mit Alpha -Kanal */ p { Farbe: Hsla(120, 100%, 50%, 1) } /* grün */ p { Farbe: Hsla(120, 100%, 50%, 0,5) } / * semi-transparentes Grün *// p { Farbe: Hsla(120, 100%, 50%, 0,1) } / * sehr transparent grün */ 

CSS unterstützt auch die besondere Farbe transparent, was einen Alpha -Wert von Null darstellt; standardmäßig, transparent wird als unsichtbares nominales Schwarz gemacht: RGBA (0, 0, 0, 0). Es wurde in CSS1 eingeführt, aber sein Gebrauchsumfang hat sich um die Versionen erweitert.[23]

CSS -Farbe 4

Stufe 4 der CSS -Farbspezifikation führte mehrere neue CSS -Farbformate ein.[24]

Neben neuen Möglichkeiten zum Schreiben von Farben wird auch das Konzept des Mischen von Farben in einem nicht-srgb-Farbraum eingeführt, ein erster Schritt in Richtung Fixierung Ein bekanntes Problem bei Farbgradienten. Einige Abschnitte, die die Farbtheorie und gemeinsame Operationen erklären Gamut -Mapping werden auch hinzugefügt, um die Implementierung zu unterstützen.[24]

Gerätsunabhängige Farbe

CSS Color 4 führt verschiedene Formate für ein Gerätsunabhängige Farbe Dies kann die Gesamtheit der sichtbaren Farbe (in einem fähigen Bildschirm) anzeigen, einschließlich:[25]

Vordefinierte Farbräume

Eine Anzahl von RGB Räume mit Spiele das sind breiter als SRGB werden auch durch das neue eingeführt Farbe() Funktion:[25]

Eine linearisierte Variante von SRGB wird auch für die Farbmischung definiert.[24]

Andere Formate

Am 21. Juni 2014 die CSS wg Die Farbe Rebeccapurple fügte den Entwurf des Herausgebers des Colors Modul Level 4 hinzu, um zu erinnern Eric Meyer's Tochter Rebecca, die am 7. Juni 2014, ihren sechsten Geburtstag, starb.[26]

Farbe in CSS4 Farbenmodul hinzugefügt
Name Verhexen
(RGB)
Rot
(RGB)
Grün
(RGB)
Blau
(RGB)
Farbton
(HSL/HSV)
Sättigung.
(HSL)
Licht
(HSL)
Sättigung.
(HSV)
Wert
(HSV)
Alias
Rebeccapurple #663399 40% 20% 60% 270° 50% 40% 67% 60%

CSS4 stellt auch die vor HWB -Farbmodell als Alternative zu HSL/HSV.[18]

CSS -Farbe 5

Der Entwurf der CSS -Farbe 5[27] Die Spezifikation führt die Syntax zum Mischen und Manipulieren vorhandener Farben ein, einschließlich:

  • A color-mix () Funktion zum Mischen von Farben
  • Relative Farbsyntax zum Manipulieren von Komponenten einer vorhandenen Farbe

Benutzerdefinierte Farbräume werden auch über durch ICC -Profile. Dies ermöglicht die Verwendung von CMYK Auf Webseiten.[27]

Web-Safe-Farben

Mitte der neunziger Jahre konnten viele Displays nur 256 Farben anzeigen.[28] Diese können durch die Hardware diktiert oder durch eine "Farbtabelle" verändert werden. Wenn eine Farbe gefunden wird (z. B. in einem Bild), das nicht verfügbar ist, musste eine andere verwendet werden. Dies kann durch die Verwendung der nächsten Farbe oder durch Verwendung erfolgen Dithering.

Es gab verschiedene Versuche, eine "Standard" -Farbenpalette zu erstellen. Eine Reihe von Farben wurde benötigt, die ohne 256-Farben-Displays angezeigt werden konnte. Die Nummer 216 wurde teilweise ausgewählt, weil Computerbetriebssysteme für ihre eigene Verwendung üblicherweise sechzehn bis zwanzig Farben reserviert wurden. Es wurde auch ausgewählt, weil es genau sechs gleich beabstandete Rottöne, Grün und Blau (6 × 6 × 6 = 216), jeweils 00 bis ff (einschließlich beiden Grenzen).

Die Liste der Farben wird so dargestellt, als hätte sie spezielle Eigenschaften, die sie gegen Dithering immun machen, aber auf 256-Farben-Anzeigen können Anwendungen tatsächlich eine Palette von Farbauswahlen festlegen, die sie auswählen, und den Rest des Restes. Diese Farben wurden speziell ausgewählt, weil sie den Paletten übereinstimmten, die von verschiedenen Browseranwendungen ausgewählt wurden. In verschiedenen Browsern wurden nicht sehr unterschiedliche Paletten verwendet.

"Web-Safe" -Farben hatten einen Fehler, in dem System wie wie X11 Wenn die Palette zwischen Anwendungen geteilt wird, wurden kleinere Farbwürfel (5 × 5 × 5 oder 4 × 4 × 4) von Browsern zugeteilt-die "Web-Safe" -Farben würden auf solchen Systemen eingehen. Verschiedene Ergebnisse wurden erzielt, indem ein Bild mit einer größeren Farb Reihe bereitgestellt und dem Browser zugelassen wurde quantisieren Der Farbraum erleiden bei Bedarf nicht den Qualitätsverlust einer Doppelquantisierung.

In den 2000er Jahren fiel die Verwendung von 256-Farben-Displays in PCs stark zugunsten von 24-Bit (Wahre Farbe) Anzeigen,[29] Und die Verwendung von "Web-Safe" -Farben ist in praktischer Nichtverbrauch geraten.

Die "Web-Safe" -Farben haben nicht alle Standardnamen, aber jedes kann durch eine angegeben werden RGB Triplet: Jede Komponente (rot, grün und blau) nimmt einen der sechs Werte aus der folgenden Tabelle (aus den 256 möglichen Werten, die für jede Komponente in voller 24-Bit-Farbe verfügbar sind).

6 Farbtöne jeder Farbe
Taste Verhexen Dezimal Fraktion
0 00 0 0
3 33 51 0,2
6 66 102 0,4
9 99 153 0,6
C (12) CC 204 0,8
F (15) Ff 255 1

Die folgende Tabelle zeigt alle "Web-Safe" -Farben. Ein Manko der Web-Safe-Palette ist die kleine Auswahl an Lichtfarben für Webseitenhintergründe, während die Intensitäten am unteren Ende des Bereichs, wie die beiden dunkelsten, einander ähnlich sind, was sie schwer zu unterscheiden macht. Werte, die von "*" (Sternchen) flankiert werden, sind Teil der "wirklich sicheren Palette"; sehen Sicherste Webfarben, unter.

Farbtisch

216 Web-Safe-Farben
*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 *F F F*

Jeder aufgeführte Farbcode ist eine Abkürzung für den RGB -Wert. Zum Beispiel entspricht Code 609 RGB-Code 102-0-153 oder HEX-Code #660099.


Sicherste Webfarben

Die Designer wurden ermutigt, sich an diesen 216 "Web-Safe" -Farben in ihren Websites zu halten, da es viele 8-Bit-Farbdisplays gab, als die 216-Farben-Palette entwickelt wurde. David Lehn und Hadley Stern entdeckten, dass nur 22 der 216 Farben in der Web-Safe-Palette zuverlässig angezeigt werden 16-Bit-Computeranzeigen. Sie nannten diese 22 Farben "die wirklich sichere Palette"; Es besteht größtenteils aus Grün-, Gelb- und Blautönen.[30][31]

Sicherste Webfarben
R--
-GB
0 3 6 9 C F
00 *000* *F00*
03 *003* *F03*
06
09
0c
0f *00f* *F0f*
F0 *0f0* *6f0* *Ff0*
F3 *3f3* *6f3* *Ff3*
F6 *0f6* *3f6* *CF6* *Ff6*
F9
Fc *0fc* *3FC*
Ff *0ff* *3ff* *6ff* *F F F*

Barrierefreiheit

Farbauswahl

Etwas Browser und Geräte unterstützen keine Farben. Für diese Displays oder Blind- und Farbblindbenutzer können Webinhalte abhängig von Farben unbrauchbar oder schwer zu bedienen sein.

Entweder sollten keine Farben angegeben werden (um die Standardfarben des Browsers aufzurufen), oder sowohl den Hintergrund als auch alle Vordergrundfarben (z. Schwarz auf schwarz oder weiß auf weiß Auswirkungen.[32]

Farbkontrast

Das Richtlinien für Zugänglichkeitszüge auf Webinhalte empfehlen ein Kontrastverhältnis von mindestens 4,5: 1 zwischen den relative Luminanz des Textes und seiner Hintergrundfarbe[33] oder mindestens 3: 1 für großen Text. Eine verbesserte Zugänglichkeit erfordert Kontrastverhältnisse von mehr als 7: 1.

Die Bewältigung von Barrierefreiheitsproblemen ist jedoch nicht nur eine Frage der Erhöhung des Kontrastverhältnisses. Als Bericht an die Initiative für Web -Accessibility zeigt an,[34] Legastheniker Die Leser werden nach Kontrastverhältnissen unter dem Maximum besser bedient. Die Empfehlungen, auf die sie sich auf Off-Black (#0A0A0A) auf Off-White (#ffffe5) und Black (#000000) auf Creme (#FAFAC8) beziehen, haben Kontrastverhältnisse von 11,7: 1 bzw. 20,3: 1. Braun (#282800) auf Dunkelgrün (#A0A000) hat unter ihren anderen Farbpaaren ein Kontrastverhältnis von 3,24: 1, was geringer ist als die WCAG Empfehlung, Dark Brown (#1E1E00) auf hellgrün (#b9b900) hat ein Kontrastverhältnis von 4,54: 1 und Blue (#00007d) auf Gelb (#ffff00) hat ein Kontrastverhältnis von 11,4: 1. Beachten Sie, dass die im Bericht genannten Farben unterschiedliche Farbwerte verwenden als die gleichnamigen Webfarben.

Siehe auch

Verweise

  1. ^ NEDERST ROBBINS, Jennifer (Februar 2006). "Anhang D: Farbe angeben". Webdesign auf den Punkt gebracht. O'Reilly. p. 830. ISBN 978-0-596-00987-8.
  2. ^ York, Richard. CSS beginnen, S. 71–72.
  3. ^ Pemberton, Steven; Pettit, Brad (7. Juni 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (Hrsg.). "CSS Farbmodul Level 3". W3c. Abschnitt 4.2.1. RGB -Farbwerte.
  4. ^ Handbuch für digitale Farbbildgebung von Gaurav Sharma. ISBN0-8493-0900-x
  5. ^ Pemberton, Steven; Pettit, Brad (7. Juni 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (Hrsg.). "4.2.1. RGB -Farbwerte". CSS Farbmodul Level 3. W3c. Abgerufen 19. März 2013.
  6. ^ a b "CSS Farbmodul Level 3". W3c. Abgerufen 19. Juli 2020.
  7. ^ Powell, Thomas A. (2010). HTML & CSS: Die vollständige Referenz, fünfte Ausgabe. New York: McGraw-Hill. p. 765. ISBN 9780071741705.
  8. ^ "HTML 4.01 Spezifikation Abschnitt 6.5" Farben "". W3.org. Abgerufen 8. Juli 2013.
  9. ^ "HTML 3.2 Spezifikation" Das Körperelement "". W3.org. Abgerufen 8. Juli 2013.
  10. ^ "Öffentliche Diskussion auf SVG Mailingliste Betreff: Farbnamen in SVG-1.0 Konflikt mit /usr/lib/x11/rgb.txt". Lists.w3.org. Abgerufen 8. Juli 2013.
  11. ^ Pemberton, Steven; Pettit, Brad (7. Juni 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (Hrsg.). "4.3. Erweiterte Farbschlüsselwörter". CSS Farbmodul Level 3. W3c. Abgerufen 19. März 2013.
  12. ^ "W3C TR SVG 1.0, erkannte Farbschlüsselwortnamen". W3.org. 16. August 2011. Abgerufen 1. Februar 2019.
  13. ^ "Der X11 -Farbsatz". Abgerufen 6. Juli 2014.
  14. ^ Brian Wilson. "Farben in HTML und CSS". Abgerufen 6. Juli 2014.
  15. ^ "CSS 2.1 Spezifikation: Syntax und grundlegende Datentypen: Farben". 8. September 2009. Abgerufen 21. Dezember 2009.
  16. ^ "CSS -Farbmodul Level 3 - Vorgeschlagene Empfehlung - 11. Änderungen". 28. Oktober 2010. Abgerufen 6. Juli 2014.
  17. ^ "CSS Farbmodul Level 3 - Arbeitsentwurf". 18. April 2002. Abgerufen 6. Juli 2014.
  18. ^ a b CSS Farbmodul Level 4 - Entwurf des Herausgebers, 26. Juni 2014
  19. ^ "Benutzeroberfläche - Systemfarben". W3.org. Abgerufen 8. Juli 2013.
  20. ^ Pemberton, Steven; Pettit, Brad (7. Juni 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (Hrsg.). "4.5.1. CSS2 -Systemfarben". CSS Farbmodul Level 3. W3c. Abgerufen 19. März 2013.
  21. ^ "CSS3 Basic User Interface Modul, W3C -Kandidatenempfehlung 11 Mai 2004: System Erscheinungsbild". W3.org. Abgerufen 8. Juli 2013.
  22. ^ Çelik, Tantek, hrsg. (17. Januar 2012). "Liste wesentlicher Änderungen". CSS Basic User Interface Modul Level 3. W3c. Abgerufen 19. März 2013. Das System wurde fallen gelassen, einschließlich Erscheinungswerten und Eigenschaften sowie Systemschriften / Erweiterung der Kurzschrift der Schriftart.
  23. ^ a b Pemberton, Steven; Pettit, Brad (7. Juni 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (Hrsg.). "4.2.4. HSL -Farbwerte". CSS Farbmodul Level 3. W3c. Abgerufen 19. März 2013.
  24. ^ a b c d "CSS Farbmodul Level 4". W3.org. Abgerufen 14. März 2022.
  25. ^ a b "CSS Farbmodul Level 4: Übersicht". www.w3.org. Abgerufen 11. Januar 2022.
  26. ^ Glazman, Daniel (21. Juni 2014). "Re: [vgl.] Hinzufügen von 'Rebeccapurple' zu CSS Color Level 4". Post in die Mailingliste im WWW-Stil. W3c. Abgerufen 24. Juni 2014.
  27. ^ a b CSS Farbmodul Level 5
  28. ^ Jenkins, Sue (27. Dezember 2012). Webdesign All-in-One für Dummies. John Wiley & Sons. ISBN 9781118404119.
  29. ^ "Browser -Anzeigestatistiken".W3schools.com. Abgerufen 8. Juli 2013.
  30. ^ "Tod der Webafe -Farbpalette?".asc.ohio-state.edu. Abgerufen 3. März 2021.
  31. ^ "Web -Farbreferenz - HTML mit Stil | 4 | Webreferenz". www.webreference.com. Archiviert von das Original am 23. November 2016. Abgerufen 5. Januar 2016.
  32. ^ "Wenn Sie eine Farbe auswählen, wählen Sie sie alle aus". W3.org. Abgerufen 8. Juli 2013.
  33. ^ WCAG 2.0 Richtlinie 1.4
  34. ^ Optimale Farben zur Verbesserung der Lesbarkeit für Menschen mit Legasthenie

Externe Links