CSS-Farbleitfaden für High Definition

Mit CSS Color 4 werden Tools und Funktionen für den erweiterten Farbraum ins Web gebracht: mehr Farben, Manipulationsfunktionen und bessere Farbverläufe.

Adam Argyle

Seit über 25 Jahren ist sRGB (Standardrot-Grün-Blau) der einzige Farbraum für CSS-Verläufe und ‑Farben. Dazu gehören Farbraumangebote wie rgb(), hsl() und Hexadezimal. Es ist die gängigste Farbraumfunktion bei Displays und ein gemeinsamer Nenner. Wir sind es gewohnt, Farben darin anzugeben.

Da Displays immer mehr Farben darstellen können, benötigt CSS eine Möglichkeit, Farben aus diesen größeren Bereichen anzugeben. Die aktuellen Farbformate haben keine Sprache für breite Farbbereiche.

Wenn CSS nie aktualisiert würde, würde es für immer bei den Farbbereichen der 90er-Jahre stecken bleiben und nie den Angeboten mit breitem Farbraum in Bildern und Videos entsprechen. Eingesperrt, sodass nur 30% der Farben zu sehen sind, die das menschliche Auge wahrnehmen kann. Wir danken CSS Color Level 4, das vor allem von Lea Verou und Chris Liley geschrieben wurde, für die Hilfe beim Entkommen.

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, während Farbräume mit Spezialisierungen angeboten werden.

Dieser Leitfaden besteht aus drei Teilen. Lesen Sie weiter, um sich in Erinnerung zu rufen, wo Farbe verwendet wurde. Weitere Informationen dazu, wie sich die Farbtechnologie in Zukunft entwickeln wird und wie Sie Farben in Zukunft verwalten können, wenn Sie auf HD-Farben umstellen, finden Sie in den folgenden Artikeln.

Übersicht

In unterstützten Browsern stehen 50% mehr Farben zur Auswahl. Wenn Sie dachten, dass 16 Millionen Farben viel sind, warten Sie, bis Sie sehen, wie viele Farben einige dieser neuen Bereiche anzeigen können. Denken Sie auch an all die Farbverläufe, die streifenartig waren, weil nicht genügend Bittiefe vorhanden war. Auch dieses Problem wurde behoben.

Neben mehr Farben, die wohl die schillerndsten Farben sind, die das Display darstellen kann, bieten neue Farbräume einzigartige Tools und Methoden zum Verwalten und Erstellen von Farbsystemen. Bisher hatten wir beispielsweise HSL und seinen „Helligkeit“-Kanal, was das Beste war, was Webentwickler hatten. In CSS gibt es jetzt die „perzeptive Helligkeit“ von LCH.

Außerdem wurden Farbverläufe und das Mischen verbessert: Unterstützung von Farbräumen, Optionen für die Farbtoninterpolation und weniger Streifen.

In der folgenden Abbildung sehen Sie einige der Upgrades.

Das Problem mit Farben und dem Web ist, dass CSS nicht für High Definition geeignet ist, während die Displays, die die meisten Menschen in ihren Hosentaschen, auf ihren Schoß oder an Wänden haben, einen großen Farbumfang und High Definition-Farben unterstützen. Die Farbfähigkeit von Displays hat sich schneller entwickelt als CSS. Jetzt kann CSS aufholen.

Es geht um mehr als nur um „mehr Farben“. Am Ende dieser Dokumente können Sie mehr Farben festlegen, Farbverläufe optimieren und die besten Farbräume und Farbräume für jede Aufgabe auswählen.

Was ist ein Farbraum?

Ein Farbraum stellt die Größe eines Objekts dar. Der Ausdruck „Millionen von Farben“ bezieht sich auf den Farbraum eines Displays, also den Farbbereich, aus dem es auswählen kann. Im folgenden Bild werden drei Farbräume verglichen. Je größer der Farbraum, desto mehr Farben bietet er.

Ein Farbraum kann auch einen Namen haben. Ähnlich wie ein Basketball im Vergleich zu einem Baseball oder ein Venti-Kaffeebecher im Vergleich zu einem Grande kann ein Name für die Größe die Kommunikation erleichtern. Wenn Sie diese Farbgamutnamen kennen, können Sie eine Reihe von Farben schnell verstehen und kommunizieren.

In diesem Artikel werden die bisherigen Farbräume beschrieben. Weitere Informationen zu den sieben neuen Farbräumen finden Sie unter Auf mehr Farben und neue Farbräume zugreifen.

Das menschliche Farbsehen

Die Farbgamut wird häufig mit der menschlichen visuellen Bandbreite verglichen, also der Gesamtfarbe, von der wir glauben, dass sie das menschliche Auge sehen kann. Das menschliche visuelle System wird oft mit einem Farbtafeldiagramm dargestellt, z. B. so:

Die äußerste Form ist das, was wir als Menschen sehen können, und das innere Dreieck ist der Bereich der rgb()-Funktionen, auch sRGB-Farbraum genannt.

Wie Sie oben gesehen haben, wurden beim Vergleich der Farbraumgrößen Dreiecke verwendet. Das Gleiche gilt für die folgenden Abbildungen. So kommunizieren und vergleichen Fachleute in der Branche Farbräume.

Was ist ein Farbraum?

Farbräume sind Anordnungen eines Farbraums, die eine Form und eine Methode zum 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 die Interpolation von Farben funktioniert.

