CSSで色相・彩度・明度? filterプロパティでできること。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

CSSで色相・彩度・明度? filterプロパティでできること。

filter(フィルター)

CSSで色相・彩度・明度? filterプロパティでできること。

filterプロパティでできること。

CSSのfilterプロパティの関数は全部で10種類ほどある。(2022年現在。noneを含めると11種類。)かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。

filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、グレースケール、ドロップシャドウなどが簡単に扱える。

サイトで使用する画像に一括指定もできるので、写真のテイストの統一化やホバー時のエフェクトがしやすい。


filterの種類。

色相回転(hue-rotate)

マンセル色相環。

画像出典:Wikimedia Commons +-さま

色相(hue)とは要するに、赤・オレンジ・黄色・緑・青・紫・など、色合いのこと。

マンセルカラーシステムなどの色相環では時計回り(もしくは反時計回り)に色が変わり、その色を数値や記号で指定できる。CSSの場合は画像などの色を色相環を基にした、度(deg)で指定をする。

例)

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

色相(hue)を色相環のサークル、ホイールで45度回した場合。

filter(フィルター)
filter(フィルター)

彩度(saturate)

彩度(saturate)とは要するに、色の鮮やかさのこと。CSSのfilterではHSB(Hue-色相、Saturation-彩度、Brightness-明度)で指定する。

HSBの素材が見つからなかったので、下記HSL、HSVの画像(RGBは今回除いて)を参考にイメージするなら、、、

  • 明度(Brightness。この画像のHSL、HSVではLightness、Value。)は縦軸の上へ行くほど白くなり、下へ行くほど黒くなる。
  • 色相(Hue)は色相環の回転軸で変化する。
  • 彩度(Saturation)は横軸で鮮やかさの度合いが変わる。

HSL、HSV、RGBそれぞれのカラーモデルにおける色立体の比較。

画像出典:Wikimedia Commons SharkDさま

例)

.saturate {
 filter: saturate(200%);
}

彩度(saturate)を200%(2倍)上げた場合。

filter(フィルター)
filter(フィルター)

.brightness {
 filter: brightness(200%);
}

明度(brightness)

明度(brightness)を200%(2倍)上げた場合。

filter(フィルター)
filter(フィルター)

ぼかし(blur)

例)

.blur {
  filter: blur(2px);
}

ぼかし(blur)を2pxかけた場合。

filter(フィルター)
filter(フィルター)

コントラスト(contrast)

例)

.contrast {
  filter: contrast(200%);
}

コントラストを(contrast)を200%(2倍)上げた場合。

filter(フィルター)
filter(フィルター)

グレースケール(grayscale)

例)

.grayscale {
  filter: grayscale(90%);
}

グレースケールを(grayscale)を90%上げた場合。

filter(フィルター)
filter(フィルター)

透過度(opacity)

例)

.opacity {
  filter: opacity(50%);
}

透過度(opacity)を50%(半透明)にした場合。

filter(フィルター)
filter(フィルター)

反転(invert)

例)

.invert {
  filter: invert(100%);
}

階調(色の段階、濃淡の度合い)を100%反転(invert)させた場合。

filter(フィルター)
filter(フィルター)

セピア(sepia)

例)

.sepia {
  filter: sepia(50%);
}

50%のセピア調にした場合。

filter(フィルター)
filter(フィルター)

ドロップシャドウ(drop-shadow)

drop-shadowはbox-shadowと違い、透明部分があるPNGやSVGの輪郭に合わせてシャドウをつけることができる。

例)

.drop_shadow {
  filter: drop-shadow(5px 5px 10px #777);
}

筆でシャシャシャッと描いた画像の形でトリミングした写真に、ドロップシャドウをかけた場合。

filter(フィルター)
filter(フィルター)


オンラインツール。

オンラインで利用できるジェネレーターを利用すると、見た目を調整しながらCSSを書き出してくれるので便利だ。

そのうちの一つである「Front-end Tools」では、デフォルトでサンプル画像が用意されており、右サイドの項目から自分が使いたい画像をアップロードして調整することもできる。

参考: Front-end Tools さま CSS filter(フィルター)ジェネレーター

Web関連の知の宝庫、MDNのサイトも参考になる。

参考: MDN さま filter – CSS: カスケーディングスタイルシート | MDN

そのうちFigmaのプラグインでも出てきそうな気もします。(今回は見つけられず。)


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。