CSS Color 4 bietet Tools und Funktionen für Wide-Gamut-Farben im Web: mehr Farben, Manipulationsfunktionen und bessere Farbverläufe.
Für mehr als 25 Jahre, sRGB
(Standard-Rot-Grün-Blau) war die einzige Farbe,
gamut für CSS-Verläufe und -Farben mit Farbraum
darin enthaltene Angebote wie rgb()
, hsl()
und Hex. Das ist die gängigste Farbe
Vielfältige Möglichkeiten auf verschiedenen Displays den gemeinsamen Nenner. Wir sind gewachsen
indem Sie normalerweise Farben angeben.
![Die beliebtesten Farbformate nach Prozentsatz der Vorkommen.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=9&hl=de)
Da Displays immer mehr Möglichkeiten bieten, eine breite Palette von Farben darzustellen, muss CSS aus diesen größeren Bereichen Farben angeben können. Die aktuellen Farbformate keine Sprache für große Farbbereiche.
Wenn CSS nie aktualisiert wurde, bleibt es für immer im Farbbereich der 90er, was erzwungen wurde. nie mit dem breiten Angebot von Bildern und Videos übereinstimmt. Übersprungen, wird nur angezeigt 30% der Farben, die das menschliche Auge sehen kann. Vielen Dank der CSS Color Level 4 für die Flucht. vor allem von Lea Verou und Chris Liley geschrieben.
Chrome unterstützt in CSS Color 4 Farben und Farbräume. CSS unterstützt jetzt HD (High Definition) Displays, die Farben aus HD-Gamuts festlegen und Farbräume mit Spezialisierungen.
<ph type="x-smartling-placeholder">Probieren Sie es selbst aus
Dieser Leitfaden besteht aus drei Teilen. Lies weiter, um dich daran zu erinnern, wo Farben gewesen sind. Gehen Sie dann so vor: Lesen Sie, wo die Farben hingehen und wie Sie Farben zukünftig verwalten können, indem Sie zu HD-Farben migrieren.
Übersicht
In unterstützten Browsern stehen 50% mehr Farben zur Auswahl. Wenn Sie dachten, 16 nach Millionen Farben klang, warten Sie, bis Sie sehen, wie viele Farben diese neuen Gruppenbereiche angezeigt werden. Denken Sie auch an all die Farbverläufe, banded, weil nicht genug ist auch das gelöst.
Zusätzlich zu mehr Farben – der brillantesten Farbpalette – das Display, neue Farbräume bieten einzigartige Tools und Methoden zum Verwalten und Erstellen Farbsysteme. Zuvor hatten wir beispielsweise HSL und Kanal, den besten Webentwicklern. In CSS haben wir nun die "Wahrnehmungsstärke" von LCH.
<ph type="x-smartling-placeholder">![Zwei farbige Tabellen werden nebeneinander angezeigt. Die erste Tabelle zeigt eine HSL
Ein Regenbogen mit 10 Farben und daneben Graustufen, die
die Helligkeit dieser HSL-Farben. Die zweite Tabelle zeigt einen LCH-Regenbogen,
viel weniger leuchtend, aber die Graustufenfarben daneben sind einheitlich.
Dies zeigt, dass LCH einen gesunden konstanten Helligkeitswert hat, HSL jedoch nicht.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=9&hl=de)
Darüber hinaus werden Farbverläufe und Mischtechniken verbessert: Farbraumunterstützung, Farbton. Interpolationsoptionen und weniger Banding.
In der folgenden Abbildung sehen Sie einige der Upgrades.
<ph type="x-smartling-placeholder">![](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=9&hl=de)
<ph type="x-smartling-placeholder"></ph> https://codepen.io/web-dot-dev/pen/poZgXQb
Das Problem mit Farben und dem Web ist, dass CSS nicht bereit für High Definition ist. während die Displays die meisten Leute in der Hosentasche, auf dem Schoß oder an der Wand montieren. die eine breite Palette und HD-Farben unterstützen. Die Farbfunktionen von Displays gewachsen ist als CSS, ist das CSS hier, um aufzuholen.
Es gibt viel mehr als nur „mehr Farben“. Am Ende dieser Dokumente können Sie mehr Farben angeben, Farbverläufe optimieren und die Farbräume und Farbgamuts für jede Aufgabe.
Was ist eine Farbskala?
Eine Gamut steht für die Größe von etwas. Der Ausdruck „Millionen von Farben“ ist ein Kommentar zur Bandbreite eines Bildschirms oder zum Farbbereich, der ausgewählt werden kann aus. In der folgenden Abbildung werden drei Gamuts verglichen. Je größer die Größe, desto mehr Farben bietet es.
Eine Farbgamut kann auch einen Namen haben. Wie ein Basketball gegen einen Baseball vente Coffee Cup vs. Grande; kann ein Name für die Größe helfen, kommunizieren können. Wenn Sie diese Farbgamut-Namen kennen, können Sie schnell kommunizieren Farbpalette verstehen können.
In diesem Artikel werden die vorherigen Farbgamuts behandelt. Weitere Informationen Sieben neue Farben in Mehr Farben und neue Bereiche.
Menschliche Sehfähigkeit
Die Farbgamut wird oft mit der menschlichen visuellen Bandbreite verglichen. die gesamte Farbe, von der wir glauben, dass das menschliche Auge sie sehen kann. HVS wird oft mit einer Chromatizitätsdiagramm wie hier gezeigt:
<ph type="x-smartling-placeholder">![Die Form eines Hufeisens hat einen leuchtenden Farbverlauf und ein hohles Dreieck in der Mitte.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=9&hl=de)
Die äußere Form ist das, was wir als Menschen sehen, und das innere Dreieck ist das
rgb()
-Funktionsbereich, der sRGB-Farbraum.
Wie du die Dreiecke oben gesehen hast, findest du beim Vergleich der Gamutgrößen Dreiecke unten. So kommuniziert die Branche über Farbgamut und vergleichen können.
Was ist ein Farbraum?
Farbräume sind Anordnungen einer Gamut, die eine Form und auf Farben zuzugreifen. Bei vielen handelt es sich um einfache 3D-Formen wie Würfel oder Zylinder. Diese Farbe die Anordnung bestimmt, welche Farben nebeneinander stehen und wie der Zugriff und Interpolieren von Farben funktioniert.
RGB ist wie ein rechteckiger Farbraum, in dem auf Farben zugegriffen wird, indem auf drei Achsen. HSL ist ein zylinderförmiger Farbraum, in dem auf Farben mit einem Farbtonwinkel und Koordinaten auf zwei Achsen zugegriffen werden kann
<ph type="x-smartling-placeholder">![Ein zur Hälfte ausgeschnittener RGB-Würfel und Schnitte in einen HSL-Zylinder sind nebeneinander zu sehen, um zu zeigen, wie die Farben in jedem Raum in eine Form gepackt werden.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=9&hl=de)
In der Spezifikation von Level 4 werden 12 neuen Farbräumen nach Farben. Diese stehen zusätzlich zu den 4 Farben Zuvor verfügbare Gruppenbereiche:
Zusammenfassung der Farbgamut und des Farbraums
Ein Farbraum ist eine Zuordnung von Farben, wobei ein Farbraum ein Farbbereich ist. Betrachten Sie eine Farbgamut als Summe aus Partikeln und einen Farbraum als Flasche. Partikel in diesem Bereich aufnehmen können.
Hier ist eine interaktive Visualisierung von Alexey Ardov, die zeigt, Farbräume. In dieser Demo zeigen, ziehen und zoomen Sie herum. Farbraum ändern um eine Visualisierung weiterer Bereiche zu sehen.
- Verwenden Sie Farbgamuts, um einen Farbbereich wie einen niedrigen oder schmalen Farbraum anzugeben zwischen hoher und breiterer Bandbreite.
- Verwenden Sie Farbräume, um über Farbanordnungen und eine Syntax zur Angabe einer Farben ändern und durch Farben interpolieren.
![Ein Würfel mit vielen mehrfarbigen Punkten.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=9&hl=de)
Die klassischen Farbräume {#classic-color-spaces}
CSS Color 4 stellt eine Reihe neuer Funktionen und Tools für CSS und Farbe. Zunächst zur Wiederholung, wo Farben zuvor für diese neuen Funktionen.
Seit den 2000er-Jahren können Sie Folgendes für alle Preisvergleichsportal-Properties verwenden:
für die eine Farbe als Wert akzeptiert wird: hexadezimal (Hexadezimalzahlen), rgb()
, rgba()
, durch
Namen wie hotpink
oder Keywords wie
currentColor
Um 2010 könnte CSS je nach Browser verwenden,
hsl()
Farben. 2017 wurden dann
Hexadezimalwert mit Alpha wird angezeigt. Letzter Punkt
hwb()
hat vor Kurzem begonnen,
in Browsern unterstützt.
Alle diese klassischen Farbräume verweisen auf Farben in demselben Gamut, sRGB.
HEX
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Der hexadezimale Farbraum definiert R, G, B und A mit Hexadezimalzahlen. Die folgenden Codebeispiele zeigen alle Möglichkeiten auf, wie diese Syntax Rot, Grün und Blau plus Deckkraft.
.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
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Der RGB-Farbraum bietet direkten Zugriff auf die roten, grünen und blauen Kanäle. Sie können einen Wert zwischen 0 und 255 oder einen Prozentsatz von 0 bis 100 angeben. Diese Syntax existierte bereits, bevor eine Syntaxnormalisierung im Spezifikationen kennen, sodass Sie überall Komma- und Nicht-Komma-Syntaxen sehen. Umzug 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
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Einer der ersten Farbräume, die sich an der menschlichen Sprache und -Kommunikation bietet HSL (Farbtonsättigung und Helligkeit) alle Farben der sRGB-Gamut, wobei das Gehirn nicht weiß, wie Rot, Grün und Blau interagieren. Wie bei RGB-Farben enthielt die Syntax ursprünglich auch Kommas, 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%);
}
HWB
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Ein weiterer sRGB-Gamut-Farbraum, der darauf ausgerichtet ist, wie Menschen Farben beschreiben, ist HWB. (Farbton, Weißheit, Schwärze). Autoren können einen Farbton auswählen und Weiß oder Schwarz verwenden. 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
Informationen zu den neuen Farbräumen, Syntaxen und Tools Anschließend erfährst du, wie du zu HD-Farben migrieren kannst.
Nicht-sRGB-Farbräume sind im Web noch ganz am Anfang, aber wir werden die Nutzung durch Designschaffende und Entwickelnde im Laufe der Zeit zunimmt. Zu wissen, welche Farbraum, auf dem ein Designsystem aufgebaut werden kann, ein gutes Werkzeug für Creator. Jeder Farbraum bietet einzigartige Merkmale und einen Grund, der CSS-Spezifikation hinzugefügt. Sie können klein anfangen und nach Bedarf anpassen.
Ressourcen
Weitere Artikel zu Farbe Stufe 5
Weitere Informationen finden Sie auch im Web:
- CSS Color Module Level 4 von W3C
CSS Color Module Level 5 von W3C
Und Tools: