<hue-interpolation-method>

Значение <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

.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> тип данных