Mehr Farben und neue Bereiche

Dieses Dokument ist Teil des High-Definition-CSS-Farbleitfadens.

CSS Color 4 stellt eine Reihe neuer Funktionen und Tools für CSS und Farbe. Der folgende Codepen zeigt alle neuen und alten Farbsyntaxen kombiniert:

Zusammenfassung der klassischen Farbräume

Die Spezifikation Level 4, die in Version 12 eingeführt wurde, neue Farbräume zum Suchen von Farben im Vergleich zu den sieben neuen Farbräumen, die zuvor vorgestellt wurden:

• sRGB – linear
• LCH
• okLCH
• LAB
• okLAB
• Display 3
• Rec2020
• A98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

Die neuen Web-Farbräume

Die folgenden Farbräume bieten Zugriff auf größere Farbräume als sRGB. Die Der Farbraum von Display-p3 bietet fast doppelt so viele Farben wie RGB, während Rec2020 im Vergleich zu Display-p3 fast doppelt so viele. Das sind viele Farben!

Die color()-Funktion

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Das neue color() kann für jeden Farbraum verwendet werden, der Farben mit R, G und B angibt. Kanäle. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerte für RGB und optional auch Alphawerte.

Sie werden feststellen, dass viele der neuen Farbräume diese Funktion verwenden, spezialisierten Funktionen wie rgb, srgb, hsl, hwb usw. ist es einfacher, den Farbraum als Parameter zu verwenden.

Vorteile

• Ein normalisierter Bereich für den Zugriff auf Farbräume, die RGB-Kanäle verwenden.
• Skaliert auf jeden RGB-basierten Farbraum mit großem Farbraum.

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);
}

Hinweis: Farben können in sRGB Gamut, Display P3 Gamut oder Rec2020 Gamut angegeben werden. Bis zu 77,6% des sichtbaren Spektrums.

sRGB über color()

Dieser Farbraum bietet dieselben Funktionen wie rgb(). Darüber hinaus bietet es Dezimalzahlen zwischen 0 und 1, die genau wie 0% bis 100 % verwendet werden.

Vorteile

• Fast alle Displays unterstützen den Bereich dieses Farbraums.
• Unterstützung für Designtools

Nachteile

• Nicht wahrnehmbar linear (wie das bei lch() der Fall ist)
• Keine breiten Farbskalafarben.
• Bei Farbverläufen verläuft 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);
}

Linear (sRGB) über color() {#linear-srgb}

Diese lineare Alternative zu RGB bietet eine vorhersehbare Kanalintensität.

Vorteile

• Direkter Zugriff auf RGB-Kanäle, praktisch für Spiel-Engines oder Lichtshows.

Nachteile

• Nicht wahrnehmbar linear.
• An den Rändern steht 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 ausführlich erläutert. aber schnell ist es sinnvoll, srgb und linear-srgb schwarz-weiß zu sehen, Farbverlauf verwenden, um deren Unterschiede zu veranschaulichen:

LCH

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

LCH führt eine Syntax für den Zugriff auf Farben außerhalb des RGB-Farbraums ein. Es ist auch das erste, das es sehr einfach macht, Farbe für ein Display. Das liegt daran, dass alle CIE-Raumfarben (lch, oklch, Lab, oklab) können für gesamtes vom Menschen sichtbares Farbspektrum.

Dieser Farbraum ist dem menschlichen Sehvermögen nachempfunden und bietet um diese und weitere Farben anzugeben. Die LCH-Kanäle sind „lightness“, Chroma und Farbton. Farbton ist ein Winkel, wie in HSL und HWB. Helligkeit ist ein Wert zwischen 0 und 100 liegt. Es ist eine spezielle „wahrnehmungslineare“ menschenzentriert Helligkeit. Das Chroma ist der Sättigung sehr ähnlich. kann sie zwischen 0 und 230 liegen, technisch unbegrenzt.

Vorteile

• Vorhersehbare Farbmanipulation, da sie größtenteils linear ist (siehe Oklch).
• Verwendet bekannte Kanäle.
• Häufig leuchtende Farbverläufe.

Nachteile

• Ganz einfach.
• In seltenen Fällen kann für den Farbverlauf ein Anpassungsmittelpunkt erforderlich sein, 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);
}

Achtung :Chroma kann es Autoren ermöglichen, die Grenzen eines Displays schnell zu überschreiten. Vorsicht mit hohen Farbwerten für C.

LAB

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Ein weiterer Farbraum, der für den Zugang zur CIE-Gamut entwickelt wurde, wieder mit einer L-Dimension (lineare Helligkeit). A und B im LAB stellen die eindeutigen Achsen von menschliches Farbsehen: Rot-Grün und Blau-Gelb. Wenn A einen positiven Wert erhält wird rot und grün hinzugefügt, wenn der Wert unter 0 liegt. Wenn B eine positive Zahl erhält wird Gelb hinzugefügt, während negative Werte in Richtung Blau gehen.

Vorteile

• Perzeptiv konsistente Farbverläufe
• High Dynamic Range.

Nachteile

• Potenzial für Farbtonverschiebung.
• Beim Lesen von Werten ist es schwierig, eine Farbe per Hand einzugeben oder 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

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15,4

Quelle

Dieser Farbraum ist Korrektur, um LCH. Wie LCH steht (L) weiterhin für wahrnehmend lineare Helligkeit, C für „Chroma“ und das H für einen Farbton.

Dieser Bereich fühlt sich vertraut an, wenn Sie HSL oder LCH. Wählen Sie im Farbrad einen Winkel für H, eine Helligkeits- oder den Dunkelwert, indem wir L anpassen, aber dann haben wir „Chroma“ statt „Sättigung“. Sie sind ziemlich identisch, nur dass eine Anpassung von Helligkeit und Chroma sind nur paarweise erhältlich oder es kann leicht sein, nach Farben mit hohem Farbton zu fragen, außerhalb eines Zielbereichs liegen.

Vorteile

• Keine Überraschungen, wenn Sie mit blauen und lila Tönen arbeiten.
• Perzeptabel lineare Helligkeit.
• Verwendet bekannte Kanäle.
• High Dynamic Range.
• Hat eine moderne Farbauswahl von Evil Martians

Nachteile

• Ganz einfach.
• 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);
}

Logo: OKLAB

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15,4

Quelle

Dieser Bereich ist Korrektur für LAB. Es handelt sich um einen für die Bildverarbeitungsqualität optimierten Bereich, der in CSS steht für Farbverläufe und Qualität der Manipulation von Farbfunktionen.

Vorteile

• Standardraum für Animationen und Interpolationen:
• Perzeptabel lineare Helligkeit.
• Keine Farbänderung wie bei LAB.
• Perzeptiv 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

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Hinweis:Farben befinden sich in der Display P3 Gamut. 45,5% des sichtbaren Spektrums aus.

Gamut und Farbraum für das Display 3 sind sehr beliebt, seit Apple dies unterstützt. seit 2015 auf ihrem iMac. Apple unterstützt Display-p3 auch seit 2016 über CSS auf Webseiten, fünf Jahren vor allen anderen Browsern. Im sRGB-Farbraum ist dies um mit der Bearbeitung zu beginnen, wenn Sie Stile in einen höheren Dynamikbereich verschieben.

Vorteile

• Hervorragende Unterstützung, die als Basis für HDR-Displays gilt.
• 50% mehr Farben als bei sRGB.
• Die Entwicklertools bieten eine hervorragende Farbauswahl.

Nachteile

• In Zukunft werden Rec2020- und CIE-Bereiche übertroffen werden.

.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

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Hinweis:Farben befinden sich in der Rec2020 Gamut. 77,6% des sichtbaren Spektrums.

Rec2020 ist Teil der Entwicklung hin zu UHDTV (Ultra-HD-Fernseher), eine große Farbpalette für 4K- und 8K-Medien. Rec2020 ist eine weitere RGB-basierter Gamut, größer als „display-p3“, aber nicht annähernd so üblich als Display-P3.

Vorteile

• Ultra-HD-Farben.

Nachteile

• Bei Verbrauchern (noch) nicht so häufig.
• Diese Geräte finden sich normalerweise nicht auf Handhelds oder Tablets.

.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}

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Hinweis:Farben befinden sich in der RGB 98 Gamut. 52,1% des sichtbaren Spektrums an.

Die Abkürzung für Adobe 1998 RGB, A98 RGB wurde von Adobe entwickelt und umfasst die meisten Farben mit CMYK-Druckern. Es bietet mehr Farben als sRGB, insbesondere in den Farbtönen Cyan und Grün.

Vorteile

• Größer als die Farbräume sRGB und Display P3.

Nachteile

• Es gibt keinen Gemeinschaftsbereich, in dem digitale Designschaffende arbeiten.
• Nur wenige Leute portieren Farbpaletten 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);
}

ProPhoto (RGB)

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Hinweis: Farben befinden sich in der ProPhoto Gamut. 90% des sichtbaren Spektrums aus.

Dieses von Kodak entworfene breite Spektrum bietet einzigartige Möglichkeiten, Farben und hat minimale Farbwechsel beim Ändern der Helligkeit. Sie deckt außerdem 100% der realen Oberflächenfarben wie 1980 von Michael Pointer dokumentiert.

Vorteile

• Der Farbton ändert sich bei Helligkeitsänderungen.
• Kräftige Primärfarben.

Nachteile

• Etwa 13% der angebotenen Farben sind Imaginär, was bedeutet, dass sie nicht innerhalb 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

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

Hinweis:Farben befinden sich in der HVS Gamut. 100% des menschlichen sichtbaren Spektrums (HVS).

Der CIE XYZ-Farbraum umfasst alle Farben, die für eine Person mit durchschnittliche Sehkraft. Deshalb wird es als Standardreferenz für andere Farben Leerzeichen. Y steht für die Leuchtdichte, X und Z sind mögliche Chroma innerhalb des Y-Werts. Luminanz.

Die Differenz zwischen d50 und d65 ist der Weißpunkt, wobei für d50 der Wert d50 Bei d65 kommt der d65-Weißpunkt zum Einsatz.

Schlüsselbegriff: Weißpunkt ist ein Attribut eines Farbraums. Damit wird echtes Weiß innerhalb des Raums. Für elektronische Bildschirme ist D65 und steht für 6.500 Kelvin. Farben sind wichtig Umrechnung, bei der Weißpunkte der Farbtemperatur (Wärme oder Kälte) entsprechen sind davon nicht betroffen.

Vorteile

• Der Zugriff auf lineares Licht bietet praktische Anwendungsfälle.
• Hervorragend zum Mischen einer physischen Farbe geeignet.

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 eine Pfad für das Unterrichten eines benutzerdefinierten Farbraums an den Browser. Dies ist ein ICC-Profil, das dem Browser mitteilt, um Farben aufzulösen.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Nach dem Laden können Sie mit der Funktion color() auf Farben aus diesem benutzerdefinierten Profil zugreifen und geben die Channel-Werte dafür an.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Farbinterpolation

Der Übergang von einer Farbe zur anderen findet sich in Animationen, Farbverläufen Farbmischung. Dieser Übergang wird in der Regel als Startfarbe und als Endfarbe, an der der Browser zwischen ihnen interpolieren soll. Interpolieren bedeutet in diesem Fall, eine Reihe von Farben zu generieren, und erstellen Sie einen weichen und weichen Übergang.

Bei einem Farbverlauf handelt es sich bei der Interpolation um eine Reihe von Farben entlang einer Form. Mit Animation ist 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;
}

Mit einem Farbverlauf werden die Farben dazwischen angezeigt:

Neuerungen bei der Farbinterpolation

Durch die neuen Gamut- und Farbräume gibt es neue zusätzliche Interpolationsoptionen. Farbe in hsl von Blau zu Weiß übergehen etwas ganz anderes als 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);
}

Was passiert, wenn Sie von einer Farbe in einem Raum zu einer Farbe in einem einem völlig anderen Raum:

.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%));
}

Zum Glück ist die Color 4 enthält eine Anleitung für Browser, wie diese Farbrauminterpolationen. Unter .gradient erkennen Browser die unterschiedlichen und verwende den Standardfarbraum oklab.

Sie denken vielleicht, dass der Browser lch als Farbraum verwenden würde, da dies die erste Farbe, aber nicht. Deshalb zeige ich einen zweiten Farbverlauf, .lch Der Farbverlauf .lch ist ein Farbverlauf aus dem Farbraum.

Weniger Streifenbildung dank 16-Bit-Farbe

Vor der Verwendung dieser Farbe wurden alle Farben in einer 32-Bit-Ganzzahl gespeichert, alle vier Channels repräsentieren; Rot, Grün, Blau und Alpha. Das sind 8 Bit pro und 2^ 24 mögliche Farben (ohne Alpha) dargestellt. 2 ^ 24 = 16.777.216, „Millionen von Farben“.

Nachdem die Farbe angepasst wurde, vier 16-Bit-Gleitkommawerte, hat jeder Kanal eine eigene Gleitkommazahl zu erstellen, anstatt zusammengefasst zu werden. Das sind insgesamt 64 Bits, und das Ergebnis sind viel mehr als Millionen Farben.

Dies ist für die Unterstützung von HD-Farben erforderlich. Dadurch wird die Farbe die gespeichert werden können. Das hat einen schönen Nebeneffekt: mehr Farben für den Farbverlauf im Browser verfügbar.

Farbverlauf bedeutet, dass nicht genügend Farben für einen weichen Farbverlauf vorhanden sind. und „Streifen“ sichtbar werden. Banding wird durch die auf Farben mit höherer Auflösung.

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

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

</ph> Quelle des Bilds

