<color-interpolation-method>

Der <color-interpolation-method> gibt an, ob die Interpolation einen rechteckigen Farbraum oder einen polaren Farbraum mit einer optionalen Farbton-Interpolationsmethode verwenden soll:

in <rectangular-color-space>
// or
in <polar-color-space>[ <hue-interpolation method>]

<rectangular-color-space>

Eines der Schlüsselwörter srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50 oder xyz-d65.

<polar-color-space>

Eines der Schlüsselwörter hsl, hwb, lch oder oklch.

<hue-interpolation-method> Optional

Der Algorithmus für die Farbtoninterpolation. Standardmäßig wird shorter hue verwendet.

<custom-color-space>

Ein <dashed-ident>, das auf ein benutzerdefiniertes @color profile verweist.

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  <xyz-space>   

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Das folgende Beispiel zeigt die Auswirkungen der Verwendung verschiedener Interpolationsfarbräume für linear-gradient().

HTML

<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (with <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></div>

CSS

.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}

Ergebnis

Das folgende Beispiel zeigt, wie ein Farbraum spezifiziert wird, wenn Farben in wiederholenden Gradienten interpoliert werden. Drei Boxen zeigen verschiedene Typen von wiederholenden Gradienten, die die Funktionen repeating-conic-gradient(), repeating-linear-gradient() und repeating-radial-gradient() verwenden. Die erste Box verwendet den Lab-Farbraum zur Interpolation zwischen zwei Farbwerten. Die zweite und dritte Box verwenden Oklch und geben zusätzlich eine <hue-interpolation-method> an, um zu spezifizieren, wie zwischen den Farbtonwerten interpoliert werden soll.

HTML

<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</div>

CSS

Wir haben dieselben zwei Farben in jedem Verlauf verwendet, um die unterschiedlichen Effekte von <hue-interpolation-method> und Farbraum auf die Farbinterpolation in Verläufen zu demonstrieren.

.gradient {
  height: 200px;
  width: 200px;
  display: inline-block;
  font-family: monospace;
  margin: 10px;
  font-size: 16px;
}

.conic {
  background-image: repeating-conic-gradient(
    in lab,
    burlywood,
    blueviolet 120deg
  );
}

.linear {
  background-image: repeating-linear-gradient(
    in oklch,
    burlywood,
    blueviolet 75px
  );
}

.radial {
  background-image: repeating-radial-gradient(
    in oklch longer hue,
    blueviolet 50px,
    burlywood 100px
  );
}

Ergebnis

Der Vergleich der ersten und zweiten Box zeigt den Unterschied, wie zwischen zwei Farben in verschiedenen Farbräumen interpoliert wird. Der Vergleich der zweiten und dritten Box zeigt den Unterschied zwischen <hue-interpolation-method>s, wobei der lineare Verlauf die kürzere Methode (Standard) und der radiale Verlauf die längere Methode verwendet.

• <color>, <gradient>
• <hue-interpolation-method>