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 rotiert den Farbton eines Elements und dessen Inhalte. Das Ergebnis ist eine <filter-function>.

Hinweis: hue-rotate() wird als Matrixoperation auf der RGB-Farbe spezifiziert. Es konvertiert die Farbe nicht tatsächlich in das HSL-Modell, welches eine nicht-lineare Operation ist. Daher kann es die Sättigung oder Helligkeit der Originalfarbe, insbesondere bei gesättigten Farben, nicht bewahren.

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

hue-rotate(angle)

Werte

angle Optional: Die relative Änderung im Farbton des Eingabemusters, angegeben als ein <angle>. Ein Wert von 0deg belässt die Eingabe unverändert. Eine positive Farbton-Rotation erhöht den Farbtonwert, während eine negative Rotation den Farbtonwert verringert. Der Anfangswert für die Interpolation ist 0. Es gibt keinen Mindest- oder Höchstwert. Der Effekt von Werten über 360deg wird, gegeben hue-rotate(Ndeg), als N modulo 360 evaluiert. Der Standardwert ist 0deg.

Der CSS-Datentyp <angle> stellt einen Winkelwert dar, der in Grad, Gon, Radiant oder Umdrehungen ausgedrückt wird. Folgende 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 CSS-Eigenschaft backdrop-filter auf den Absatz an, wodurch der Farbbereich hinter dem <p> verschoben wird.

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

Dieses Beispiel wendet einen hue-rotate()-Filter über die CSS-Eigenschaft filter an, wodurch der Farbbereich für das gesamte Element einschließlich Inhalt, Rand und Hintergrundbild verschoben 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;
}

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 <filter>-Element wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann durch id referenziert werden können. Der hueRotate-Typ der <feColorMatrix>-Primitive des <filter> liefert denselben Effekt. Gegeben sei folgendes:

html

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

Diese Werte erzeugen dasselbe Ergebnis:

css

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

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

<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() bewahrt nicht Sättigung oder Helligkeit

Das unten stehende Diagramm vergleicht zwei Farbverläufe, die mit Rot beginnen: Der erste wird unter Verwendung von hue-rotate() erzeugt, und der zweite verwendet tatsächliche HSL-Farbwerte. Beachten Sie, wie der hue-rotate()-Gradient 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

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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