CSS Filterを使えば、簡単に色調（明度や彩度）加工ができる。

CSS Filterを試してみた。

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

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

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

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

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

【フィルタ種類】

filter: grayscale(50%); /* グレースケール */
filter: sepia(50%); /* セピア */
filter: saturate(140%); /* 彩度 */
filter: brightness(0.8); /* 明度 */
filter: contrast(120%); /* コントラスト */
filter: hue-rotate(45deg); /* 色相変換 */
filter: opacity(0.6); /* 透明度 */
filter: blur(2px); /* ぼかし */
filter: invert(80%); /* 階調反転 */

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