このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2016年9月.
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> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>構文
hue-rotate() 関数は、適用された要素に色相回転を適用します。
hue-rotate(angle)引数
angle入力サンプルの色相の相対的な変化量を、
<angle>で指定します。0degは入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間の初期値は0です。最小値または最大値はありません。360degを超える値の効果は、hue-rotate(Ndeg)とした場合、Nを 360 で割った余りと等価です。
CSS のデータ型<angle> は、度、グラディアン、ラジアン、回転で表された角度の値を表します。次のものは同等です。
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> の背後の領域の色を変化させています。
.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 > <p> 画像上のテキストは、ドロップシャドウがあっても読みにくく、アクセシビリティがない場合があります。 </p></div>filter プロパティで
この例では、hue-rotate() フィルターを CSS プロパティのfilter を使用して適用し、色のずらしをコンテンツ、境界線、背景画像を含む要素全体に追加します。
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 型は、同様の効果を提供します。次のものが指定されたとします。
<filter> <feColorMatrix type="hueRotate" values="90" /></filter>これらの値は同じ結果をもたらします。
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 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> <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() グラデーションが中間部分で明度と彩度の明らかな違いを示す様子に注目してください。
<div> <p><code>hue-rotate()</code> を使用</p> <div></div></div><div> <p><code>hsl()</code> を使用</p> <div></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 |
ブラウザーの互換性
関連情報
- CSS フィルター効果モジュール
- その他の
filterおよびbackdrop-filterプロパティの値で使用できる<filter-function>関数には、次のものがあります。