ブレンドモード・色相/彩度/カラー/輝度のまとめ

Photoshop, Illustrator, Fireworksなどの画像編集ソフト（ざっくりだな）を使うときに、良くカラーのブレンドってやりますよね。
"乗算"とか"スクリーン"とか"反転"とか"削除"とか。
まぁ、このあたりは直感的に分かるんですが、"色相"・"彩度"・"カラー"・"輝度"なんてのになると、訳が分からなくなるのは僕だけじゃないはず。
「何で、水色の上に茶色を色相でブレンドしたらオレンジ色になるん？？」
なんて思っている人は僕だけじゃないはず。
と言う事でそのあたりをまとめてみました。

(Figure.1)

(Figure.2)

まずは、基本中の基本。
色の仕組み。
WEB屋さんだと色はRGBで考えがちですが、HSL（H:色相、S:彩度、L:輝度）で表現することもあります。(Figure.1,2)
CSS3使っている人は知ってるかも。
あえて詳しく説明する必要もないでしょう。

ブレンドモード"色相"とは、"ベースカラーの彩度と輝度"と"ブレンドカラーの色相"を合わせた色にすることです。
ブレンドモード"彩度"とは、"ベースカラーの色相と輝度"と"ブレンドカラーの彩度"を合わせた色にすることです。
ブレンドモード"輝度"とは、"ベースカラーの色相と彩度"と"ブレンドカラーの輝度"を合わせた色にすることです。
ブレンドモード"カラー"とは、"ベースカラーの輝度"と"ブレンドカラーの色相と彩度"を合わせた色にすることです。



…と、Adobeさんの説明を噛み砕いて書いてみましたが、はい？って感じです。
これで分かる人は賢い人ですね。
分からない人は次の図を見て下さい。(Figure.3,4)

(Figure.3)

(Figure.4)

上図の左がベースカラー（色相：中、彩度：中、輝度：中）です。右がブレンドカラーです。

「ブレンドモードで指定した要素のみ上書きする」と考えれば分かりやすいです。（余計分かりにくいですか？）
これが理解できればデザインの幅が少し広がりますね。

じゃあ、"焼き込み（リニア）"とか、"ハードミックス"はどうなんだって？
知りません。
また機会があればまとめます。

（余談）
輝度って「きど」って読むんですね。
読み方が分からず「けいど」って言っていました。お恥ずかしい。

（2010.11.12追記）
こちらの記事が大変詳しいです。
http://ofo.jp/osakana/cgtips/blendmode.phtml