`hue-rotate()`-CSS-Funktion

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion hue-rotate() dreht den Farbton eines Elements und seines Inhalts. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

Hinweis: hue-rotate() ist als Matrixoperation auf RGB-Farben definiert. Die Farbe wird dabei nicht tatsächlich in das HSL-Modell umgewandelt, da dies eine nichtlineare Operation wäre. Daher bleiben Sättigung und Helligkeit der ursprünglichen Farbe möglicherweise nicht erhalten, insbesondere bei stark gesättigten Farben.

Probieren Sie es aus

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>

Syntax

css

/* No rotation */
hue-rotate()
hue-rotate(0deg)

/* Half-turn rotation */
hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)

Parameter

<angle> Optional: Gibt die relative Änderung des Farbtons der Eingabe an. Der Wert 0deg lässt die Eingabe unverändert. Eine positive Farbtondrehung erhöht den Farbtonwert, eine negative verringert ihn. Der Anfangswert für die Interpolation ist 0. Es gibt weder einen Mindest- noch einen Höchstwert. Bei hue-rotate(Ndeg) entspricht der Effekt N modulo 360. Der Standardwert ist 0deg.

Rückgabewert

Ein <filter-function>-Wert.

Formale Syntax

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

Beispiele

Mit der Eigenschaft backdrop-filter

Dieses Beispiel wendet über die CSS-Eigenschaft backdrop-filter einen hue-rotate()-Filter auf den Absatz an. Dadurch verschieben sich die Farben im Bereich hinter dem <p>.

css

.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>

Mit der Eigenschaft filter

Dieses Beispiel wendet über die CSS-Eigenschaft filter einen hue-rotate()-Filter auf das gesamte Element an. Die Farbverschiebung betrifft damit auch den Inhalt, den Rahmen und das 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>

Verwendung des SVG-Filters

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter hue-rotate()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Auch das SVG-Filterelement <feColorMatrix> kann den Farbton von Inhalten drehen. Dazu setzen wir type auf hueRotate und values auf den Winkel in Grad. Anschließend können wir über die ID des <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="hue-rotate90" color-interpolation-filters="sRGB">
    <feColorMatrix type="hueRotate" values="90" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

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

CSS

Wir fügen CSS hinzu, das den Farbton von Elementen abhängig von ihrer Klasse css-filter oder svg-filter dreht:

css

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

.svg-filter {
  filter: url("#hue-rotate90");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>hue-rotate()</code> filter</th>
      <th>SVG filter equivalent</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" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </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() erhält Sättigung und Helligkeit nicht

Das folgende Diagramm vergleicht zwei Farbverläufe, die mit Rot beginnen: Der erste wird mit hue-rotate() erzeugt, der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, dass der mit hue-rotate() erzeugte Verlauf in der Mitte deutliche Unterschiede bei Sättigung und Helligkeit aufweist.

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

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

Browser-Kompatibilität

Siehe auch

Modul CSS-Filtereffekte
Weitere <filter-function>-Funktionen, die als Werte für die Eigenschaften filter und backdrop-filter verwendet werden können:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

hue-rotate()-CSS-Funktion

SVG

CSS

Help improve MDN

`hue-rotate()`-CSS-Funktion