【図1】RGBの値と表色
【図1】RGBの値と表色
[画像のクリックで拡大表示]
【図2】RGBカラースライダ(Photoshop CS)
【図2】RGBカラースライダ(Photoshop CS)
[画像のクリックで拡大表示]
【図3】HSBカラースライダ(Photoshop CS)
【図3】HSBカラースライダ(Photoshop CS)
[画像のクリックで拡大表示]
【図4】RGBカラースライダで値を確認しながら色を与えた例
【図4】RGBカラースライダで値を確認しながら色を与えた例
[画像のクリックで拡大表示]
【図5】HSBカラースライダで値を確認しながら色を与えた例
【図5】HSBカラースライダで値を確認しながら色を与えた例
[画像のクリックで拡大表示]

 色を使うということは、色を作るということでもある。デジタルの環境で色はツールのパラメーターを変更するだけでできあがる。今回は色の作り方を2種類、解説する。

RGBによる色設定

赤(R)、緑(G)、青(B)の3色の光を掛け合わせて色を表現する方法がRGBによる色設定だ。OSの色設定でも、ワープロソフトの文字色決定ツールでもこの形式を採用していることが多いので、PCユーザーなら誰にでも馴染みがあるだろう。R,G,Bそれぞれの最大値は255で、3色の割合を変更すると、異なる色相の色が作成できる【図1】【図2】。光と表色の関係がよくわかる設定だが、配色ツールとして駆使できる形式ではない。RGBはデバイスが色を作り出す方式そのものであって、この3つのパラメータを駆使して人間が自然な色の推移を感じられるような色のセットを作り出すのは難しい。

HSBによる色設定

色の3属性(色相、彩度、明度)をパラメータとして備えた色設定モードがこちらだ。RGBで表現する電子デバイス上の色を、人間の知覚に合わせた形で操作、変更できるモードである。デザイン上に色の要素を反映させる時、つまり配色を行う際に欠かせない。配色作業は人間が主観的に捉えられる色の状態を、3属性に置き換えて微調整しながら行うものである。例えば赤っぽい色味(色相)で、明るめの赤とちょっと暗めの赤(トーン)のバリエーションを揃える。といった考え方は、人間独自の色に対する感覚を言語化した状態だろう。こうした感覚的な色探しの作業が、HSBなら瞬時に行える【図3】。
ちなみにWindows OSではHSBによく似たHLSカラーモードを使った色設定が可能だが、HSBとHLSではパラメーターが異なる。デザインツールではHSB、HSVモードを搭載したものが一般的で、Windowsでもこれらのカラーモードを追加できるフリーソフトがあるので利用して欲しい。

表現にはどちらも有効

ところでRGBはPCが色を扱うための情報であって、人間が色を感じ、コントロールするのには不向きのようにも思える。しかし表現する内容によってはRGBモードのほうが、適切な色が割り出しやすい場合もある。例えば、光を感じる平面構成を作りたいとしよう。RGBは光が重なり合った時にできる色を確認するのには最適だ。【図3】の作例を見て欲しい。波を表すグラフィックにはR0、G0、B255のピュアな青を塗りに使用している。さらに青が明るさを増した状態が感じられるR0、G255、B255のライトブルー(原色の青に対して2次色という位置付けでもある)をエンボスのライティング部分に設定した。中央の円はR0、G255、B255のライトブルーを塗りの色として、RGB各255の白を上方に、下方の影にはB255を使って光そのもののツヤを表現している。背後のグラデーションは上方をB255、下方をB150(B以外は0)の黒に近い青を使って光が落ちていく様子がよりクリアでリアルに表現できた。
このように、光そのものを表現する場合や、描画対象に当たる光や影の色を割り出す時、RGBの数値と表色の関係を頭に入れておくとすぐに必要な表現が最適な色でできるようになる。こうした考え方は、写真素材にCGパターンを合成する際などで、色遣いの目安にもできる。
一方、グラフィック全体を面の構成として捉え、調和を取ろうとする場合はHSBが適している。作例【図4】は構成に含まれる図を具象的に描こうとしたものでなく、全体をパターンとしてまとめようとしたものだ。全体は同一の色相(青)からトーン違いで面の色を決めている。例のようにごく平面的で「描画」というより「レイアウト」といった行為のなかの色作りでは、HSBが効果的だ。面を構成する作業が中心のWebサイト制作の場合、HSBにお世話になる機会は多くなるが、グラフィックデザインや写真の加工など制作作業全般で考えるとRGBモードにも慣れておく必要がある。