<color-interpolation-method>

<color-interpolation-method> определяет, использовать ли прямоугольное цветовое пространство или полярное цветовое пространство с необязательным методом интерполяции оттенка:

in <rectangular-color-space>
// or
in <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 hue.

<custom-color-space>

<dashed-ident> ссылаясь на пользовательское @профиль цвета.

<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  

Следующий пример показывает влияние использования различных цветовых пространств интерполяции для 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);
}

Результат

Следующий пример показывает, как указать цветовое пространство при интерполяции цветов в повторяющихся градиентах. Три блока демонстрируют различные типы повторяющихся градиентов, использующих функции repeating-conic-gradient(), repeating-linear-gradient() и repeating-radial-gradient(). Первый блок использует цветовое пространство Lab для интерполяции между двумя значениями цвета. Второй и третий блоки используют Oklch и дополнительно предоставляют <hue-interpolation-method> для указания способа интерполяции значений оттенка.

HTML

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

CSS

Мы использовали одни и те же два цвета в каждом градиенте, чтобы продемонстрировать различные эффекты <hue-interpolation-method> и цветового пространства на интерполяцию цвета в градиентах.

.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
  );
}

Результат

Сравнение первого и второго блоков демонстрирует разницу в интерполяции между двумя цветами в разных цветовых пространствах. Сравнение второго и третьего блоков показывает разницу между <hue-interpolation-method>, где линейный градиент использует более короткий метод (по умолчанию), а радиальный градиент — более длинный метод.

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