
CSS filterで色変更。色相・彩度・明度? filterプロパティでできること。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
filterプロパティでできること。
CSSのfilterプロパティの関数は全部で10種類ほどある。(2022年現在。noneを含めると11種類。)かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。
filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、グレースケール、ドロップシャドウなどが簡単に扱える。
サイトで使用する画像の色変更も一括でできるので、写真のテイストの統一化やホバー時のエフェクトがしやすい。
filterの種類。
色相回転(hue-rotate)

色相(hue)とは要するに、赤・オレンジ・黄色・緑・青・紫・など、色合いのこと。
マンセルカラーシステムなどの色相環では時計回り(もしくは反時計回り)に色が変わり、その色を数値や記号で指定できる。CSSの場合は画像などの色を色相環を基にした、度(deg)で指定をする。
例)
.hue {
filter: hue-rotate(45deg);
}
色相(hue)を色相環のサークル、ホイールで45度回した場合。


彩度(saturate)
彩度(saturate)とは要するに、色の鮮やかさのこと。
彩度を含む、色の三属性の色相・彩度・明度は、CSSのfilterではHSB(Hue-色相、Saturation-彩度、Brightness-明度)で指定する。
HSBの素材が見つからなかったので、下記HSL、HSVの画像(RGBは今回除いて)を参考にイメージするなら、、、
- 明度(Brightness。この画像のHSL、HSVではLightness、Value。)は縦軸の上へ行くほど白くなり、下へ行くほど黒くなる。
- 色相(Hue)は色相環の回転軸で変化する。
- 彩度(Saturation)は横軸で鮮やかさの度合いが変わる。
画像出典:Wikimedia Commons SharkDさま
例)
.saturate {
filter: saturate(200%);
}
彩度(saturate)を200%(2倍)上げた場合。


.brightness {
filter: brightness(200%);
}
明度(brightness)
明度(brightness)を200%(2倍)上げた場合。


ぼかし(blur)
例)
.blur {
filter: blur(2px);
}
ぼかし(blur)を2pxかけた場合。


コントラスト(contrast)
例)
.contrast {
filter: contrast(200%);
}
コントラストを(contrast)を200%(2倍)上げた場合。


グレースケール(grayscale)
例)
.grayscale {
filter: grayscale(90%);
}
グレースケールを(grayscale)を90%上げた場合。


透過度(opacity)
例)
.opacity {
filter: opacity(50%);
}
透過度(opacity)を50%(半透明)にした場合。


反転(invert)
例)
.invert {
filter: invert(100%);
}
階調(色の段階、濃淡の度合い)を100%反転(invert)させた場合。


セピア(sepia)
例)
.sepia {
filter: sepia(50%);
}
50%のセピア調にした場合。


ドロップシャドウ(drop-shadow)
drop-shadowはbox-shadowと違い、透明部分があるPNGやSVGの輪郭に合わせてシャドウをつけることができる。
例)
.drop_shadow {
filter: drop-shadow(5px 5px 10px #777);
}
筆でシャシャシャッと描いた画像の形でトリミングした写真に、ドロップシャドウをかけた場合。


filterで色相・彩度・明度を調整するメリット。
CSSで調整するメリットしては、、、
- ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
- クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
- などがある。
オンラインツール。
オンラインで利用できるジェネレーターを利用すると、見た目を調整しながらCSSを書き出してくれるので便利だ。
そのうちの一つである「Front-end Tools」では、デフォルトでサンプル画像が用意されており、右サイドの項目から自分が使いたい画像をアップロードして調整することもできる。
参考: Front-end Tools さま CSS filter(フィルター)ジェネレーター
Web関連の知の宝庫、MDNのサイトも参考になる。
参考: MDN さま filter – CSS: カスケーディングスタイルシート | MDN
そのうちFigmaのプラグインでも出てきそうな気もします。(今回は見つけられず。)
CSSでの画像調整の補足。
CSSで調整するメリットしては、、、
- ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
- クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
- などがある。
関連:CSSブレンドモード。mix-blend-modeでPhotoshopのような乗算を。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。