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 sehr daran gewöhnt, Farben in dieser Farbskala 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 für Color Level 4 bei CSS für die Hilfe, dass wir dieser Falle entkommen konnten. Der Text stammt hauptsächlich von Lea Verou und Chris Liley.
Ab Chrome 111 wird der Farbraum und die Farbräume von CSS Color 4 in Safari unterstützt. display-p3 wird seit 2016 unterstützt. CSS kann jetzt HD-Displays (High Definition) unterstützen. Dabei werden Farben aus HD-Gamuts angegeben und es sind auch Farbräume mit Spezialisierungen verfügbar. In diesem Leitfaden erfahren Sie, wie Sie diese neue Welt der Farben für sich nutzen können.
Jetzt ausprobieren
Browser, die unterstützt werden, haben 50% mehr Farben zur Auswahl. Sie dachten, 16 Millionen Farben klangen nach viel. Warten Sie, bis Sie sehen, wie viele Farben einige dieser neuen Bereiche zeigen können. Denken Sie auch an all die Banden, weil die Bittiefe nicht ausreicht. Das wurde ebenfalls aufgelöst.
Neben mehr Farben, die wahrscheinlich die lebendigsten Farben auf dem Display sind, 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 der Mixing-Upgrades. Die beiden beliebtesten Farbkombinationen werden im sRGB-Format verwendet. Die unteren beiden Farbmischungen befinden sich in Display p3. Display p3 hat lebhaftere Farben und die Mischungen ergeben ein vollständiges Schwarz-Weiß-Bild in der Mitte. Dabei wirkt sRGB etwas entsättigt und die Mixe in der Mitte sind keine vollständigen Schwarz- oder Weiß-Ergebnisse.
https://codepen.io/web-dot-dev/pen/poZgXQb
In diesem Leitfaden erfahren Sie, wo es Farben gegeben hat, wo sie eingesetzt werden und wie CSS Webentwicklern die Verwaltung von Farben ermöglicht und unterstützt.
Überblick
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 noch viel mehr als nur „mehr Farben“. Am Ende dieses Artikels werden Sie in der Lage sein, mehr Farben anzugeben, Farbverläufe zu optimieren und die besten Farbräume und Farbskala für jede Aufgabe auszuwä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 werden sieben neue Farbskalen vorgestellt, die alle einen größeren Bereich als sRGB bieten. Außerdem werden die verschiedenen Funktionen beschrieben, die Ihnen bei der Auswahl helfen:
Visueller Farbraum von Menschen
Die Farbskala wird oft 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.
Die Spezifikation für Ebene 4 führt 12 neue Farbräume für die Suche nach Farben aus den sieben neuen Farbskala ein, die wir zuvor vorgestellt haben:
Diese sind zusätzlich zu den vier zuvor verfügbaren Farbräumen verfügbar:
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.
Auf mehr Farben, neue Gruppenbereiche und Debug-Ergebnisse zugreifen
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. Dann eine Übersicht über die neuen Farbräume, Syntaxen und Tools.
Der folgende Codepen zeigt alle neuen und alten Farbsyntaxen zusammen:
Rückblick auf die klassischen Farbräume
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 beziehen sich 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%);
}
Die neuen Farbräume im Web
Mit den folgenden Farbräumen ist eine größere Farbpalette als bei sRGB verfügbar. Der Farbraum Display-p3 bietet fast doppelt so viele Farben wie RGB, während Rec2020 fast doppelt so viele Farben bietet wie Display-p3. Das sind ganz schön viele Farben!
Die color()-Funktion
Die neue color()-Funktion kann für jeden Farbraum verwendet werden, der Farben mit R-, G- und B-Kanälen angibt. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einige Alphawerte.
Viele der neuen Farbräume nutzen diese Funktion, da spezielle Funktionen wie rgb, srgb, hsl, hwb usw. zu einer langen Liste wurden, sodass der Farbraum einfacher als Parameter verwendet werden konnte.
Vorteile
- Ein normalisierter Bereich für den Zugriff auf Farbräume, die RGB-Kanäle verwenden.
- Es kann auf jeden RGB-basierten Farbraum mit großem Farbraum skaliert werden.
Nachteile
- Funktioniert nicht mit HSL, HWB, LCH, okLCH oder okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB über color()
Dieser Farbraum bietet dieselben Funktionen wie rgb(). Außerdem sind Dezimalzahlen zwischen 0 und 1 verfügbar, die genau wie 0% bis 100 % verwendet werden.
Vorteile
- Fast alle Displays unterstützen diesen Farbraum.
- Unterstützung für Designtools.
Nachteile
- Nicht wahrnehmbar linear (wie dies
lch()ist) - Keine Wide-Gamut-Farben.
- Farbverläufe durchlaufen oft eine Tote Zone.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
Lineares sRGB über color()
Diese lineare Alternative zu RGB bietet vorhersehbare Kanalintensität.
Vorteile
- Direkter Zugriff auf RGB-Kanäle, nützlich für Funktionen wie Spiel-Engines oder Lichtshows
Nachteile
- Nicht wahrnehmbar linear.
- Die Ränder haben jeweils schwarz-weiß.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Farbverläufe werden später noch ausführlicher behandelt. Es ist jedoch schnell sinnvoll, einen Schwarz-zu-Weiß-Farbverlauf von srgb und linear-srgb zu sehen, um die Unterschiede zu veranschaulichen:
LCH
Im ersten Bereich dieses Beitrags wird die Syntax für den Zugriff auf Farben außerhalb der RGB-Gamut vorgestellt. Es ist auch das erste, das es sehr einfach macht, Farben für ein Display außerhalb der Farbpalette zu erstellen. Das liegt daran, dass alle CIE-Bereichsfarben (lch, oklch, Lab, Oklab) das gesamte für Menschen sichtbare Farbspektrum darstellen können.
Dieser Farbraum ist dem menschlichen Sehen modelliert und bietet Syntax, um diese und weitere Farben anzugeben. Die LCH-Kanäle sind Helligkeit, Chroma und Farbton. Farbton ist ein Winkel, wie bei HSL und HWB. Helligkeit ist ein Wert zwischen 0 und 100. Im Gegensatz zur Helligkeit von HSL handelt es sich jedoch um eine spezielle, "perceptuell lineare", menschenzentrierte Helligkeit. Chroma ähnelt der Sättigung und kann zwischen 0 und 230 liegen, ist aber auch technisch unbegrenzt.
Vorteile
- Vorhersehbare Farbmanipulation dank wahrnehmbar linearer Farbpalette, zumeist linear (siehe oklch).
- Nutzt bekannte Kanäle.
- Hat häufig lebhafte Farbverläufe.
Nachteile
- Einfach rauskommen.
- In seltenen Fällen muss möglicherweise der Mittelpunkt des Farbverlaufs angepasst werden, um eine Farbtonverschiebung zu verhindern.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
LAB
Ein weiterer Farbraum, der für den Zugriff auf den CIE-Gamut erstellt wurde, wieder mit einer wahrnehmlich linearen Helligkeitsdimension (L). Das A und B in Lab stellen die einzigartigen Achsen der menschlichen Farbwahrnehmung dar: Rot-Grün und Blau-Gelb. Wenn A einen positiven Wert erhält, wird Rot hinzugefügt und Grün hinzugefügt, wenn der Wert unter 0 liegt. Wenn B eine positive Zahl erhält, wird Gelb hinzugefügt, wobei negative Werte in Richtung Blau gehen.
Vorteile
- Wahrhaft konsistente Farbverläufe.
- High Dynamic Range.
Nachteile
- Potenzial für Farbtonverschiebung.
- Beim Lesen von Werten ist es schwierig, den Autor zu schreiben oder eine Farbe zu erraten.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
Dieser Farbraum ist korrigierbar von LCH. Und wie LCH stellt (L) weiterhin die wahrnehmlich lineare Helligkeit dar, C für Chroma und H für Farbton.
Dieser Bereich kommt mir bekannt vor, wenn Sie mit HSL oder LCH gearbeitet haben. Wähle einen Winkel im Farbrad für H und durch Anpassung von L einen Helligkeits- oder Dunkelheitsgrad aus, aber dann haben wir Chroma anstelle von Sättigung. Sie sind ziemlich identisch, abgesehen davon, dass die Anpassungen an Helligkeit und Chroma meist paarweise erfolgen. Oder es kann einfach sein, Farben mit hohem Chroma zu verlangen, die außerhalb eines Zielgamuts liegen.
Vorteile
- Keine Überraschungen beim Arbeiten mit blauen und lila Farbtönen.
- Perzeptiv lineare Helligkeit.
- Nutzt bekannte Kanäle.
- High Dynamic Range.
- Verfügt über eine moderne Farbauswahl – von Evil Martians.
Nachteile
- Einfach rauskommen.
- Neu und noch relativ unerforscht.
- Wenige Farbauswahl.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Dieser Bereich ist die Korrektur des LAB. Es wird als Bereich bezeichnet, der auch für die Bildverarbeitungsqualität optimiert ist. In CSS stehen für uns Farbverläufe und die Manipulation von Farbfunktionen zur Verfügung.
Vorteile
- Standardbereich für Animationen und Interpolationen.
- Perzeptiv lineare Helligkeit.
- Keine Farbtonänderung wie LAB.
- Wahrhaft konsistente Farbverläufe.
Nachteile
- Neu und noch relativ unerforscht.
- Wenige Farbauswahl.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Display P3
Die Farbskala und der Farbraum des Displays P3 sind sehr beliebt, seit Apple sie seit 2015 auf dem iMac unterstützt. Apple hat Display-p3 auch seit 2016 auf Webseiten über CSS unterstützt und ist damit fünf Jahre älter als jeder andere Browser. Bei Verwendung des sRGB-Farbraums ist dies ein großartiger Farbraum, in dem Sie mit der Arbeit beginnen können, wenn Sie Stile in einen höheren dynamischen Bereich verschieben.
Vorteile
- Hervorragender Support – gilt als Basis für HDR-Displays.
- 50% mehr Farben als bei sRGB
- Die Entwicklertools bieten eine hervorragende Farbauswahl.
Nachteile
- Wird in Zukunft von Rec2020- und CIE-Bereichen übertroffen.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 ist Teil der Bewegung für UHDTV (Ultra-HD-Fernsehen), die eine große Farbpalette für die Verwendung in 4K- und 8K-Medien bietet. Rec2020 ist ein weiterer RGB-basierter Farbraum, der größer ist als Display-p3, aber nicht annähernd so häufig von Nutzern verwendet wird wie Display P3.
Vorteile
- Ultra-HD-Farben.
Nachteile
- Bei den Verbrauchern (noch) nicht so üblich.
- Nicht häufig in Handhelds oder Tablets zu finden.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
A98 RGB wurde von Adobe entwickelt und enthält die meisten Farben, die mit CMYK-Druckern möglich sind. Es bietet mehr Farben als sRGB, insbesondere in Cyan und Grün.
Vorteile
- Größer als die sRGB- und Display P3-Farbräume.
Nachteile
- Dies ist kein üblicher Bereich, in dem digitale Designschaffende arbeiten.
- Nur wenige Leute übertragen Farbvorlagen aus CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
Pro Photo (RGB)
Dieser von Kodak erstellte breite Farbraum bietet einen einzigartigen Farbraum mit sehr vielen Primärfarben und minimale Farbtonverschiebungen bei einer Änderung der Helligkeit. Sie soll außerdem 100% der realen Oberflächenfarben abdecken, wie von Michael Pointer aus dem Jahr 1980 dokumentiert.
Vorteile
- Minimale Farbtonänderungen beim Ändern der Helligkeit.
- Kräftige Primärfarben.
Nachteile
- Etwa 13% der angebotenen Farben sind imaginär, was bedeutet, dass sie nicht Teil des für Menschen sichtbaren Spektrums liegen.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
Der CIE-XYZ-Farbraum umfasst alle Farben, die für eine Person mit durchschnittlichem Sehvermögen sichtbar sind. Daher wird sie als Standardreferenz für andere Farbräume verwendet. Y steht für die Leuchtdichte, X und Z sind mögliche Chromen innerhalb der gegebenen Leuchtdichte Y.
Der Unterschied zwischen d50 und d65 ist der Weißpunkt, wobei d50 die d50-Weißpunkte und d65 den d65-Weißpunkt verwendet.
Vorteile
- Der Zugriff auf lineares Licht bietet praktische Anwendungsfälle.
- Ideal für das Mischen von physischen Farben.
Nachteile
- Nicht wahrnehmbar linear wie lch, oklch, Lab und Oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Benutzerdefinierte Farbräume
Die CSS Color 5-Spezifikation enthält auch einen Pfad zum Erklären eines benutzerdefinierten Farbraums für den Browser. Dies ist ein ICC-Profil, das dem Browser mitteilt, wie Farben aufgelöst werden sollen.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Nach dem Laden können Sie mit der Funktion color() auf die Farben aus diesem benutzerdefinierten Profil zugreifen und die Kanalwerte dafür angeben.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Farbinterpolation
Der Übergang von einer Farbe zu einer anderen wird durch Animationen, Farbverläufe und Farbmischungen unterstützt. Dieser Übergang wird normalerweise als Ausgangs- und Endfarbe angegeben, wobei vom Browser erwartet wird, dass sie zwischen ihnen interpoliert. „Interpolieren“ bedeutet in diesem Fall, dass eine Reihe von Farben generiert wird, um einen weichen Übergang zu erzeugen.
Bei einem Farbverlauf ist die Interpolation eine Reihe von Farben entlang einer Form. Bei einer Animation ist es eine Reihe von Farben im Zeitverlauf.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Bei einem Farbverlauf werden die Farben dazwischen auf einmal angezeigt:
Neuerungen bei der Farbinterpolation
Durch neue Gamuts und Farbräume wurden neue Optionen für die Interpolation hinzugefügt. Wenn die Farbe in hsl von Blau zu Weiß übergeht, unterscheidet sich dies stark von sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Sie können die Codepen-Demo nicht sehen?
Was passiert dann, wenn Sie von einer Farbe in einem Raum zu einer Farbe in einem ganz anderen Raum übergehen:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Sie können die Codepen-Demo nicht sehen?
Glücklicherweise enthält die Spezifikation Color 4 für die Browser Anweisungen zum Umgang mit diesen Interpolationen von unterschiedlichen Farbräumen. Im obigen Fall für .gradient bemerken Browser die unterscheidenden Farbräume und verwenden den Standardfarbraum oklab.
Vielleicht denken Sie, der Browser würde lch als Farbraum verwenden, da dies die erste Farbe ist. Das ist aber nicht der Fall. Deshalb zeige ich einen zweiten Vergleichsverlauf .lch an. Der Farbverlauf .lch ist ein Farbverlauf aus dem lch-Farbraum.
Weniger Streifen dank 16-Bit-Farben
Zuvor wurden alle Farben in einer 32-Bit-Ganzzahl gespeichert, die alle vier Kanäle darstellt: Rot, Grün, Blau und Alpha. Dies sind 8 Bit pro Kanal und 2^ 24 mögliche Farben (ohne Berücksichtigung von Alpha). 2 ^ 24 = 16.777.216, "Millionen von Farben".
Nach dieser Farbarbeit vier 16-Bit-Gleitkommawerte, hat jeder Kanal einen eigenen Gleitkommawert, anstatt ineinander geworfen zu werden. Insgesamt sind dies 64 Bit, was zu viel mehr als Millionen Farben führt.
Dies ist für die Unterstützung von HD-Farben erforderlich. Dadurch können mehr Farbinformationen gespeichert werden, was den Vorteil hat, dass der Browser mehr Farben für den Farbverlauf verwenden kann.
Farbverlaufs-Streifen sind zu erkennen, wenn nicht genügend Farben für einen glatten Farbverlauf vorhanden sind und „Farbstreifen“ sichtbar werden. Durch ein Upgrade auf Farben mit höherer Auflösung wird Streifenbildung stark reduziert.
Interpolation steuern
Die kürzeste Entfernung zwischen zwei Punkten ist immer eine gerade Linie. Bei der Farbinterpolation verwenden Browser standardmäßig die kurze Route. Stellen Sie sich ein Szenario vor, bei dem es zwei Punkte in einem HSL-Farbzylinder gibt. Ein Farbverlauf erhält seine Farbstufen, indem er sich entlang der Linie zwischen den beiden Punkten bewegt.
linear-gradient(to right, #94e99c, #e06242)
Draufsicht auf einen HSL-Zylinder mit einer Linie zwischen den Farbstopps
Die obige Farbverlaufslinie verläuft direkt zwischen der grünlichen und der rötlichen Farbe und verläuft durch die Mitte des Farbraums. Das obige Beispiel ist zwar hilfreich, um Ihnen ein erstes Verständnis zu vermitteln, es ist aber nicht immer das, was passiert. Hier sehen Sie den Farbverlauf im folgenden Codepen. Er ist eindeutig nicht in der Mitte weiß, wie in der Beispiel-Demo gezeigt.
Der mittlere Bereich des Farbverlaufs hat jedoch seine Lebendigkeit verloren. Das liegt daran, dass sich die leuchtendsten Farben am Rand der Farbraumform befinden und nicht in der Mitte, in der sich die Interpolation nahegelegt hat. Dies wird im Allgemeinen als tote Zone bezeichnet. Es gibt verschiedene Möglichkeiten, dieses Problem zu beheben.
Festlegen von mehr Gradientenstopps, um die Totzone zu vermeiden
Eine Technik, um die Totzone zu vermeiden, besteht heute darin, dem Farbverlauf zusätzliche Farbstopps hinzuzufügen, die die Interpolation bewusst so steuern, dass sie innerhalb der lebendigen Bereiche eines Farbraums bleibt. Dies ist im wahrsten Sinne eine Problemumgehung, da die zusätzlichen Zwischenstopps dazu beitragen, die Totzone zu umgehen.
Es gibt ein von Erik Kennedy entwickeltes Farbverlauf-Tool, mit dem zusätzliche Farbstopps für Sie berechnet werden können, damit Sie die tote Zone auch in Farbräumen vermeiden können, die dazu neigen. Wenn damit dieselben Farben aus dem ersten Beispiel übergeben, aber die Farbinterpolation in HSL geändert wird, ergibt sich Folgendes:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Draufsicht auf einen HSL-Zylinder mit einer gebogenen Linie mit 9 Farbstopps
Bei geführten Stopppunkten ist die Interpolation keine gerade Linie mehr, sondern scheint sich um die Totezone zu krümmen, wodurch die Sättigung erhalten bleibt, was zu einem viel lebhafteren Farbverlauf führt.
Das Tool funktioniert hervorragend. Was wäre, wenn Sie direkt in CSS eine ähnliche oder mehr Kontrolle haben könnten?
Farbinterpolation steuern
In Farbe 4 wurde die Möglichkeit hinzugefügt, die Strategie Farbtoninterpolation zu steuern. Dies ist eine neue Möglichkeit, die Totzone zu umgehen. Denken Sie an einen Farbtonwinkel und einen Farbverlauf mit zwei Stopps, der nur den Winkel ändert und beispielsweise von 140deg nach 240deg verschiebt.
Kürzere und längere Farbinterpolation
Der Farbverlauf verwendet standardmäßig die shorter-Route, sofern Sie nicht angeben, dass er die longer-Route nehmen soll. Farbton-Interpolationsoptionen steuern die Winkeldrehung, z. B. dass jemand nach links statt rechts drehen soll (heh, Zoolander):
Im obigen visuellen Beispiel für die Farbinterpolation werden der kurze und der lange Pfad simuliert, um den Unterschied zu veranschaulichen. Die kurze Strecke hat weniger Farbtöne, da sie so wenig wie möglich zurückgelegt wird.
Zunehmende und abnehmende Farbinterpolation
In Farbe 4 gibt es zwei weitere Strategien zur Farbinterpolation, die sich jedoch ausschließlich für zylindrische Farbräume eignen. Behalten Sie die beiden Farben aus den vorherigen Beispielen bei und zeigt die Grafik nun, wie Erhöhen und Verringern funktionieren.
Der obige Codepen verwendete ColorJS, um das erwartete Ergebnis zu demonstrieren. Um den gleichen Effekt ohne JavaScript-Bibliothek zu erzielen, würden Sie den folgenden CSS-Code schreiben:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Zum Beenden der Farbinterpolation können Sie den Farbton zwischen zwei Farbstopps ändern und sehen, wie sich die Farbinterpolation auswirkt und wie Farbräume die Farbverlaufsergebnisse verändern. Die Effekte können sehr unterschiedlich sein. Betrachten Sie das als vier neue Tricks in Ihrem Farbwerkzeuggürtel.
Farbverläufe in verschiedenen Farbräumen
Jeder Farbraum führt aufgrund seiner eindeutigen Form und Farbanordnung zu einem anderen Farbverlauf. Sehen Sie sich die folgenden Beispiele an, insbesondere von „Blau zu Weiß“. Sehen Sie sich an, wie dies in den einzelnen Farbräumen anders behandelt wird. Wie viele in der Mitte werden lila dargestellt. Dies wird während der Interpolation als Farbtonverschiebung bezeichnet.
Sie können die Codepen-Demo nicht sehen?
Das gezeigte Bild ist nur eines von vielen Beispielen aus dem Codepen. Es lohnt sich, Canary oder Safari Tech Preview auszuprobieren, um sie selbst zu sehen.
Einige Farbverläufe in diesen Bereichen sind lebhafter als andere oder passieren weniger tote Zonen.
Bereiche wie lab fassen Farben so zusammen, dass sie für die Sättigung optimiert sind, im Gegensatz zu Bereichen, in denen Menschen Farben in hwb() schreiben können.
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
Die obige Demo zeigt zwar subtile Ergebnisse, zeigt aber eine konsistentere Interpolation mit dem Lab. Die Syntax von Lab ist nicht einfach zu lesen. Es gibt negative Zahlen, die von rgb oder hsl noch nicht vertraut sind. Gute Neuigkeiten: Wir können hwb für eine vertraute Syntax verwenden, aber darum bitten, dass der Farbverlauf vollständig in einem anderen Farbraum wie Oklab interpoliert wird.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Sie können die Codepen-Demo nicht sehen?
In diesem Beispiel werden die gleichen Farben in HWB verwendet, aber es wird der Farbraum für die Interpolation in HWB oder Oklab angegeben. hwb ist ein großartiger Farbraum für dynamische, aber mögliche tote Zonen oder helle Flecken (siehe oben den Cyan-Hotspot). Oklab eignet sich hervorragend für wahrnehmlich lineare Farbverläufe, die gesättigt bleiben. Diese Funktion macht viel Spaß, da Sie verschiedene Farbräume ausprobieren können, um zu sehen, welchen Farbverlauf Ihnen am besten gefällt.
Hier ist ein Codepen, der mit Farbverläufen und Farbräumen sowie mit Misch- und Abgleichsstrategien experimentiert, um die Möglichkeiten zu erkunden. Sogar der Übergang von Schwarz zu Weiß ist in jedem Farbraum anders!
Sie können die Codepen-Demo nicht sehen?
Gamut Clamping
Es gibt Szenarien, in denen eine Farbe etwas außerhalb eines Umfangs verlangt. Betrachten Sie die folgende Farbe:
rgb(300 255 255)
Das Maximum für einen Farbkanal im Farbraum rgb beträgt 255, aber hier wurde 300 für Rot angegeben. Was ändert sich? Gamut Clamping.
Bei der Einschränkung werden zusätzliche Informationen einfach entfernt. 300 wird für die Farb-Engine intern zu 255. Die Farbe wurde nun innerhalb des Raums fixiert.
Farbraum auswählen
Nachdem sie diese Farbräume und ihre Effekte kennengelernt haben, fühlen sich viele überfordert und möchten wissen, welchen Farbraum sie wählen sollen. Nach meinem Studium und meiner Erfahrung sehe ich für alle meine Aufgaben nicht den einen Farbraum. Jeder hat Momente, in denen das gewünschte Ergebnis erzielt wird.
Wenn es einen besten Bereich gäbe, gäbe es nicht so viele neue Gruppenbereiche.
Ich kann jedoch sagen, dass die CIE-Bereiche – lab, oklab, lch und oklch – meine Ausgangspunkte sind. Wenn das Ergebnis nicht das ist, was ich erwarte,
teste ich andere Räume. Zum Mischen von Farben und Erstellen von Farbverläufen stimme ich der Standardspezifikation oklab zu. Was Farbsysteme und die allgemeinen Farben der Benutzeroberfläche angeht, gefällt mir oklch.
Hier sind ein paar Artikel, in denen Leute ihre aktualisierten
Farbstrategien angesichts dieser neuen Farbräume und Funktionen vorgestellt haben. Beispiel: Andrey Sitnik hat alles in oklch aufgenommen. Vielleicht werden sie Sie davon überzeugen, dasselbe zu tun:
- OKLCH in CSS: warum wir von RGB und HSL gewechselt haben von Andrey Sitnik
- Color Formats von Josh W. Comeau
- OK, OKLCH von Chris Coyier
Zu HD-CSS-Farbe migrieren
Es gibt zwei Hauptstrategien, um die Farbe Ihres Webprojekts so zu aktualisieren, dass eine breite Farbskala angezeigt wird:
Graduelle Fehlertoleranz
Verwenden Sie die neuen Farbräume und lassen Sie Browser und Betriebssystem anhand der Anzeigefunktionen bestimmen, welche Farbe angezeigt werden soll.Progressive Verbesserung
Verwenden Sie@supportsund@media, um die Funktionen des Browsers des Nutzers zu bewerten. Wenn die Bedingungen erfüllt sind, können Sie Farben in einem breiten Spektrum verwenden.
Wenn ein Browser die display-p3-Farbe nicht erkennt:
color: red;
color: color(display-p3 1 0 0);
Wenn ein Browser die display-p3-Farbe erkennt:
color: red;
color: color(display-p3 1 0 0);
Beides hat Vor- und Nachteile. Hier ist eine kurze Liste der Vor- und Nachteile:
Graceful Degradation
- Vorteile
- Die einfachste Route.
- Wenn keine Wide-Gamut-Anzeige verfügbar ist, verwendet der Browser eine Gamut Map oder wird an sRGB angepasst. Daher liegt die Verantwortung beim Browser.
- Nachteile
- Der Browser kann Gamut Clamp oder Gamut Map an eine Farbe anpassen, die Sie nicht mögen.
- Der Browser versteht die Farbanforderung möglicherweise nicht und schlägt ganz fehl. Sie können dies jedoch umgehen, indem Sie die Farbe zweimal angeben, sodass die Kaskade auf die vorherige Farbe zurückgesetzt werden kann, die sie versteht.
Progressive Enhancement
- Vorteile
- Mehr Kontrolle durch die verwaltete Farbwiedergabe.
- Eine additive Strategie, die sich nicht auf die aktuellen Farben auswirkt.
- Nachteile
- Sie müssen zwei separate Farbsyntaxen verwalten.
- Sie müssen zwei verschiedene Farbgamuts verwalten.
Unterstützung von Gamut und Farbraum prüfen
Der Browser ermöglicht die Prüfung auf Unterstützung für Wide-Gamut-Funktionen und Farbsyntaxunterstützung durch CSS und JavaScript. Die genaue Farbskala des Nutzers wird nicht zur Verfügung gestellt. Es wird eine allgemeine Antwort gegeben, um die Privatsphäre der Nutzer zu wahren. Die exakte Farbraumunterstützung wird jedoch angeboten, da diese nicht spezifisch für die Funktionen der Benutzerhardware wie die Gamut ist.
Support-Anfragen für Farbgamut
In den folgenden Codebeispielen wird der Farbbereich des Besuchers auf dem Display geprüft.
Überprüfung über Preisvergleichsportal
Die am wenigsten spezifische Supportanfrage ist die Medienabfrage dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Ungefährer oder mehr Support kann mit der color-gamut-Medienabfrage erfragt werden:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Es gibt zwei weitere Medienabfragen, um die Unterstützung zu prüfen:
Überprüfung über JavaScript
Bei JavaScript kann die Funktion window.matchMedia() aufgerufen und eine Medienabfrage zur Auswertung übergeben werden.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Das obige Muster kann für den Rest der Medienabfragen kopiert werden.
Supportanfragen zum Farbraum
In den folgenden Codebeispielen werden der Browser des Nutzers und die Auswahl der Farbräume geprüft, mit denen er verwendet werden soll.
Überprüfung über Preisvergleichsportal
Über eine @supports-Abfrage können Sie Unterstützung für einzelne Farbräume anfordern:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Überprüfung über JavaScript
Bei JavaScript kann die Funktion CSS.supports() aufgerufen und ein Property-Wert-Paar übergeben werden, um festzustellen, ob der Browser die Funktion versteht.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Hardware- und Parsing-Prüfungen zusammenstellen
Während Sie darauf warten, dass die neuen Farbfunktionen in den einzelnen Browsern implementiert werden, sollten Sie sowohl die Hardware- als auch die Farbanalysefunktion prüfen. Dies verwende ich häufig, wenn ich Farben schrittweise auf High Definition verbessere:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Debugging-Farbe mit Chrome-Entwicklertools
Die Chrome-Entwicklertools wurden aktualisiert und enthalten neue Tools, mit denen Entwickler HD-Farben erstellen, konvertieren und debuggen können.
Farbauswahl aktualisiert
Die Farbauswahl unterstützt jetzt alle neuen Farbräume. Autoren können so mit Kanalwerten interagieren wie sie es tun würden.
Gamutgrenzen
Außerdem wurde eine Gamut-Grenze hinzugefügt, die eine Linie zwischen den Skalen von „srgb“ und „display-p3“ zieht. Damit ist zu erkennen, in welchem Farbraum sich die ausgewählte Farbe befindet.
Dies erleichtert Autoren die visuelle Unterscheidung zwischen HD-Farben und Nicht-HD-Farben.
Dies ist besonders hilfreich bei der Arbeit mit der color()-Funktion und den neuen Farbräumen, da damit sowohl Nicht-HD- als auch HD-Farben erzeugt werden können. Wenn Sie überprüfen möchten, in welchem Umfang Ihre Farbe ist, öffnen Sie die Farbauswahl und sehen Sie sich an!
Farben konvertieren
DevTools kann seit vielen Jahren Farben zwischen unterstützten Formaten wie HSL, HWB, RGB und Hex konvertieren. shift + click auf einem quadratischen Farbmuster im Bereich „Stile“, um diese Konvertierung durchzuführen. Die neuen Farbtools durchlaufen nicht nur Konvertierungen, sondern auch ein Pop-up, in dem Autoren die gewünschte Konvertierung sehen und auswählen können.
Bei der Konvertierung ist es wichtig zu wissen, ob die Konvertierung an den Platz angepasst wurde. In den Entwicklertools wird für die konvertierte Farbe jetzt ein Warnsymbol angezeigt, das dich auf diesen Clip zeigt.
Weitere CSS-Debugging-Funktionen in den Entwicklertools findest du in dieser Ankündigung.
Fazit
Nicht-sRGB-Farbräume im Web befinden sich noch am Anfang, aber ich glaube, dass sie mit der Zeit immer mehr von Designern und Entwicklern verwendet werden. 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 der CSS-Spezifikation hinzugefügt wurde. Es ist in Ordnung, mit diesen klein zu beginnen und sie nach Bedarf hinzuzufügen.
Viel Spaß beim Spielen mit diesen neuen Farbspielzeugen! Mehr Dynamik, einheitliche Bearbeitungen und Interpolationen sowie ein insgesamt farbenfrohes Erlebnis für die Nutzer.
Weitere Informationen
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/