Great Spangled Weblog

コメントははてなにログインすると可能になります(SPAM対策です)

色を塗ろう(彩度)

色塗りの話。色相と明度をやったので次は彩度。

彩度とは色の鮮やかさのこと。彩度が高い色は原色、彩度がない色はグレーで無彩色とも言う。色は基本的に原色と無彩色の間にある。

彩度を光のスペクトルのイメージで図にするとこう。

鮮やかな色は特定の波長に鋭いピークを持っていて、この山が低く、すそ野が広くなるに従い色が混ざって鮮やかさがなくなっていく。そして、フラットな特性の光はグレーになる。ちなみに白はグレーのすごく明るいもので、黒はグレーのすごく暗いもの。

デジタルペイントでは、何色にするか(色相)、どの程度の明るさにするか(明度)、どの程度の鮮やかにするか(彩度)の3要素で、その画素に配置するただ一つの色を決定できる。

これを色相(Hue)、彩度(Saturation)、明度(Value)の3本の軸からなる3次元空間に見立ててHSV空間と言う。

HSV色空間 - Wikipedia

コンピュータで表せる色はこの3軸で表されるユニークな座標を持つ。

言い換えれば、目の前に見えているものを、何色に近いか(色相・H)、どの程度の明るさか(明度・V)、どの程度鮮やかなのか(彩度・S)のHSVの3軸で見るようにすれば、デジタルペイントで塗る色を比較的容易に決定できる。

デジタルペイントに限らず、絵具を混ぜるときもこの視点で色を作るようにするとよりリアルな色を出せる。少なくとも自分は、はるか昔大学の漫研にいるころにHSV色空間を知ってから、ずっとそうやって色を塗ってきた。

色は赤緑青の3原色の混合でも表せる。こちらはRGBの色空間。

RGBとHSVの変換はあまり簡単ではないので、さすがにこれはソフトに任せたほうがいい。

それより、RGBは3軸が完全に直交するのに対し、HSVはHだけは他の軸と独立しているけど、SとVは関連がある。なぜならVが低くなるとどんどん色は鮮やかさをなくし、最後は黒になってしまう。

なので、HSVの色空間を図にするとwikipediaにあるようにこんな逆三角錐になる(以降の3枚はwikipediaから転載)。

とはいえ、HSVをこういう図で表示してもらうと、色を選ぶのがとても楽だ。

逆三角の下側の頂点を広げて無理やり円筒にする表現もある。円筒の底面は全て同一の黒になる。

ペイントソフトSAIはこの色空間に準じた色選択ツールを用意している。

さて、なぜ彩度を最後に持って来たかというと、リアルな絵を描くときに決定的な要素が「彩度」だから。

写真みたいな絵を描くには写真を観察すればいい。写真の各部の色をHSVでどうなっているか見ていく。そうすると、リアルな風景は彩度が非常に低いことに気付くかと思う。

逆に、例えば野山がリアルに描けない、植物の色が納得いかない、というあたりは、緑の彩度が高すぎる、というのが多く該当するのではと思う。

拙作で説明するとこう。

背景が鮮やかな緑の芝生に見えるのではと思うけど、

日向の芝生はこの通りかなりグレーに近い。

日陰はもうちょっと鮮やかだけど、半分よりはグレーに近い。

この背景はロケハンをやっていて、元にしたのがこの写真。

芝生の色をスポイトでとると、

写真はここまでグレーに近い。

という経験から、色選択は上図のように3つの領域を設定し、グレーに近い1/3を常用し、意図的に色を鮮やかにするときに真ん中1/3を使い、絵としては右側1/3は使わないようにしている。

上のミリオン絵で言えば、意図して派手にした部分は女の子の目。

エミリーちゃんの紫の瞳はかなり鮮やかに見えるけど、彩度はこの程度。

最上静香の目が一番派手で、これで真ん中をちょっと右に行くくらい。

HSVで色を選択して塗る場合、横方向で鮮やかさ、縦方向で明るさをコントロールできるから、前のエントリーにあった、明度のコントロールというのは自然にできるようになる。

HSVの色選択はマジお勧め。

そして、HSVの視点で世界を見るようになれば、何が何色かをよりはっきり認識できるようになると思う。

欠点は、影で色相が変わるような色の選択が難しいことだけど、それはそれで、慣れてきてから対応すればいいことだと思う。