Тип CSS `<color-interpolation-method>`

<color-interpolation-method> — это CSS-тип данных, представляющий цветовое пространство, используемое для интерполяции между значениями color. Его можно использовать для переопределения цветового пространства интерполяции по умолчанию в функциональных обозначениях, связанных с цветом, таких как color-mix() и linear-gradient().

При интерполяции значений <color> по умолчанию используется цветовое пространство интерполяции Oklab.

Синтаксис

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

Формальный синтаксис

<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 |
  xyz-d50 |
  xyz-d65

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

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

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

Примеры

Сравнение цветовых пространств интерполяции с помощью градиентов

В следующем примере показан эффект использования разных цветовых пространств интерполяции для 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> и цветовое пространство влияют на интерполяцию цветов в градиентах.

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

Результат

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

Спецификации

Совместимость с браузерами

См. также

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