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.

hue-rotate() は CSS の関数で、要素およびその中身のコンテンツの色相環を回転させます。結果は <filter-function> です。

メモ: hue-rotate() は RGB 色に対する行列演算として定義されています。これは実際には色を HSL モデルに変換するものではなく、非線形操作です。そのため、特に彩度の高い色の場合、元の色の彩度や明度が維持されない場合があります。

試してみましょう

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>

構文

hue-rotate() 関数は、適用された要素に色相回転を適用します。

css

hue-rotate(angle)

引数

angle: 入力サンプルの色相の相対的な変化量を、 <angle> で指定します。 0deg は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間の初期値は 0 です。最小値または最大値はありません。 360deg を超える値の効果は、 hue-rotate(Ndeg) とした場合、 N を 360 で割った余りと等価です。

CSS のデータ型 <angle> は、度、グラディアン、ラジアン、回転で表された角度の値を表します。次のものは同等です。

css

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

形式文法

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

例

backdrop-filter プロパティで

この例では、 hue-rotate() フィルターを CSS プロパティの backdrop-filter を使用して段落に適用し、<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>
    画像上のテキストは、ドロップシャドウがあっても読みにくく、アクセシビリティがない場合があります。
  </p>
</div>

filter プロパティで

この例では、 hue-rotate() フィルターを CSS プロパティの filter を使用して適用し、色のずらしをコンテンツ、境界線、背景画像を含む要素全体に追加します。

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>この例を書いた人はデザイナーではありません。幸いにも。</p>

url() と SVG の hue-rotate フィルターで

SVG の <filter> 要素は、カスタムフィルター効果を定義するために使用でき、 id で参照することができます。 <filter> の <feColorMatrix> プリミティブの hueRotate 型は、同様の効果を提供します。次のものが指定されたとします。

svg

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

これらの値は同じ結果をもたらします。

css

filter: hue-rotate(90deg); /* 90deg 回転 */
filter: url(#filterID); /* 埋め込み SVG で */
filter: url(folder/fileName.svg#filterID); /* 外部 SVG フィルター定義 */

この例では、 3 つの画像を表示させています。 hue-rotate() フィルター関数を適用した画像、同等の url() フィルターを適用した画像、比較用の元画像です。

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>hue-rotate()</code></th>
      <th><code>url()</code></th>
      <th>元の画像</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="色を回転させたプライドフラッグ" />
      </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() は彩度や明度を維持しない

下記の図は、赤から始める 2 つの色のグラデーションを比較したものです。最初のグラデーションは hue-rotate() を使用して生成し、 2 つ目は実際の HSL 色値を使用しています。 hue-rotate() グラデーションが中間部分で明度と彩度の明らかな違いを示す様子に注目してください。

html

<div>
  <p><code>hue-rotate()</code> を使用</p>
  <div id="hue-rotate"></div>
</div>
<div>
  <p><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);
}

仕様書

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