混色

色の見え方

厳密な話を除けば人間の目は赤と青と緑の3色をベースに様々な色を見分けている。(厳密な議論はここではとりあえず省略する)。
色が見えるというのはその色の光(または色を構成する光の集まり)が目に入っていることである、これ重要。
RGBなんて言葉を聞いたことあると思うけどこれはRED, GREEN, BLUEのことで光の3原色と言われている。

加法混色

光の三原色による。光を足し合わせることで色を表現する方法。光の足し合わせは絵の具の混色とは勝手が違うので注意。混ぜると光の強さが増し、明るくなってゆく。

RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE

とりあえずこれを理解しておけばOK。CYANは所謂水色、MAGENTAは明るい紫色。
液晶モニタを良く見れば赤と青と緑の光から成り立っていることが分かるはず。

減法混色

色の三原色による。絵の具の混色と同じ。加法混色と異なり反射光によるものなので混ぜるとどんどん暗くなってゆく。CYAN, MAGENTA, YELLOWを3原色としている。先ほどの

RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE

を逆に考えると

CYAN = WHITE - RED
MAGENTA = WHITE - GREEN
YELLOW = WHITE - BLUE

となる。つまりCYANはREDの光を吸収しGREENとBLUEを反射、MAGENTAは GREENの光を吸収しBLUEとREDを反射、YELLOWはBLUEの光を吸収しREDとGREENを反射していることになる。
例えばCYANとMAGENTAを混色すると、REDとGREENを吸収することになるのでおおよそBLUEになる。(REDとGREENを全く反射しない訳では無い)
プリンタのインクの色がCYAN, MAGENTA, YELLOW, BLACKであるのは減法混色により全ての色を表そうとしているため。

よく赤・青・黄を色の三原色などと呼んでけど、赤・青・黄の絵の具では明るい水色なんかは絶対に作れない。まあ水色と青では色相は同じなんだけど、明度や彩度が違うんだよね。三原色は色相環を作れるからそう呼ぶんでしょう。

色の3要素

  • 色相
  • 明度
  • 彩度 を色の3要素(3属性)と呼ぶ。

色相

色相とは色合いを示すものである。可視光のスペクトルをイメージすると分かり易い。
色合いを
RED->YELLOW->GREEN->CYAN->BLUE->MAGENTA->RED
のような形で円状に描いたものを色相環と呼ぶ。

色相名

日本色研配色体系(PCCS)では色相環を作る二四色相を次のように呼びます。

1:pR2:R3:yR4:rO5:O6:yO
7:Y8:gY9:gY10:YG11:yG12:G
13:bG14:BG15:BG16:gB17:B18:B
19:pB20:V21:bP22:P23:rP24:RP

全部略称。そのうち色と名前つけます。

系統

色相のうち色相名の1~7を暖色(系)、13~19を寒色(系)と呼びます。他はその中間色です。暖色は赤みがかり、寒色は青みがかる色ですね。これらの色は人の感情に働きかけることがわかっています(喩えば赤は興奮させ、青は冷静にさせます)。喜怒哀楽を伝える時にはその感情を表現できるように色を選ぶべきです。

明度

色の明るさ。WHITEが最も明るく、BLACKが最も暗い。CYAN, MAGENTA, YELLOWはRED, GREEN, BLUEのうちの2色の加法混色であるので、RED, GREEN, BLUEよりも明るい。
加法混色では混ぜれば混ぜる程明るく、減法混色では混ぜれば混ぜる程暗くなる。

彩度

色の鮮やかさ。WHITEやBLACKは彩度は0である。RED, GREEN, BLUE, CYAN, MAGENTA, YELLOWは彩度が最も高い。これらにWHITEやBLACKがどの程度混じるかが彩度の目安と思っても誤りではない。
彩度の高い背景色のWebサイトは大変目に悪いため、Webデザインに関わる人は気を付ける必要がある。

応用

トーン

「トーンは、明度と彩度の複合概念といえるものです」とPCCSのページにもあるけれど、面倒なので下記の参考ページのトーンの項を見て欲しい。

明度と彩度により分けられた色の場所によって、色から受けるイメージが異なる事がよくわかります。

記號彩度明度
Wwhite0s9.5
ltGylight gray明灰色0s7.5
mGymedium gray灰色0s5.5
dkGydark gray暗灰色0s3.5
Bkblack0s1.5
------------------------
ppale薄い・淡い2s9











ltglight grayish明るい・灰み2s6
ggrayish灰み2s5
dkgdark grayish暗い・灰み2s2
ltlight浅い5s9
sfsoft浅い・穏やか5s6
ddull鈍い5s5
dkdark暗い5s2
bbright明るい8s8
sstrong明瞭な8s5.5
dpdeep濃い8s3
vvivid冴えた9s5.5

明度は適当です。無彩色はタダの色ですね。幾つかは知っていると思います。他にもpやltあたりはパステル調の色ですね。dpは和紙に多そうな落ち着いた色です。

