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 16⁶ oder 256³ oder 2²⁴ = 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):

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]

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]

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]

• Anzeige P3
• Prophoto
• Rec.2020
• Adobe 1998 RGB

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]

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

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

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]

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

Externe Links

• CSS -Farbwert an MDN Web Docs
• CSS2.1 Farbspezifikation
• Webfarben bei Curlie