CSS hue-rotate() — зсув відтінку кольорів

HTML

<div id="description">
  <h2>Приклад 1</h2>
  <p>Наведіть курсор на квадрат, щоб побачити ефект функції hue-rotate().</p>
</div>

<div id="result">
  <div class="square"></div>
</div>

CSS

#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

.square {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  transition: filter 0.5s ease;
}

.square:hover {
  filter: hue-rotate(90deg);
}

HTML

<div id="description">
  <h2>Приклад 2</h2>
  <p>Три картинки з різними значеннями функції hue-rotate().</p>
</div>

<div id="result">
  <div class="image-container">
    <img class="image image0" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 1">
    <p class="value">hue-rotate(30deg)</p>
  </div>
  <div class="image-container">
    <img class="image image1" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 2">
    <p class="value">hue-rotate(180deg)</p>
  </div>
  <div class="image-container">
    <img class="image image2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 3">
    <p class="value">hue-rotate(270deg)</p>
  </div>
</div>

CSS

#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

.image-container {
  display: inline-block;
  text-align: center;
  margin-right: 20px;
}

.image {
  width: 200px;
  height: 200px;
}

.value {
  margin-top: 10px;
  font-family: Arial, sans-serif;
}

.image0 {
  filter: hue-rotate(30deg);
}

.image1 {
  filter: hue-rotate(180deg);
}

.image2 {
  filter: hue-rotate(270deg);
}

HTML

<p class="head">Той самий блок, різні кути:</p>
<div class="row">
    <div class="card h0">0deg</div>
    <div class="card h1">60deg</div>
    <div class="card h2">120deg</div>
    <div class="card h3">180deg</div>
    <div class="card h4">240deg</div>
    <div class="card h5">300deg</div>
    <div class="card h6">360deg</div>
</div>

<p class="head">Чистий червоний після hue-rotate(90deg) — темно-зелений, а не #00ff00:</p>
<div class="row">
    <div class="red">#ff0000</div>
    <div class="red rot">+ hue-rotate(90deg)</div>
    <div class="green">#00ff00 для порівняння</div>
</div>

<p class="head">Сірому крутити нічого; після grayscale() поворот теж марний:</p>
<div class="row">
    <div class="gray">сірий, без фільтра</div>
    <div class="gray rot120">сірий + hue-rotate(120deg)</div>
    <div class="card gs">grayscale(1) hue-rotate(120deg)</div>
    <div class="card sg">hue-rotate(120deg) grayscale(1)</div>
</div>

<p class="head">Без одиниці — увесь список фільтрів відкинуто:</p>
<div class="row">
    <div class="card broken">hue-rotate(90) brightness(2)</div>
</div>

CSS

.head {
    margin: 18px 0 6px;
    color: #5a6472;
    font-size: .9em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card,
.red,
.green,
.gray {
    display: flex;
    align-items: flex-end;
    width: 108px;
    height: 72px;
    padding: 6px;
    background: linear-gradient(135deg, #f2b134, #c0392b 60%, #2f6fd0);
    color: #fff;
    font: 600 11px/1.25 ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.h0 { filter: hue-rotate(0deg); }
.h1 { filter: hue-rotate(60deg); }
.h2 { filter: hue-rotate(120deg); }
.h3 { filter: hue-rotate(180deg); }
.h4 { filter: hue-rotate(240deg); }
.h5 { filter: hue-rotate(300deg); }
.h6 { filter: hue-rotate(360deg); }

.red { background: #ff0000; }
.green { background: #00ff00; color: #222; text-shadow: none; }
.gray { background: #808080; }

.rot { filter: hue-rotate(90deg); }
.rot120 { filter: hue-rotate(120deg); }

.gs { filter: grayscale(1) hue-rotate(120deg); }
.sg { filter: hue-rotate(120deg) grayscale(1); }

.broken {
    filter: hue-rotate(90) brightness(2);
    outline: 2px dashed #d64545;
}