hue-rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

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

Note: hue-rotate() wird als Matrixoperation auf der RGB-Farbe spezifiziert. Es konvertiert die Farbe nicht wirklich in das HSL-Modell, welches eine nicht-lineare Operation darstellt. Daher kann es sein, dass es die Sättigung oder Helligkeit der ursprünglichen Farbe nicht beibehält, insbesondere bei gesättigten Farben.

Probieren Sie es aus

Syntax

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

css
hue-rotate(angle)

Werte

angle

Die relative Veränderung des Farbtons der Eingabeprobe, 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 Anfangswert für Interpolation ist 0. Es gibt keinen Mindest- oder Höchstwert. Die Wirkung von Werten über 360deg entspricht N modulo 360 bei hue-rotate(Ndeg).

Der <angle> CSS-Datentyp steht für einen Winkelwert, der in Grad, Gon, Radianten oder Umdrehungen ausgedrückt wird. Die folgenden Werte sind äquivalent:

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 Eigenschaft backdrop-filter

Dieses Beispiel wendet einen hue-rotate() Filter über die CSS-Eigenschaft backdrop-filter auf den Absatz an, um die Farbe des Bereichs hinter dem <p> zu ändern.

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

Mit der Eigenschaft filter

Dieses Beispiel wendet einen hue-rotate() Filter über die CSS-Eigenschaft filter an, wobei die Farbverschiebung auf das gesamte Element einschließlich Inhalt, Rahmen und Hintergrundbild angewendet wird.

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

Mit url() und dem SVG-Farbtonrotationsfilter

Das SVG <filter>-Element wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann über id referenziert werden können. Der <filter>-<feColorMatrix> Primitive hueRotate-Typ bietet den gleichen Effekt. Angenommen, Sie haben Folgendes:

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

Diese Werte erzeugen die gleichen 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 äquivalenten url() Filter angewendet und die Originalbilder zum Vergleich:

hue-rotate() erhält nicht Sättigung oder Helligkeit

Das untenstehende Diagramm vergleicht zwei Farbverläufe, die mit Rot beginnen: Der erste wird mit hue-rotate() generiert, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der hue-rotate() Verlauf deutliche 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>
js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hue-rotate()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch