Diese Seite wurde von der Cloud Translation API übersetzt.

CSS-Farbleitfaden für High Definition

CSS Color 4 bietet Tools und Funktionen für Wide-Gamut-Farben im Web: mehr Farben, Manipulationsfunktionen und bessere Farbverläufe.

Adam Argyle

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. — </ph> <ph type="x-smartling-placeholder"></ph> https://almanac.httparchive.org/en/2022/css#colors

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>

</ph> Es wird eine Reihe von Bildern gezeigt, die zwischen breit und schmal sind. der Farbpaletten und verdeutlicht die Farbkraft und ihre Effekte.
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.

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. — </ph> Vorschau anzeigen bei Codepen

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> Die beiden beliebtesten Farbkombinationen sind sRGB mit sRGB-Farben. Die unteren beiden Farbmischungen sind in Display P3 zu sehen. Display p3 enthält mehr kräftige Farben und die Mischungen führen Schwarz und Weiß in der Mitte, Der sRGB-Farbraum wirkt etwas entsättigt, während die Mischungen in der Mitte keine Schwarz-Weiß-Ergebnisse.
<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.

Farbgamuts werden nebeneinander als Dreiecksform verglichen.
sRGB ist die kleinste und Rec2020 die größte.

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:

Die Form eines Hufeisens hat einen leuchtenden Farbverlauf und ein hohles Dreieck in der Mitte. — </ph> Quelle: Wikipedia

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

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. — </ph> https://en.wikipedia.org/wiki/HSL_and_HSV

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. — </ph> Oben sehen Sie den sRGB-Farbraum der Partikel, die in den Farbraum eines RGB-Würfels passen. Bildquelle

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">

Quelle

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">

Quelle

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">

Quelle

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">

Quelle

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.

CSS-Farbleitfaden für High Definition

Übersicht

Was ist eine Farbskala?

Menschliche Sehfähigkeit

Was ist ein Farbraum?

Zusammenfassung der Farbgamut und des Farbraums

Die klassischen Farbräume {#classic-color-spaces}

HEX

RGB

HSL

HWB

Nächste Schritte

Ressourcen