hue-rotate()

Функция hue-rotate() применяет вращение цвета к элементам, к которым она применяется.

hue-rotate(angle)

angle

Относительное изменение оттенка входного образца, указанное как <angle>. Значение 0deg оставляет входные данные без изменений. Положительное вращение оттенка увеличивает значение оттенка, а отрицательное — уменьшает. Начальное значение для интерполяции составляет 0. Минимального и максимального значений нет. Эффект значений выше 360deg при hue-rotate(Ndeg), оценивается как N по модулю 360.

Тип данных CSS <angle> представляет значение угла, выраженное в градусах, градах, радианах или оборотах. Следующие значения эквивалентны:

hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

В этом примере применяется фильтр hue-rotate() через свойство CSS backdrop-filter к абзацу, смещая цвет в области за <p>.

.container {
  background: url(image.jpg) no-repeat left / contain #011296;
}
p {
  backdrop-filter: hue-rotate(240deg);
  text-shadow: 2px 2px #011296;
}

В этом примере применяется фильтр hue-rotate() через свойство CSS filter, добавляя сдвиг цвета ко всему элементу, включая содержимое, границу и фоновое изображение.

p {
  filter: hue-rotate(-60deg);
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: goldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
}

Элемент SVG <filter> используется для определения пользовательских эффектов фильтра, которые затем могут быть использованы с помощью id. Примитив <feColorMatrix> фильтра <filter> с типом hueRotate обеспечивает тот же эффект. При следующих значениях:

<filter id="filterID">
  <feColorMatrix type="hueRotate" values="90" />
</filter>

Эти значения дают те же результаты:

filter: hue-rotate(90deg); /* 90deg rotation */
filter: url(#filterID); /* with embedded SVG */
filter: url(folder/fileName.svg#filterID); /* external svg filter definition */

В этом примере показаны три изображения: изображение с применённой функцией фильтра hue-rotate(), изображение с применённым эквивалентным фильтром url(), и оригинальные изображения для сравнения:

На диаграмме ниже сравниваются два градиента цвета, начинающиеся с красного: первый генерируется с помощью hue-rotate(), а второй — с фактическими значениями HSL. Обратите внимание, как градиент hue-rotate() показывает очевидные различия в насыщенности и светлоте посередине.

<div>
  <p>Using <code>hue-rotate()</code></p>
  <div id="hue-rotate"></div>
</div>
<div>
  <p>Using <code>hsl()</code></p>
  <div id="hsl"></div>
</div>

const hueRotate = document.getElementById("hue-rotate");
const hsl = document.getElementById("hsl");

for (let i = 0; i < 360; i++) {
  const div1 = document.createElement("div");
  div1.style.backgroundColor = `hsl(${i}, 100%, 50%)`;
  hsl.appendChild(div1);

  const div2 = document.createElement("div");
  div2.style.backgroundColor = "red";
  div2.style.filter = `hue-rotate(${i}deg)`;
  hueRotate.appendChild(div2);
}

• Модуль CSS эффектов фильтра
• Другие <filter-function> функции, доступные для использования в значениях свойств filter и backdrop-filter включают:
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • invert()
  • opacity()
  • saturate()
  • sepia()