Interpolation steuern

Die kürzeste Entfernung zwischen zwei Punkten ist immer eine gerade Linie. Mit Farbe Interpolation verwenden, nehmen Browser standardmäßig die kurze Route. Stellen Sie sich ein Szenario vor. an dem es zwei Punkte in einem HSL-Farbzylinder gibt. Ein Farbverlauf erhält seine durch Bewegung entlang der Linie zwischen den beiden Punkten.

linear-gradient(to right, #94e99c, #e06242)

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

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

</ph> (Beispiel-Demo)
Draufsicht auf einen HSL-Zylinder mit einer Linie zwischen den farbigen Haltestellen

Der obige Farbverlauf verläuft gerade zwischen der grünlichen und der rötlichen Farbe Farbe durch die Mitte des Farbraums. Auch wenn die obigen Ausführungen um Ihnen den Einstieg zu erleichtern, ist es nicht genau das, was passiert. Hier sind die im folgenden Codepen, der in der Mitte eindeutig nicht weiß ist, die simulierte Demonstration gezeigt hat.

Der mittlere Bereich des Farbverlaufs hat jedoch seine Lebendigkeit verloren. Das liegt daran, die leuchtendsten Farben am Rand der Farbraumform und nicht in der in der sich die Interpolation bewegt hat. Dies wird allgemein als Zone ohne Benachrichtigungen. Es finden Sie einige Möglichkeiten, dieses Problem zu beheben.

Mehr Gradientenstopps angeben, um Zonen ohne Empfang zu vermeiden

Eine Technik, um solche Zonen zu vermeiden, besteht darin, zusätzliche Farbstopps in den Gradienten, die die Interpolation absichtlich so steuern, dass sie innerhalb des kräftige Bereiche eines Farbraums. Es handelt sich um ein Workaround, zusätzliche Haltestellen helfen, die Zonen ohne Empfang zu umgehen.

Erik Kennedy hat ein Farbverlaufstool entwickelt, mit dem zusätzliche Farben berechnet werden. damit Sie Zonen ohne Ende auch in Farbräumen vermeiden können, hingezogen werden. Übergeben Sie dieselben Farben aus dem ersten Beispiel. Wenn die Farbinterpolation jedoch in HSL geändert wird, wird Folgendes erzeugt:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

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

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

</ph> (Beispiel-Demo)
Draufsicht auf einen HSL-Zylinder mit einer geschwungenen Linie und 9 Farbstopps

Bei geführten Stopps erfolgt die Interpolation nicht mehr als gerade Linie, scheint sich um die Totzone herum zu krümmen, was dazu beiträgt, die Sättigung aufrechtzuerhalten, was zu Farbverlauf kräftiger.

Das Tool funktioniert zwar hervorragend, aber Sie könnten auch ähnliche oder größere direkt vom CSS aus?

Farbinterpolation steuern

In Farbe 4 ist es möglich, die Strategie Hue-Interpolation zu steuern. wurde hinzugefügt und bietet eine neue Möglichkeit, (:wink:) die tote Zone zu umgehen. Denken Sie an einen Farbton Winkel und ziehen Sie einen Farbverlauf von 2 Stopps in Betracht, der nur den Winkel ändert und einen Farbton aufweist. von 140deg nach 240deg verschoben werden.

Kürzere und längere Farbinterpolation

Standardmäßig wird für den Farbverlauf shorter-Weiterleitung, es sei denn damit das Ereignis longer Route. Farbton Interpolationsoptionen steuern die Winkeldrehung, sodass jemand zum Beispiel aufgefordert wird, links statt rechts (heh, Zoolander):

Im Beispiel der Farbinterpolationsabstände sind der Kurzpfad und langen Pfad simuliert, um den Unterschied zu veranschaulichen. Die kurze Strecke hat weniger Farbtöne zwischen ihm, da er die kürzeste Strecke zurücklegt. möglich, bei denen die große Entfernung über mehr Farbtöne zurückgelegt wurde.

Zunehmende und abnehmende Farbinterpolation

In Farbe 4 gibt es zwei weitere Farbinterpolationsstrategien, diese sind jedoch ausschließlich für zylindrische Farbräume. Bei den beiden Farben aus den vorherigen Beispielen, zeigt, wie das Erhöhen und Verringern funktioniert.

Im obigen Codepen wurde ColorJS verwendet, um das erwartete Ergebnisse. Die CSS-Elemente, die Sie schreiben würden, um den gleichen Effekt ohne JavaScript-Bibliothek wäre:

.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%)
  );
}

