CSS Color 4 bietet im Web eine Vielzahl von Farbtools und -funktionen: mehr Farben, Bearbeitungsfunktionen und bessere Farbverläufe.
Seit mehr als 25 Jahren ist sRGB (Standard-Rot-Grün-Blau) der einzige Farbraum für CSS-Verläufe und -Farben, mit Farbraum wie rgb(), hsl() und Hexadezimalwert. Es ist die gängigste Farbskalafunktion von Displays und ein gemeinsamer Nenner. Wir haben uns daran gewöhnt, Farben darin anzugeben.
Da Bildschirme immer mehr in der Lage sind, eine breite Palette von Farben darzustellen, benötigt CSS eine Möglichkeit, Farben aus diesen größeren Farbbereichen anzugeben. Die aktuellen Farbformate haben keine Sprache für große Farbbereiche.
Wenn CSS nie aktualisiert würde, bliebe es für immer in den Farbbereichen der 90er-Jahre fest, und würde niemals dem breiten Angebot entsprechen, das in Bildern und Videos zu finden ist. Eingegrenzt, nur 30% der Farben, die das menschliche Auge sehen kann Vielen Dank an CSS Color Level 4 für die Unterstützung bei der Flucht, die hauptsächlich von Lea Verou und Chris Liley verfasst wurde.
Chrome unterstützt CSS Color 4-Gamuts und -Farbräume. CSS unterstützt jetzt HD-Displays (High Definition), bei denen Farben aus HD-Gamuts angegeben werden können, aber auch Farbräume mit Spezialisierungen.
Jetzt ausprobieren
Dieses Handbuch besteht aus drei Teilen. Lies weiter, um dir zu merken, wo die Farbe gewesen ist. Lesen Sie anschließend, wo wird Farbe hinkommen und wie Sie Farben in Zukunft durch die Migration zu HD-Farbe verwalten können.
Überblick
In unterstützten Browsern stehen 50% mehr Farben zur Auswahl. Wenn Sie dachten, dass 16 Millionen Farben nach viel klingen, warten Sie, bis Sie sehen, wie viele Farben einige dieser neuen Bereiche anzeigen können. Denken Sie auch an all die Banden, weil die Bittiefe nicht ausreicht. Das wurde ebenfalls aufgelöst.
Neben mehr Farben, die vermutlich die lebendigsten Farben, die das Display kann, bieten neue Farbräume einzigartige Tools und Methoden zum Verwalten und Erstellen von Farbsystemen. Früher hatten wir zum Beispiel HSL und seinen „lightness“-Kanal, der der beste Webentwickler war. In CSS gibt es nun die Wahrnehmungshelligkeit von LCH.
Darüber hinaus erhalten Verläufe und Mischungen einige Upgrades: Unterstützung des Farbraums, Farbinterpolationsoptionen und weniger Streifenbildung.
In der folgenden Abbildung sehen Sie einige gemischte Upgrades.
https://codepen.io/web-dot-dev/pen/poZgXQb
Das Problem mit Farbe und dem Web ist, dass CSS nicht für High Definition bereit ist. Die meisten Bildschirme hingegen, die in der Hosentasche, auf dem Schoß oder an der Wand befestigt sind, haben eine breite Palette und High Definition-Farben. Die Farbfunktionen von Displays wuchsen schneller als CSS. Jetzt muss CSS aufholen.
Es gibt viel mehr als nur „mehr Farben“. Nach Abschluss dieser Dokumente können Sie mehr Farben angeben, die Farbverläufe optimieren und die besten Farbräume und Farbskalen für jede Aufgabe auswählen.
Was ist eine Farbskala?
Die Farbskala stellt die Größe von etwas dar. Der Ausdruck "Millionen Farben" beschreibt die Farbskala eines Displays oder die Farbpalette, aus der es wählen kann. In der folgenden Abbildung werden drei Gamuts verglichen. Je größer die Größe, desto mehr Farben stehen zur Verfügung.
Ein Farbraum kann auch einen Namen haben. Wie ein Basketball gegen einen Baseball oder eine Vene-Kaffeetasse gegen eine Grande kann ein Name für die Größe Menschen helfen, zu kommunizieren. Durch das Erlernen dieser Farbskalanamen können Sie eine Reihe von Farben kommunizieren und schnell verstehen.
In diesem Artikel geht es um die vorherigen Farbgamuts. Informationen zu den sieben neuen Farbskala finden Sie unter Mehr Farben und neue Bereiche.
Visueller Farbraum von Menschen
Die Farbskala wird häufig mit der visuellen Farbskala des Menschen verglichen, d. h. die gesamte Farbskala, die das menschliche Auge sehen kann. HVS wird oft mit einem chromatischen Diagramm dargestellt:
Die äußerste Form ist das, was wir als Menschen sehen können, und das innere Dreieck ist der rgb()-Funktionsbereich, auch bekannt als sRGB-Farbraum.
Wie Sie oben die Dreiecke gesehen haben, vergleichen Sie die Gamutgrößen und sehen sich unten die Dreiecke an. Dies ist die branchenübliche Art, über Farbskala zu kommunizieren und sie zu vergleichen.
Was ist ein Farbraum?
Farbräume sind Anordnungen einer Farbskala, die eine Form und eine Methode für den Zugriff auf Farben festlegen. Viele davon sind einfache 3D-Formen wie Würfel oder Zylinder. Diese Farbanordnung bestimmt, welche Farben nebeneinander liegen und wie der Zugriff auf und das Interpolieren von Farben funktioniert.
RGB ist wie ein rechteckiger Farbraum, in dem über Koordinaten auf drei Achsen auf Farben zugegriffen werden kann. HSL ist ein zylindrischer Farbraum, in dem über einen Farbtonwinkel und Koordinaten auf zwei Achsen auf Farben zugegriffen werden kann.
Mit der Spezifikation der Stufe 4 werden 12 neue Farbräume für die Suche nach Farben eingeführt. Dies erfolgt zusätzlich zu den vier zuvor verfügbaren Farbräumen:
Farbskala und Farbraumzusammenfassung
Ein Farbraum ist eine Zuordnung von Farben, wobei ein Farbraum ein Farbbereich ist. Stellen Sie sich eine Farbskala als Gesamtpartikel und einen Farbraum als eine Flasche vor, die diesen Teilchenbereich aufnehmen soll.
Hier ist eine interaktive Grafik von Alexey Ardov, die Farbräume veranschaulicht. In dieser Demo zeigen, ziehen und zoomen. Ändern Sie den Farbraum, um andere Bereiche zu visualisieren.
- Nutzen Sie die Farbskala, um über eine Farbpalette zu sprechen, z. B. einen niedrigen oder einen schmalen Farbraum im Vergleich zu einem großen oder großen Farbraum.
- Verwenden Sie Farbräume, um über Farbanordnungen und über die Syntax zur Angabe einer Farbe, über Manipulation und Interpolation von Farben zu sprechen.
Ein Rückblick zu den klassischen Farbräumen {#classic-color-spaces}
CSS Color 4 beschreibt eine Reihe neuer Funktionen und Tools für CSS und Farbe. Zunächst eine Wiederholung, wo sich Farben vor diesen neuen Funktionen befanden.
Seit den 2000er-Jahren konnten Sie Folgendes für alle CSS-Eigenschaften verwenden, die eine Farbe als Wert akzeptieren: Hexadezimal (Hexadezimalzahlen), rgb(), rgba(), mit Namen wie hotpink oder mit Keywords wie currentColor.
Seit ca. 2010 könnte CSS je nach Browser hsl()-Farben verwenden. 2017 erschien dann Hex mit Alpha. hwb() wird seit Kurzem auch in Browsern unterstützt.
Alle diese klassischen Farbräume verweisen auf Farben im selben Farbraum, nämlich sRGB.
HEX
Der Hexadezimalfarbraum gibt R, G, B und A mit Hexadezimalzahlen an. Die folgenden Codebeispiele zeigen alle Möglichkeiten, wie mit dieser Syntax Rot, Grün und Blau plus Deckkraft angegeben werden können.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
Der RGB-Farbraum bietet direkten Zugriff auf die roten, grünen und blauen Kanäle. Sie können einen Betrag zwischen 0 und 255 oder einen Prozentsatz von 0 bis 100 angeben. Diese Syntax gab es schon vor der Syntaxnormalisierung in den Spezifikationen, sodass Sie auch Kommas und No-Komma-Syntaxen in freier Wildbahn sehen werden. In Zukunft sind Kommas nicht mehr erforderlich.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
Als einer der ersten Farbräume, die sich an der menschlichen Sprache und Kommunikation orientieren, bietet HSL (Farbtonsättigung und -helligkeit) alle Farben des sRGB-Gamuts, ohne dass Ihr Gehirn wissen muss, wie Rot, Grün und Blau interagieren. Wie bei RGB waren Kommas ursprünglich in der Syntax enthalten, aber ab jetzt sind Kommas nicht mehr erforderlich.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
Hardware
Ein weiterer sRGB-Gamut-Farbraum, der darauf ausgerichtet ist, wie Menschen Farben beschreiben, ist HWB (Farbton, Weißheit, Schwärzung). Sie können einen Farbton auswählen und Weiß oder Schwarz kombinieren, um die gewünschte Farbe zu finden.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Nächste Schritte
Informieren Sie sich über die neuen Farbräume, Syntaxen und Tools und erfahren Sie, wie Sie zu HD-Farben migrieren.
Nicht-sRGB-Farbräume im Web befinden sich noch am Anfang, aber im Laufe der Zeit werden wir immer mehr von Designern und Entwicklern verwendet. Zu wissen, auf welchem Farbraum ein Designsystem aufgebaut werden soll, ist für Creator beispielsweise ein sehr gutes Werkzeug. Jeder Farbraum bietet einzigartige Funktionen und einen Grund, warum er in die CSS-Spezifikation aufgenommen wurde. Es ist in Ordnung, mit diesen klein anzufangen und sie nach Bedarf hinzuzufügen.
Ressourcen
Weitere Artikel zu Farbstufe 5 findest du hier.
Außerdem finden Sie weitere Lesematerialien im Web:
- CSS-Farbmodul Stufe 4 von W3C
CSS-Farbmodul Stufe 5 von W3C
Und Tools: