• Home
  • Web制作
  • CSSのhue-rotateで画像の色変換を自由自在に！使いこなし術を徹底解説

CSSのhue-rotateで画像の色変換を自由自在に！使いこなし術を徹底解説

schedule
Tags: CSS

はじめに：CSSのhue-rotateとは？

Webサイトを制作する上で、画像の色調調整は欠かせない作業の一つと言えるでしょう。画像編集ソフトを使わずとも、CSSだけで色を変えられたら便利だと思いませんか？

そんな時に役立つのが、CSSのfilterプロパティです。filterプロパティには、ぼかしや明るさ調整など、様々な画像効果がありますが、その中でもhue-rotateは、画像の色相を自由自在に変更できる機能です。

この記事では、hue-rotateの基本的な使い方から、具体的な使用例、そして注意点まで、わかりやすく解説していきます。

あわせて読みたい
CSSフィルターで画像編集！表現力を広げるテクニックを紹介

hue-rotateの基本的な使い方

hue-rotateは、色相環に基づいて画像の色相を回転させることで色を変更します。色の三属性の一つである「色相」の変化のみを扱うため、彩度や明度は変わりません。

基本的な構文は以下の通りです。

.target-element {
  filter: hue-rotate(回転角度);
}
  • .target-element : エフェクトを適用する対象の要素を指定します。
  • 回転角度: 色相を回転させる角度を指定します。単位は deg (度) を使用し、0deg から 360deg の範囲で指定します。

例えば、画像の色相を180度回転させたい場合は、以下のように記述します。

img {
  filter: hue-rotate(180deg);
}

回転角度と色の変化の関係

hue-rotateで指定する回転角度と、色の変化の関係は以下の通りです。

  • 0deg: 変更なし
  • 90deg: 緑がかった色合い
  • 180deg: 補色 (反対色)
  • 270deg: 紫がかった色合い
  • 360deg: 元の色に戻る

hue-rotateの使用例

hue-rotateは、画像の色調を調整するだけでなく、様々な表現に活用できます。

ボタンにホバーエフェクトを追加

ボタンにマウスホバーした際に、色相を変化させることで、ユーザーに視覚的なフィードバックを提供できます。

.button:hover {
  filter: hue-rotate(45deg);
}

ギャラリー画像に変化を加える

複数の画像を並べたギャラリーで、各画像に異なる色相を適用することで、視覚的な変化を加えることができます。

.gallery-item:nth-child(1) {
  filter: hue-rotate(30deg);
}

.gallery-item:nth-child(2) {
  filter: hue-rotate(60deg);
}

.gallery-item:nth-child(3) {
  filter: hue-rotate(90deg);
}

hue-rotate使用時の注意点

hue-rotateは便利な機能ですが、いくつかの注意点があります。

画像の元の色の影響を受ける

hue-rotateは、あくまで画像の「色相」を変化させるだけであり、色の三属性である「彩度」や「明度」には影響を与えません。そのため、画像の元の色の組み合わせによっては、期待通りの色にならない場合があります。

ブラウザ間の色の差異

ブラウザやデバイスによって、色の表示方法が微妙に異なる場合があります。そのため、hue-rotate適用後の色は、環境によって見え方が異なる可能性があります。

まとめ

今回は、CSSのfilterプロパティの一つであるhue-rotateについて解説しました。hue-rotateは、画像の色相を自由自在に変換できる機能であり、Webデザインに彩りを加える効果的な手段となります。

基本的な使い方をマスターすれば、画像編集ソフトを使用せずとも、CSSだけで思い通りの色合いに調整できます。ぜひ、hue-rotateを活用して、表現豊かなWebサイト制作に挑戦してみて下さい。

関連記事