晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

CSS Filterを使えば、簡単に色調加工ができる。

CSS Filterを試してみた。

CSS Filterを使えば、写真そのものを加工しなくても、ブラウザ上で彩度、明度、コントラスト等色調を変えて表示できる。

CSSは簡単。例えばグレースケールにしたければ、下のようにgrayscaleフィルタを指定するだけで良い。

    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

明度を変えるなら、下のようにbrightnessフィルタを指定する。

    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);

実際に試したサンプルが以下。

↑ オリジナル写真
↑ グレースケール:grayscale(100%)
↑ グレースケール:grayscale(50%)
↑ セピア:sepia(100%)
↑ セピア:sepia(50%)
↑ 彩度:saturate(200%)
↑ 彩度:saturate(140%)
↑ 明度:brightness(1.2)
↑ 明度:brightness(0.8)
コントラスト:contrast(140%)
コントラスト:contrast(120%)
↑ 色相変換:hue-rotate(90deg)
↑ 色相変換:hue-rotate(45deg)
↑ 透明度:opacity(0.8)
↑ 透明度:opacity(0.6)
↑ ぼかし:blur(3px)
↑ ぼかし:blur(2px)
↑ 階調(色と輝度)反転:invert(100%)
↑ 階調(色と輝度)反転:invert(80%)