<color-interpolation-method>

Syntax

Der <color-interpolation-method> gibt an, ob die Interpolation einen rechteckigen Farbraum oder einen polaren Farbraum mit einer optionalen Farbton-Interpolation 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 Farbton-Interpolation. Standardmäßig wird der shorter hue verwendet.

<custom-color-space>

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

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 Verläufen

Das folgende Beispiel zeigt die Wirkung 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

Farbinterpolation in sich wiederholenden Verläufen

Das folgende Beispiel zeigt, wie ein Farbraum bei der Interpolation von Farben in sich wiederholenden Verläufen angegeben wird. Drei Boxen zeigen verschiedene Arten von sich wiederholenden Verläufen mithilfe der Funktionen repeating-conic-gradient(), repeating-linear-gradient() und repeating-radial-gradient(). Die erste Box verwendet den Lab-Farbraum, um zwischen zwei Farbwerten zu interpolieren. Die zweite und dritte Box verwenden OkLCh und geben zusätzlich eine <hue-interpolation-method> an, um zu spezifizieren, wie die Farbtonwerte interpoliert werden sollen.

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 dieselben zwei Farben verwendet, um die unterschiedlichen Effekte der <hue-interpolation-method> und des Farbraums 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 zwischen der Interpolation von zwei Farben in unterschiedlichen Farbräumen. 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.

Spezifikationen

Browser-Kompatibilität

css.types.color.color-mix

css.types.color.color.display-p3-linear

Siehe auch

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