<color-interpolation-method> CSS-Typ

Syntax

<color-interpolation-method> legt fest, ob für die Interpolation ein rechteckiger Farbraum oder ein polarer Farbraum mit einer optionalen Methode zur Farbtoninterpolation verwendet wird:

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

<custom-color-space>

Ein <dashed-ident>, das auf ein benutzerdefiniertes @color-Profil 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

Interpolationsfarbräume anhand von Farbverläufen vergleichen

Das folgende Beispiel zeigt, wie sich unterschiedliche Interpolationsfarbräume auf linear-gradient() auswirken.

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

Das folgende Beispiel zeigt, wie Sie einen Farbraum für die Interpolation von Farben in sich wiederholenden Farbverläufen angeben. Drei Felder zeigen unterschiedliche Arten sich wiederholender Farbverläufe mit den Funktionen repeating-conic-gradient(), repeating-linear-gradient() und repeating-radial-gradient(). Das erste Feld verwendet den Lab-Farbraum, um zwischen zwei Farbwerten zu interpolieren. Das zweite und dritte Feld verwenden OkLCh und geben zusätzlich eine <hue-interpolation-method> an, um festzulegen, wie zwischen Farbtonwerten interpoliert wird.

HTML

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

CSS

Wir haben in jedem Farbverlauf dieselben zwei Farben verwendet, um die unterschiedlichen Auswirkungen von <hue-interpolation-method> und Farbraum auf die Farbinterpolation in Farbverläufen zu veranschaulichen.

.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

Ein Vergleich des ersten und zweiten Feldes verdeutlicht den Unterschied zwischen der Interpolation zweier Farben in unterschiedlichen Farbräumen. Ein Vergleich des zweiten und dritten Feldes zeigt den Unterschied zwischen den <hue-interpolation-method>-Methoden: Der lineare Farbverlauf verwendet die kürzere Methode (Standard), der radiale Farbverlauf die längere Methode.

Spezifikationen

Browser-Kompatibilität

css.types.color.color-mix

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

Siehe auch

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