Um die Farbinterpolation zu beenden, können Sie Farbton zwischen zwei Farbstopps einstellen und die Auswirkungen einer Farbinterpolation als Beispiel und wie sich durch Farbräume die Ergebnisse des Farbverlaufs verändern. Die Auswirkungen können sehr different; sind das jetzt vier neue Tricks.

Farbverläufe in verschiedenen Farbräumen

Jeder Farbraum führt aufgrund seiner einzigartigen Form und Farbanordnung zu einem Farbverlauf ändern. In den folgenden Beispielen sehen Sie, wie jeder Farbraum anders als bei Blauweiß. Achten Sie darauf, wie viele in der Mitte lila werden; nennt sich Farbtonverschiebung während der Interpolation.

Einige Farbverläufe in diesen Bereichen sind kräftiger als andere oder die Verläufe sind geringer durch Zonen ohne Empfang. In Räumen wie lab werden Farben so zusammengefasst, dass die Sättigung optimiert ist, im Gegensatz zu Bereichen, die für Menschen optimiert sind, in denen Farben geschrieben werden können, wie hwb().

.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 ist zwar subtil, aber die Ergebnisse sind einheitlicher Interpolation mit Lab. Die Syntax des Labs ist nicht einfach zu lesen. negative Zahlen, die Ihnen bei der Verwendung von rgb oder hsl sehr unbekannt sind. Gut können wir hwb für eine bekannte Syntax verwenden. die vollständig in einem anderen Farbraum interpoliert werden, z. B. Oklab.

.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%));
}

In diesem Beispiel werden die gleichen Farben in hwb verwendet, aber der Farbraum für Interpolation in HWB oder Oklab. hwb eignet sich hervorragend für leuchtende, aber auch tot Zonen, aber leuchtende Flächen (sehen Sie sich den cyanfarbigen Hotspot in der Top-Beispiel). Oklab eignet sich hervorragend für wahrnehmungs lineare Farbverläufe, gesättigt sind. Diese Funktion macht wirklich Spaß, da Sie verschiedene Farben ausprobieren können um zu sehen, welcher Farbverlauf Ihnen am besten gefällt.

Hier ist ein Codepen, der mit Farbverläufen und Farbräumen experimentiert, passende Strategien zu finden. Sogar ein Übergang von Schwarz zu Weiß ist in jedem Farbraum anders!

Gamut-Clamping

Es gibt Szenarien, in denen eine Farbe etwas außerhalb eines Bereichs verlangt. Ziehen Sie die folgende Farbe in Betracht:

rgb(300 255 255)

Das Maximum für einen Farbkanal im Farbraum rgb ist 255, aber hier ist der Wert hier: Bei 300 wurde Rot angegeben. Was ändert sich? Gamut Clamping (Gamut Clamping).

Eine Einschränkung bedeutet, dass zusätzliche Informationen einfach entfernt werden. 300 wird zu 255 intern in der Farb-Engine. Die Farbe wurde nun in ihren Bereich gebunden.

Auswählen eines Farbraums

Viele Leute, die etwas über diese Farbräume und ihre Effekte erfahren haben, überfordert sind und wissen möchten, auswählen. Aus meinem Studium und Ich sehe keinen einzelnen Farbraum für alle meine Aufgaben. Jedes wenn sie zum gewünschten Ergebnis führen.

Wenn es einen geeigneten Raum gäbe, gäbe es nicht so viele neue Räume. vorgestellt.

Die CIE-Bereiche – lab, oklab, lch und oklch – sind jedoch meine Startpunkte. Wenn das Ergebnis nicht das ist, was ich erhofft habe, andere Gruppenbereiche testen. Was das Mischen von Farben und das Erstellen von Farbverläufen angeht, stimme ich den Standardspezifikation von oklab. Was Farbsysteme und UI-Farben insgesamt anbetrifft, oklch

Hier sind ein paar Artikel, in denen Nutzer ihre aktualisierte Farbe teilen. Strategien angesichts dieser neuen Farbräume und Funktionen. Beispiel: Andrey Sitnik ganz auf oklch gesetzt hat, werden sie Sie vielleicht auch dazu überreden, dasselbe zu tun:

1. OKLCH in CSS: Warum wir von RGB und HSL gewechselt sind Andrey Sitnik
2. Farbformate von Josh W. Comeau
3. OK, OKLCH von Chris Coyier

Nächste Schritte

Jetzt, da Sie mit den neuen Farbräumen und Tools vertraut sind, können Sie zu HD-Farben migrieren.

Mehr Dynamik, konsistente Manipulationen und Interpolationen und ein und Ihren Nutzern eine farbenfrohere User Experience bieten.

Weitere Informationen zu Farben aus der Übersicht.