このトーンはさっきの色相名の数字と合わせて色を指定できます。lt-2.5とすると、色相 R と yRの中間色相で浅い色(light)、という事を表せます。

補色

色彩調和

同系

類似

対照

色の錯視

頻出する色の扱い

コンピュータ上で色を扱う場合、加法混色か色の3要素を扱うものが多い。最大多数が前者を採用し、グラフィック系ソフトではこれに加えて後者が、DTPや印刷を視野に入れたソフトではさらに減法混色までをサポートするといった構図。

RGB

RED, GREEN, BLUEの光の強さを数値にして色を表す。HTML(CSS)での文字色指定などで使われている。
各色0〜255の値を指定出来るとすると

RGBcolor
FF0000RED
00FF00GREEN
0000FFBLUE
FFFF00YELLOW
FF00FFMAGENTA
00FFFFCYAN
000000BLACK
808080GRAY
FFFFFFWHITE

のように表現できる。

※HTMLでは#00FF00greenではなくlimeという扱いになっており、また人間の感覚でも#00FF00は緑と言うよりも黄緑であり、一般に言う緑は#008000である。

HSV・HSB

色相(Hue)、彩度(Saturation)、明るさ(BrightnessまたはValue)によって色を表す。
色相は赤→黄→緑→青→紫→赤という円環(色相環)で表現可能であるため、Hueは赤を基準とした角度によって0から360までの値で表現されることが多い。
その場合、補色同士は色相環の反対側に位置するため、Hueの値は180異なる。
Saturationは0%から100%までの値で表現する(100%をどの値に当てるかはソフトウェアに依存する)。原色のような鮮やかな色ほど値が大きく、淡い色は値が小さい。白・灰色・黒のような無彩色では値は0%となる。 Brightnessも同じく、0%から100%までの値で表現する(100%をどの値に当てるかはソフトウェアに依存する)。値を小さくするほど黒に近づくが、値を大きくしても必ずしも白になるわけではない。

HSV色空間 - Wikipedia

HSL

色相(Hue)、彩度(Saturation)、輝度(Lightness)によって色を表す。
HSBとHSVは同じものを指すが、非常に似た体系であるHSLは前述の表色系とは異なるので注意されたい。PhotoshopにはHSB、Paint Shop ProやWindowsのペイントにはHSLのカラーピッカーがそれぞれ採用されているので注意が必要。彩度-明度が四角いのがHSLで三角形なのがHSBと覚えておけばだいたい合ってる。

HSLとHSBの最大の違いは明度の扱い。
HSLの輝度(Lightness)の値を大きくすると、必ず白に近づいていく。色合いも変化して淡い色になっていく。見た目に鮮やかな色はLightnessが中間あたりの値となる。
しかしHSBの明度(Brightness)の値を大きくしても、彩度(Saturation)が大きい色の場合は必ずしも白にはならず、色合いを保ったまま明るくなる。見た目に鮮やかな色はBrightnessが最大値近くになる。

YCbCr

輝度信号(Y)と、2つの色差信号(Cb,Cr)を使って表現される色空間。
映像信号の伝達に用いられたり、JPEGの内部で使用されたり。意外に大活躍w

RGBからYCbCrの変換式は以下のとおり。
輝度: Y = 0.299*R + 0.587*G + 0.114*B
色差: Cb= 0.564*(B-Y) = -0.169*R - 0.331*G + 0.500*B
   Cr= 0.713*(R-Y) = 0.500*R - 0.419*G - 0.081*B
変換式がR、G、Bに関する一次式であることに注意。この点でYCbCrはHSBやHSLとは大きく異なる。

Yの計算式においてRGBの定数がすべて異なっているのは、人間の目の波長ごとの感度を考慮しているためと思われる。単純にRGBを平均するのに比べ、見た目で感じる明るさに近い値を得られる。
Cb、Crはだいたい色の青み(負の値の場合は黄み)、赤み(負の値の場合は緑み)に対応している。

人間の目の感度は輝度に敏感な反面、色差にはあまり敏感ではないことを利用し、Yを残してCb、Crの信号だけを間引くことによって見た目の劣化を最小限に抑えて画像データの情報量を削減することが稀によくある。

コンポーネント映像信号 - Wikipedia

CMYK

印刷用の色空間。
シアン(Cyan)、マゼンタ(Magenta)、黄(Yellow)、黒(Kuro…ではなくキープレート(Key Plate)からきている)のインクの減法混色によって色を表す。

シアン、マゼンタ、黄はそれぞれRGBの原色である赤、緑、青の補色にあたる。
理屈のうえではシアン、マゼンタ、黄を混ぜて黒を作り出せるはずだが、実際にやってみても黒がきれいに出せない。そのため黒を加えてある。

CMYK - Wikipedia

頻出ではなさそうな色の扱い

ちょっとマイナーな表色系たち。

XYZ

表色系の中でとても重要な地位にいて、カラーキャリブレーションや色管理の話では活躍しているのだが…。

参考ページ

日本色彩研究所・日本色研配色体系(PCCS):http://www.sikiken.co.jp/pccs/