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):
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


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]
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]
- Labor und LCH
- Oklab und Oklch (bevorzugt gegenüber Labor/LCH)[24]: §§9.2–3
- Xyz (D50 oder D65 [Standard])
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]
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).
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
*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]
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
- ^ NEDERST ROBBINS, Jennifer (Februar 2006). "Anhang D: Farbe angeben". Webdesign auf den Punkt gebracht. O'Reilly. p. 830. ISBN 978-0-596-00987-8.
- ^ York, Richard. CSS beginnen, S. 71–72.
- ^ 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.
- ^ Handbuch für digitale Farbbildgebung von Gaurav Sharma. ISBN0-8493-0900-x
- ^ 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.
- ^ a b "CSS Farbmodul Level 3". W3c. Abgerufen 19. Juli 2020.
- ^ Powell, Thomas A. (2010). HTML & CSS: Die vollständige Referenz, fünfte Ausgabe. New York: McGraw-Hill. p. 765. ISBN 9780071741705.
- ^ "HTML 4.01 Spezifikation Abschnitt 6.5" Farben "". W3.org. Abgerufen 8. Juli 2013.
- ^ "HTML 3.2 Spezifikation" Das Körperelement "". W3.org. Abgerufen 8. Juli 2013.
- ^ "Ö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.
- ^ 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.
- ^ "W3C TR SVG 1.0, erkannte Farbschlüsselwortnamen". W3.org. 16. August 2011. Abgerufen 1. Februar 2019.
- ^ "Der X11 -Farbsatz". Abgerufen 6. Juli 2014.
- ^ Brian Wilson. "Farben in HTML und CSS". Abgerufen 6. Juli 2014.
- ^ "CSS 2.1 Spezifikation: Syntax und grundlegende Datentypen: Farben". 8. September 2009. Abgerufen 21. Dezember 2009.
- ^ "CSS -Farbmodul Level 3 - Vorgeschlagene Empfehlung - 11. Änderungen". 28. Oktober 2010. Abgerufen 6. Juli 2014.
- ^ "CSS Farbmodul Level 3 - Arbeitsentwurf". 18. April 2002. Abgerufen 6. Juli 2014.
- ^ a b CSS Farbmodul Level 4 - Entwurf des Herausgebers, 26. Juni 2014
- ^ "Benutzeroberfläche - Systemfarben". W3.org. Abgerufen 8. Juli 2013.
- ^ 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.
- ^ "CSS3 Basic User Interface Modul, W3C -Kandidatenempfehlung 11 Mai 2004: System Erscheinungsbild". W3.org. Abgerufen 8. Juli 2013.
- ^ Ç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.
- ^ 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.
- ^ a b c d "CSS Farbmodul Level 4". W3.org. Abgerufen 14. März 2022.
- ^ a b "CSS Farbmodul Level 4: Übersicht". www.w3.org. Abgerufen 11. Januar 2022.
- ^ 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.
- ^ a b CSS Farbmodul Level 5
- ^ Jenkins, Sue (27. Dezember 2012). Webdesign All-in-One für Dummies. John Wiley & Sons. ISBN 9781118404119.
- ^ "Browser -Anzeigestatistiken".W3schools.com. Abgerufen 8. Juli 2013.
- ^ "Tod der Webafe -Farbpalette?".asc.ohio-state.edu. Abgerufen 3. März 2021.
- ^ "Web -Farbreferenz - HTML mit Stil | 4 | Webreferenz". www.webreference.com. Archiviert von das Original am 23. November 2016. Abgerufen 5. Januar 2016.
- ^ "Wenn Sie eine Farbe auswählen, wählen Sie sie alle aus". W3.org. Abgerufen 8. Juli 2013.
- ^ WCAG 2.0 Richtlinie 1.4
- ^ Optimale Farben zur Verbesserung der Lesbarkeit für Menschen mit Legasthenie