<color-interpolation-method>

Тип даних CSS <color-interpolation-method> (метод інтерполяції кольору) представляє колірний простір, що вживається для інтерполяції між значеннями <color>. Він може використовуватися для перевизначення усталеного колірного простору інтерполяції для функційних записів, пов'язаних з кольором, наприклад, color-mix() і linear-gradient().

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

Синтаксис

Тип <color-interpolation-method> задає те, чи слід використовувати прямокутний колірний простір, чи полярний колірний простір з необов'язковим методом інтерполяції відтінку:

in <rectangular-color-space>
// або
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.

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

Приклади

Порівняння колірних просторів інтерполяції за допомогою градієнтів

Наступний приклад демонструє ефект використання різних колірних просторів інтерполяції для linear-gradient().

HTML

<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (з <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">конічний</div>
<div class="gradient linear">лінійний</div>
<div class="gradient 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
  );
}

Результат

Коли порівняти першу та другу рамки, видно різницю інтерполювання між двома кольорами в різних колірних просторах. Коли порівняти другу та третю рамки, видно різницю між різними значеннями [``](/uk/docs/Web/CSS/hue-interpolation-method), а саме – лінійний градієнт користується коротшим методом (усталеним), а радіальний – довшим.

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

Специфікація
CSS Color Module Level 5 (CSS Color 5) # color-mix
CSS Color Module Level 4 (CSS Color 4) # interpolation-space

Сумісність із браузерами

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
color-mix() Експериментальне	Chrome No support Ні	Edge No support Ні	Firefox Full support 88 disabled	Internet Explorer No support Ні	Opera No support Ні	Safari Full support 15 disabled	WebView Android No support Ні	Chrome Android No support Ні	Firefox for Android No support Ні	Opera Android No support Ні	Safari on iOS Full support 15 disabled	Samsung Internet No support Ні

Дивіться також

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