<color-interpolation-method>

Syntax

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>]

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 zur Farbtoninterpolation. Standardmäßig shorter hue.

<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>? ]  

<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  

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

Beispiele

Vergleich von Interpolationsfarbräumen mittels Gradienten

Das folgende Beispiel zeigt die Wirkung 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 ein Farbraum angegeben wird, wenn Farben in sich wiederholenden Gradienten interpoliert werden. Drei Kästen zeigen verschiedene Arten von sich wiederholenden Gradienten mit den Funktionen repeating-conic-gradient(), repeating-linear-gradient() und repeating-radial-gradient(). Der erste Kasten nutzt den Lab-Farbraum zur Interpolation zwischen zwei Farbwerten. Der zweite und dritte Kasten verwenden OkLCh und geben zusätzlich eine <hue-interpolation-method> an, um festzulegen, 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 beiden Farben in jedem Gradient 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 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 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>