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.

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.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

</ph> <ph type="x-smartling-placeholder">

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 können 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">

</ph> <ph type="x-smartling-placeholder">

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

</ph> <ph type="x-smartling-placeholder">

Das Problem mit Farben und 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, wird CSS jetzt aufholen.

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

</ph> <ph type="x-smartling-placeholder">

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

</ph> <ph type="x-smartling-placeholder">

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:

• Hex
• RGB
• HSL
• HWB

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.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

Der hexadezimale Farbraum definiert R, G, B und A mit Hexadezimal 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

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

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

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.

Ressourcen

Weitere Artikel zu Farbe Stufe 5

• Relative CSS-Farbsyntax
• CSS-Farbmix

Weitere Informationen finden Sie auch im Web:

• CSS Color Module Level 4 von W3C

• CSS Color Module Level 5 von W3C

• LCH-Farben in CSS: Was, warum und wie?

• Besser als Lab? Gamutreduzierung: CIE Lab und OKLab

• Für kräftigere Farben im Web

• Okhsv und Okhsl: Zwei neue Farbräume für die Farbauswahl

• Sinnvollere Farben in Chromium (PDF)

• LCH ist der beste Farbraum!

• Barrierefreie Farbsysteme entwerfen

• Color Spaces von Hannah Weller

• Wide-Gamut Color in CSS mit Display-P3

• CIE 1931-Farbraum

• Farbformate in CSS

• Color Spaces von Bartosz Ciechanowski

Und Tools:

• afc163.github.io/color3d/
• Gamut-Visualisierung
• Farbverlauf-Generator