RGB ist wie ein rechteckiger Farbraum, in dem Farben durch Angabe von Koordinaten auf drei Achsen aufgerufen werden. HSL ist ein zylindrischer Farbraum, bei dem Farben über einen Farbtonwinkel und Koordinaten auf zwei Achsen abgerufen werden.

Die Spezifikation der 4. Ebene führt 12 neue Farbräume für die Farbsuche ein. Diese vier Farbräume sind zusätzlich zu den vier zuvor verfügbaren Farbräumen verfügbar:

• Hex
• RGB
• HSL
• HWB

Zusammenfassung von Farbraum und Farbskala

Ein Farbraum ist eine Zuordnung von Farben, wobei ein Farbraum ein Farbbereich ist. Stellen Sie sich einen Farbraum als eine Gesamtheit von Partikeln und einen Farbraum als eine Flasche vor, die diese Partikel aufnehmen soll.

Hier ist eine interaktive Visualisierung von Alexey Ardov, die Farbräume veranschaulicht. In dieser Demo können Sie den Mauszeiger bewegen, ziehen und zoomen. Ändern Sie den Farbraum, um eine Visualisierung anderer Räume zu sehen.

• Verwenden Sie Farbräume, um einen Farbbereich zu beschreiben, z. B. einen niedrigen Bereich oder einen schmalen Farbraum im Vergleich zu einem hohen Bereich oder einem breiten Farbraum.
• Verwenden Sie Farbräume, um über Farbanordnungen, Syntax zur Angabe einer Farbe, Farbmanipulation und Farbinterpolation zu sprechen.

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

CSS Color 4 beschreibt eine Reihe neuer Funktionen und Tools für CSS und Farben. Zunächst möchte ich noch einmal kurz zusammenfassen, wo Farben vor diesen neuen Funktionen stehen.

Seit den 2000er-Jahren können Sie für alle CSS-Eigenschaften, die eine Farbe als Wert akzeptieren, Folgendes verwenden: Hexadezimalzahlen (Hexzahlen), rgb(), rgba(), per Name wie hotpink oder mit Keywords wie currentColor.

Um 2010 könnte CSS je nach Browser hsl()-Farben verwenden. 2017 kam dann Hex mit Alpha hinzu. Erst seit Kurzem wird hwb() auch in Browsern unterstützt.

Alle diese klassischen Farbräume beziehen sich auf Farben innerhalb desselben Gamuts, sRGB.

HEX

Im Hexadezimal-Farbraum werden R, G, B und A mit Hexadezimalzahlen angegeben. Die folgenden Codebeispiele zeigen alle Möglichkeiten, wie Sie mit dieser Syntax Rot, Grün, Blau und die Deckkraft angeben 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 Rot-, Grün- und Blaukanäle. Sie können einen Wert zwischen 0 und 255 oder einen Prozentsatz von 0 bis 100 angeben. Diese Syntax gab es schon, bevor in den Spezifikationen eine Syntaxnormalisierung enthalten war. Daher werden Sie in der Praxis sowohl Syntax mit als auch ohne Komma sehen. Künftig 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% / .5);

  --empty-channels: rgb(none none none);
}

HSL

HSL (Farbsättigung und Helligkeit) ist einer der ersten Farbräume, die sich an der menschlichen Sprache und Kommunikation orientieren. HSL (Farbsättigung und Helligkeit) bietet alle Farben des sRGB-Gamuts, ohne dass Ihr Gehirn wissen muss, wie Rot, Grün und Blau interagieren. Wie bei RGB wurden ursprünglich auch hier Kommas in der Syntax verwendet, aber in Zukunft sind sie 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-Farbraum, der auf die Beschreibung von Farben durch den Menschen ausgerichtet ist, ist HWB (Farbton, Weiß, Schwarz). Autoren können einen Farbton auswählen und Weiß oder Schwarz hinzufügen, um die gewünschte Farbe zu erhalten.

.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

Informiere dich über die neuen Farbräume, Syntaxen und Tools und erfahre, wie du zu HD-Farben migrierst.

Nicht-sRGB-Farbräume im Web befinden sich noch in der Anfangsphase, aber wir werden im Laufe der Zeit eine zunehmende Nutzung durch Designer und Entwickler sehen. Zu wissen, auf welchem Farbraum beispielsweise ein Designsystem erstellt werden soll, ist ein hervorragendes Tool für Creator. 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 nach Bedarf weitere hinzuzufügen.

Ressourcen

Weitere Artikel zu Farbton 5

• CSS-Syntax für relative Farben
• CSS-Farbmix

Weitere Lesematerialien finden Sie im Web:

• CSS Color Module Level 4 vom W3C

• CSS Color Module Level 5 vom W3C

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

• Besser als Lab? Farbraumreduzierung: CIE Lab und OKLab

• Für kräftigere Farben im Web

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

• Richtigere Farben in Chromium (PDF)

• LCH ist der beste Farbraum!

• Barrierefreie Farbsysteme entwerfen

• Farbräume, von Hannah Weller

• Wide Gamut Color in CSS with Display-P3

• CIE 1931-Farbraum

• Farbformate in CSS

• Farbräume von Bartosz Ciechanowski

und Tools:

• afc163.github.io/color3d/
• Gamut-Visualisierung
• Generator für kräftige Farbverläufe