hue-rotate()

Die hue-rotate() CSS Funktion rotiert den Farbton eines Elements und dessen Inhalts. Ihr Ergebnis ist eine <filter-function>.

Note: hue-rotate() wird als Matrixoperation auf der RGB-Farbe spezifiziert. Sie konvertiert die Farbe nicht tatsächlich in das HSL-Modell, was ein nicht-lineare Operation ist. Daher könnte sie die Sättigung oder Helligkeit der Originalfarbe nicht beibehalten, insbesondere bei gesättigten Farben.

Syntax

Die hue-rotate() Funktion wendet eine Farbrotation auf die Elemente an, auf die sie angewendet wird.

css

hue-rotate(angle)

Werte

angle: Die relative Änderung des Farbtons der Eingabestichprobe, angegeben als <angle>. Ein Wert von 0deg lässt die Eingabe unverändert. Eine positive Farbtonrotation erhöht den Farbtonwert, während eine negative Rotation den Farbtonwert verringert. Der Ausgangswert für Interpolation ist 0. Es gibt keinen Mindest- oder Höchstwert. Die Wirkung von Werten über 360deg ist, dass hue-rotate(Ndeg) zu N Modulo 360 berechnet wird.

Der <angle> CSS-Datentyp repräsentiert einen Winkelwert, der in Grad, Graden, Radianten oder Umdrehungen ausgedrückt wird. Die folgenden sind gleichwertig:

css

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

Formale Syntax

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

Beispiele

Mit der backdrop-filter Eigenschaft

Dieses Beispiel wendet einen hue-rotate() Filter über die backdrop-filter CSS-Eigenschaft auf den Absatz an und verändert den Farbton des Bereichs hinter dem <p>.

css

.container {
  background: url(image.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: #ffffff;
  font-size: 2rem;
  font-family: sans-serif;
}

<div
  class="container"
  style="background-image: url('https://mdn.github.io/shared-assets/images/examples/listen_to_black_women.jpg');">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Mit der filter Eigenschaft

Dieses Beispiel wendet einen hue-rotate() Filter über die filter CSS-Eigenschaft an und fügt die Farbveränderung auf das gesamte Element ein, einschließlich Inhalt, Rahmen und Hintergrundbild.

css

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>

Mit url() und dem SVG hue-rotate Filter

Das SVG-Element <filter> wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann durch id referenziert werden können. Der <filter> <feColorMatrix> Primitive hueRotate Typ bietet denselben Effekt. Angesichts des Folgenden:

svg

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

Diese Werte produzieren dieselben Ergebnisse:

css

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

Dieses Beispiel zeigt drei Bilder: das Bild mit einer hue-rotate() Filterfunktion angewendet, das Bild mit einem gleichwertigen url() Filter, und die Originalbilder zum Vergleich:

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>hue-rotate()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          style="filter: hue-rotate(90deg)"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <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>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url(#hue-rotate)"
            width="220"
            height="220" />
        </svg>
      </td>

      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

hue-rotate() bewahrt nicht Sättigung oder Helligkeit

Das Diagramm unten vergleicht zwei Farbverläufe, die mit Rot beginnen: der erste wird mit hue-rotate() erstellt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der hue-rotate() Verlauf offensichtliche Unterschiede in Sättigung und Helligkeit in der Mitte zeigt.

html

<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);
}

Spezifikationen

Specification
Filter Effects Module Level 1 # funcdef-filter-hue-rotate

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS-Filtereffekte Modul
Die anderen <filter-function> Funktionen, die in Werten der filter und backdrop-filter Eigenschaften verwendet werden können, umfassen: