第三章:色の骨格 一ノ巻:色相環と加算混合 |
第二章の明度の次は色相と彩度を組み合わせた色の基礎を解説したい。基本的に色は これら3つの要素で出来ているので、一先ずはこれらを押さえておけば大丈夫だと思う。 色相・彩度・明度はそれぞれH・S・Vの略称で表すことがあるので合わせて覚えて頂きたい。 (なぜそう言う略称なのかは筆者も勉強不足で不明、面目無い…) ※後日この件に関して御説明のメールを頂いた。色相が「Hue」、彩度が「Saturation」 明度が「Value」で、それぞれの頭文字でHSVとしているとのこと。 サンプル左は赤(R:255 G:0 B:0)を頂点としてRGB値を128ずつR→G→Bとシフトして 作った単純な色相環である。色の基礎を解説した本で良く目にする物と少し感じが違うのは RGBでの作成方法が絵の具のような色を重ねると黒になって行く減算混合では無く、白く なって行く加算混合(サンプル右)のためである。加算混合での色の基本は以下の通り。 赤(R:255 G:0 B:0)+緑(R:0 G:255 B:0)=黄色(R:255 G:255 B:0) 緑(R:0 G:255 B:0)+青(R:0 G:0 B:255)=水色(R:0 G:255 B:255) 青(R:0 G:0 B:255)+赤(R:255 G:0 B:0)=紫色(R:255 G:0 B:255) この加算混合の基本を知っておくと目的の色を早く作れるようになるので、まずは各自で この色相環を作り、色の作成方法のイロハを掴んで頂きたい。パレットのグラデーション機能 では作れない場合もあるので数値で作ることに慣れておく意味もある。まあ、大抵は機能 任せで問題無いが最後は目視での微調整が必要なので…。 ※追記:サンプル左の色相環と右の混合図は色の位置を合わせてある。例えば赤とその 対面にある水色とを組み合わせるとRGB全ての数値が255になり白として表示される。 色相環で対面の関係にある色同士を数値的に組み合わせると白になるということは、白から ある色の持つ数値を引くと色相環の対面の色になるということであり、色作りに困った時に 覚えておけば何かのヒントになるかもしれない。 |
第三章:色の骨格 二ノ巻:彩度 |
色相(H)の次は彩度(S)だ。下のサンプルを見て貰いたい。原色赤(R:255 G:0 B:0)を 左上に配置し、そこから段階的に明度と彩度を変化させた図である。縦方向が明度の変化で 横方向が彩度の変化だ。D-pixedのパレットツールで数値を20刻みずつ変化させてみた。 原色の赤から右に移ると色が淡くなって行き、明度のみになって行くのが分かるだろうか。 彩度が下がると色味を失って行くのをツールの彩度スライダを操作して確認して欲しい。 彩度とは読んで字の如し”彩る度合い”のことで、色の鮮やかさのことである。通常は高い〜 低いで使われるので「もっと彩度を落して」という指示の場合は、彩度の数値を下げて色味を 押さえろと言うことになる。HSVスライダがあるツールの場合はこれで終了だが、RGBスライダ のみ場合は少々話が難しいので注意して欲しい。 RGBで色を作る場合は色を足すほど白くなる加算混合なので、色味を下げて明度のみに 近づける場合は、RGB全ての色数値を同じ数値に近づければ良いと言うことになる。例えば サンプル二段目の各色の数値をRGB値で示すと下記の通りになる(D-pixedで測定)。 (2-1)R:204 G:000 B:000 (2-2)R:204 G:041 B:041 (2-3)R:204 G:082 B:082 (2-4)R:204 G:122 B:122 (2-5)R:204 G:163 B:163 (2-6)R:204 G:204 B:204 Rの数値は変らず、G・Bの数値が同じ数値でRに近づいているのが分かる。スライダを見た 方が直感的に分かるかもしれない。RGB各値が同じ数値に近ければ近いほど色味が薄く 彩度が低いと言うことになる。他の色でも同じことなので色々試して欲しい。一度基本12色で サンプルのような彩度図を全部作って数値の変化をじっくり眺めて見ると良いと思う。 色に関してはこの他にも様々な事柄があるが、筆者程度の知識ではとても説明できない ので色製作に関する基礎部分だけを今回取り上げた。色の基礎に関して知りたい方は 「色の本棚」という本をお奨めしたい。3巻まで出ているはずだが感覚的な解説は1巻が一番 多いので、先ずは1巻から読んだ方が良いと思う。色の対比や補色の関係、配色の基礎など 知っておいた方が良い色彩の知識を明解に解説しているので御覧頂きたい。 以上で第三章は終了。さて、次章は基礎編の締め、動きの基礎辺りになるだろうか。 |