CSS-функция `hue-rotate()`

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

Попробуйте

filter: hue-rotate(0);

filter: hue-rotate(90deg);

filter: hue-rotate(-0.25turn);

filter: hue-rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Синтаксис

hue-rotate(angle)

Значения

angle Необязательно

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

Тип данных 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> ]? )

Примеры

Свойство backdrop-filter

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

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

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: white;
  font-size: 2rem;
  font-family: sans-serif;
}

<div class="container">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Свойство filter

В этом примере к элементу применяется фильтр 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;
}

p {
  padding: 0.5rem;
  font-size: 2rem;
  font-family: sans-serif;
  width: 85vw;
}

<p>The person who wrote this example is not a designer, fortunately.</p>

url() и фильтр SVG hue-rotate

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

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 220 220"
  color-interpolation-filters="sRGB"
  height="220"
  width="220">
  <filter id="hue-rotate">
    <feColorMatrix type="hueRotate" values="90" />
  </filter>
</svg>

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

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

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

<table>
  <thead>
    <tr>
      <th><code>hue-rotate()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

.css-filter {
  filter: hue-rotate(90deg);
}
.svg-filter {
  filter: url("#hue-rotate");
}

th,
td {
  padding: 5px;
}
svg:not(:root) {
  display: none;
}

hue-rotate() не сохраняет насыщенность или светлоту

На диаграмме ниже сравниваются два цветовых градиента, начинающихся с красного: первый создан с помощью 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>

#hue-rotate,
#hsl {
  display: flex;
  margin: 1em 0;
}

#hue-rotate div,
#hsl div {
  width: 2px;
  height: 100px;
}

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()