<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 ist dies shorter hue.

<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           |
  xyz-d50       |
  xyz-d65       

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

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

Das folgende Beispiel zeigt die Wirkung der Nutzung unterschiedlicher 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 man einen Farbraum angibt, wenn man Farben in sich wiederholenden Verläufen interpoliert. Drei Kästen zeigen verschiedene Typen von sich wiederholenden Verläufen mit den Funktionen repeating-conic-gradient(), repeating-linear-gradient(), und repeating-radial-gradient(). Der erste Kasten verwendet den Lab-Farbraum, um zwischen zwei Farbwerten zu interpolieren. Die zweiten und dritten Kästen verwenden Oklch und geben zusätzlich eine <hue-interpolation-method> an, um zu spezifizieren, wie zwischen 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 in jedem Verlauf die gleichen zwei Farben 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 des ersten und zweiten Kastens zeigt den Unterschied bei der Interpolation zwischen zwei Farben in unterschiedlichen Farbräumen. Der Vergleich des zweiten und dritten Kastens 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>