CSS Reference

hue-rotate()

色相環を回転させる

hue-rotate() 関数は、フィルター関数と呼ばれるCSS関数で、filter プロパティを使用して要素に適用することで、その要素の色相環を回転させます。

指定可能な値は、<angle> 値です。色相環は360度で構成されており、色はその円周上に並んでいます。hue-rotate() 関数で指定する角度によって、要素の色がその角度分だけ色相環上で回転します。

つまり、0deg は変化なし、360deg も1周して同じ位置に戻ってくるため、同じく変化なしとなります。360deg 以上の角度が指定された場合、例えば 400deg が指定された場合は、1周＋40度と同じ意味になるため、40deg が指定されたものとして解釈されます。

負の値は、色相を反時計回りに回転させます。

hue-rotate()のサンプルソース

filter: hue-rotate(90deg);
filter: hue-rotate(-0.25turn);
filter: hue-rotate(3.142rad);
filter: hue-rotate(-50grad);

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome