`<hue-interpolation-method>` — тип CSS

Тип данных <hue-interpolation-method> в CSS представляет алгоритм интерполяции между значениями <hue>. Метод интерполяции определяет, как найти промежуточное значение между двумя значениями оттенка на основе цветового круга. Он используется как компонент типа данных <color-interpolation-method>.

При интерполяции значений <hue> по умолчанию используется алгоритм интерполяции оттенка shorter.

Синтаксис

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

shorter hue
longer hue
increasing hue
decreasing hue

Значения

Любая пара углов оттенка соответствует двум радиусам на цветовом круге, которые делят окружность на две возможные дуги интерполяции. Обе дуги начинаются у первого радиуса и заканчиваются у второго, но одна проходит по часовой стрелке, а другая — против часовой стрелки.

Для пары углов оттенка θ1 и θ2, нормализованных в диапазон [0deg, 360deg), существует четыре алгоритма, определяющих, какая дуга используется при интерполяции от θ1 до θ2:

shorter

Используется более короткая дуга. Если два радиуса совпадают, дуга вырождается в точку. Если обе дуги имеют одинаковую длину:

• если θ1 < θ2, используется дуга по часовой стрелке;
• если θ1 > θ2, используется дуга против часовой стрелки.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

longer

Используется более длинная дуга. Если два радиуса совпадают:

• если θ1 ≤ θ2, дуга становится полной окружностью с направлением по часовой стрелке.
• если θ1 > θ2, дуга становится полной окружностью с направлением против часовой стрелки.

Если обе дуги имеют одинаковую длину:

• если θ1 < θ2, используется дуга по часовой стрелке;
• если θ1 > θ2, используется дуга против часовой стрелки.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

increasing

Используется дуга по часовой стрелке. Если два радиуса совпадают, дуга вырождается в точку.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

decreasing

Используется дуга против часовой стрелки. Если два радиуса совпадают, дуга вырождается в точку.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

Поскольку на выбор есть только две дуги, при определённых условиях эти алгоритмы попарно эквивалентны. В частности:

• если 0deg < θ2 - θ1 < 180deg или θ2 - θ1 < -180deg, shorter и increasing эквивалентны, а longer и decreasing эквивалентны.
• если -180deg < θ2 - θ1 < 0deg или θ2 - θ1 > 180deg, shorter и decreasing эквивалентны, а longer и increasing эквивалентны.

Примечательная особенность increasing и decreasing заключается в том, что при переходе или анимации, когда разница между углами оттенка проходит через 180deg, дуга не переключается на другую сторону, как это происходит с shorter и longer.

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

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

Примеры

Сравнение алгоритмов интерполяции оттенка

В следующем примере показан эффект использования разных алгоритмов интерполяции оттенка в linear-gradient().

HTML

<div class="hsl">
  <p>HSL</p>
</div>
<div class="hsl-increasing">
  <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
  <p>HSL decreasing</p>
</div>
<div class="hsl-shorter">
  <p>HSL shorter</p>
</div>
<div class="hsl-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL named</p>
</div>
<div class="hsl-named-longer">
  <p>HSL named (longer)</p>
</div>

CSS

div {
  border: 1px solid black;
  height: 50px;
  margin: 10px;
  width: 90%;
}
p {
  color: white;
  margin: 6px;
}

/* Fallback styles */
.hsl,
.hsl-shorter,
.hsl-named {
  background: linear-gradient(
    to right,
    hsl(39 100% 50%),
    hsl(46 100% 50%),
    hsl(53 100% 50%),
    hsl(60 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right,
    hsl(190 100% 50%),
    hsl(225 100% 50%),
    hsl(260 100% 50%),
    hsl(295 100% 50%),
    hsl(330 100% 50%),
    hsl(365 100% 50%),
    hsl(400 100% 50%),
    hsl(435 100% 50%),
    hsl(470 100% 50%),
    hsl(505 100% 50%),
    hsl(540 100% 50%)
  );
}
.hsl-decreasing,
.hsl-longer,
.hsl-named-longer {
  background: linear-gradient(
    to right,
    hsl(399 100% 50%),
    hsl(368 100% 50%),
    hsl(337 100% 50%),
    hsl(307 100% 50%),
    hsl(276 100% 50%),
    hsl(245 100% 50%),
    hsl(214 100% 50%),
    hsl(183 100% 50%),
    hsl(152 100% 50%),
    hsl(122 100% 50%),
    hsl(91 100% 50%),
    hsl(60 100% 50%)
  );
}

.hsl {
  background: linear-gradient(
    to right in hsl,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right in hsl increasing hue,
    hsl(190deg 100% 50%),
    hsl(180deg 100% 50%)
  );
}
.hsl-decreasing {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-shorter {
  background: linear-gradient(
    to right in hsl shorter hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-named {
  background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

Результат

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

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

См. также

• <color-interpolation-method>
• Тип данных <hue>