<color-interpolation-method>

Syntax

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

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

Werte

<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>, der sich auf ein benutzerdefiniertes @color profile bezieht.

Formale Syntax

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

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

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

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

<custom-color-space> = 
  <dashed-ident>  

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

Beispiele

Vergleich von Interpolationsfarbräumen mit Gradienten

Das folgende Beispiel zeigt den Effekt der Verwendung 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

Farbinterpolation in sich wiederholenden Gradienten

Das folgende Beispiel zeigt, wie man einen Farbraum bei der Interpolation von Farben in sich wiederholenden Gradienten spezifiziert. Drei Boxen zeigen unterschiedliche Typen sich wiederholender Gradienten unter Verwendung der Funktionen repeating-conic-gradient(), repeating-linear-gradient() und repeating-radial-gradient(). Die erste Box verwendet den Lab-Farbraum zur Interpolation zwischen zwei Farbwerten. Die zweite und dritte Box verwenden OkLCh und bieten zusätzlich eine <hue-interpolation-method>, um festzulegen, 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 Gradienten dieselben zwei Farben verwendet, um die unterschiedlichen Effekte von <hue-interpolation-method> und Farbraum auf die Farbinterpolation in Gradienten 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 der Interpolation zwischen zwei Farben in unterschiedlichen Farbräumen. Der Vergleich der zweiten und dritten Box zeigt den Unterschied zwischen <hue-interpolation-method>s, wobei der lineare Gradient die kürzere Methode (Standard) und der radiale Gradient die längere Methode verwendet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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