*混色 [#w8c39ca7]
**色の見え方 [#z9b95160]
厳密な話を除けば人間の目は赤と青と緑の3色をベースに様々な色を見分けている。（厳密な議論はここではとりあえず省略する）。~
色が見えるというのはその色の光（または色を構成する光の集まり）が目に入っていることである、これ重要。~
RGBなんて言葉を聞いたことあると思うけどこれはRED, GREEN, BLUEのことで光の3原色と言われている。
**加法混色 [#ec9ad69a]
光の三原色による。光を足し合わせることで色を表現する方法。光の足し合わせは絵の具の混色とは勝手が違うので注意。混ぜると光の強さが増し、明るくなってゆく。
RED + GREEN = YELLOW
GREEN + BLUE = CYAN
BLUE + RED = MAGENTA
RED + GREEN + BLUE = WHITE
とりあえずこれを理解しておけばOK。CYANは所謂水色、MAGENTAは明るい紫色。~
液晶モニタを良く見れば赤と青と緑の光から成り立っていることが分かるはず。
**減法混色 [#ebec113f]
色の三原色による。絵の具の混色と同じ。加法混色と異なり反射光によるものなので混ぜるとどんどん暗くなってゆく。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要素 [#d4b4e9aa]
-色相
-明度
-彩度
を色の3要素（3属性）と呼ぶ。
**色相 [#z43fd0a5]
色相とは色合いを示すものである。可視光のスペクトルをイメージすると分かり易い。~
色合いを~
RED->YELLOW->GREEN->CYAN->BLUE->MAGENTA->RED~
のような形で円状に描いたものを色相環と呼ぶ。
***色相名 [#f5970631]
日本色研配色体系（PCCS）では色相環を作る二四色相を次のように呼びます。
|1:pR|2:R|3:yR|4:rO|5:O|6:yO|
|7:Y|8:gY|9:gY|10:YG|11:yG|12:G|
|13:bG|14:BG|15:BG|16:gB|17:B|18:B|
|19:pB|20:V|21:bP|22:P|23:rP|24:RP|
全部略称。そのうち色と名前つけます。
***系統 [#l736ad45]
色相のうち色相名の1~7を暖色（系）、13~19を寒色（系）と呼びます。他はその中間色です。暖色は赤みがかり、寒色は青みがかる色ですね。これらの色は人の感情に働きかけることがわかっています（喩えば赤は興奮させ、青は冷静にさせます）。喜怒哀楽を伝える時にはその感情を表現できるように色を選ぶべきです。
**明度 [#w476845f]
色の明るさ。WHITEが最も明るく、BLACKが最も暗い。CYAN, MAGENTA, YELLOWはRED, GREEN, BLUEのうちの2色の加法混色であるので、RED, GREEN, BLUEよりも明るい。~
加法混色では混ぜれば混ぜる程明るく、減法混色では混ぜれば混ぜる程暗くなる。
**彩度 [#c25c6b57]
色の鮮やかさ。WHITEやBLACKは彩度は0である。RED, GREEN, BLUE, CYAN, MAGENTA, YELLOWは彩度が最も高い。これらにWHITEやBLACKがどの程度混じるかが彩度の目安と思っても誤りではない。~
彩度の高い背景色のWebサイトは大変目に悪いため、Webデザインに関わる人は気を付ける必要がある。
*応用 [#u919b607]
**トーン [#z8d519e8]
「トーンは、明度と彩度の複合概念といえるものです」とPCCSのページにもあるけれど、面倒なので下記の参考ページのトーンの項を見て欲しい。
明度と彩度により分けられた色の場所によって、色から受けるイメージが異なる事がよくわかります。
|記號|英|和|彩度|明度|>|>|>|>|>|>|>|>|>|>|>|色|h
|W|white|白|BGCOLOR(#C0C0C0):0s|BGCOLOR(white):9.5|>|>|>|>|>|>|>|>|>|>|>|BGCOLOR(white):|
|ltGy|light gray|明灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(#B0B0B0):7.5|>|>|>|>|>|>|>|>|>|>|>|BGCOLOR(#B0B0B0):|
|mGy|medium gray|灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(gray):5.5|>|>|>|>|>|>|>|>|>|>|>|BGCOLOR(gray):|
|dkGy|dark gray|暗灰色|BGCOLOR(#C0C0C0):0s|BGCOLOR(#404040):3.5|>|>|>|>|>|>|>|>|>|>|>|BGCOLOR(#404040):|
|Bk|black|黒|BGCOLOR(#C0C0C0):0s|BGCOLOR(black):1.5|>|>|>|>|>|>|>|>|>|>|>|BGCOLOR(black):|
|~----|~----|~----|~----|~----|>|>|>|>|>|>|>|>|>|>|>|~----|
|p|pale|薄い・淡い|BGCOLOR(#D4CD9C):2s|BGCOLOR(#E0E0E0):9|BGCOLOR(#F0B1CC):&br;|BGCOLOR(#FCCCBB):&br;|BGCOLOR(#FEE6AA):&br;|BGCOLOR(#FFFFB4):&br;|BGCOLOR(#E6F5B0):&br;|BGCOLOR(#CCEBC6):&br;|BGCOLOR(#B4E2D8):&br;|BGCOLOR(#B2D7DF):&br;|BGCOLOR(#ACCEE3):&br;|BGCOLOR(#B2B6D6):&br;|BGCOLOR(#CBB2D5):&br;|BGCOLOR(#E3ADD5):&br;|
|ltg|light grayish|明るい・灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(#909090):6|BGCOLOR(#D7A8AF):|BGCOLOR(#D9AEA7):|BGCOLOR(#DABA97):|BGCOLOR(#DAC69C):|BGCOLOR(#A9C29B):|BGCOLOR(#91BBAC):|BGCOLOR(#91ADBB):|BGCOLOR(#91ABBB):|BGCOLOR(#91A8BB):|BGCOLOR(#9191AD):|BGCOLOR(#A997B0):|BGCOLOR(#C19EB4):|
|g|grayish|灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(#707070):5|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|
|dkg|dark grayish|暗い・灰み|BGCOLOR(#D4CD9C):2s|BGCOLOR(#101010):2|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|
|lt|light|浅い|BGCOLOR(#F3D943):5s|BGCOLOR(#E0E0E0):9|BGCOLOR(#FA808E):|BGCOLOR(#FB7F71):|BGCOLOR(#FDB56D):|BGCOLOR(#FFF27B):|BGCOLOR(#B3DE68):|BGCOLOR(#7FC97F):|BGCOLOR(#66C2AE):|BGCOLOR(#66B2CE):|BGCOLOR(#679FCA):|BGCOLOR(#807DB9):|BGCOLOR(#B273B6):|BGCOLOR(#F881AC):|
|sf|soft|浅い・穏やか|BGCOLOR(#F3D943):5s|BGCOLOR(#909090):6|BGCOLOR(#C35F69):|BGCOLOR(#D27863):|BGCOLOR(#D89048):|BGCOLOR(#CCBA48):|BGCOLOR(#B2B141):|BGCOLOR(#66AC78):|BGCOLOR(#4E9789):|BGCOLOR(#528A9D):|BGCOLOR(#51669D):|BGCOLOR(#5D5791):|BGCOLOR(#8C5588):|BGCOLOR(#B34F76):|
|d|dull|鈍い|BGCOLOR(#F3D943):5s|BGCOLOR(#707070):5|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|
|dk|dark|暗い|BGCOLOR(#F3D943):5s|BGCOLOR(#101010):2|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|BGCOLOR(#ABCDEF):|
|b|bright|明るい|BGCOLOR(#FFDF0D):8s|BGCOLOR(#C0C0C0):8|BGCOLOR(#F9344C):|BGCOLOR(#FC4F34):|BGCOLOR(#FF9914):|BGCOLOR(#FFF231):|BGCOLOR(#99D021):|BGCOLOR(#33A65E):|BGCOLOR(#23989A):|BGCOLOR(#2686A6):|BGCOLOR(#386CB0):|BGCOLOR(#6964AD):|BGCOLOR(#A45AAA):|BGCOLOR(#DF4D94):|
|s|strong|明瞭な|BGCOLOR(#FFDF0D):8s|BGCOLOR(gray):5.5|BGCOLOR(#CE0B23):|BGCOLOR(#CC4613):|BGCOLOR(#D9760F):|BGCOLOR(#CCB914):|BGCOLOR(#909E23):|BGCOLOR(#27853F):|BGCOLOR(#2A6F66):|BGCOLOR(#205B85):|BGCOLOR(#223F7F):|BGCOLOR(#341D86):|BGCOLOR(#5F2983):|BGCOLOR(#9A115C):|
|dp|deep|濃い|BGCOLOR(#FFDF0D):8s|BGCOLOR(#303030):3|BGCOLOR(#A1091C):|BGCOLOR(#A10916):|BGCOLOR(#AB521D):|BGCOLOR(#9B8B0E):|BGCOLOR(#518518):|BGCOLOR(#306F42):|BGCOLOR(#095469):|BGCOLOR(#044D6B):|BGCOLOR(#073E73):|BGCOLOR(#28236D):|BGCOLOR(#531460):|BGCOLOR(#740050):|
|v|vivid|冴えた|BGCOLOR(#FFE100):9s|BGCOLOR(gray):5.5|BGCOLOR(#F30827):|BGCOLOR(#F84117):|BGCOLOR(#FF7F01):|BGCOLOR(#FFE600):|BGCOLOR(#99D021):|BGCOLOR(#33A23D):|BGCOLOR(#008678):|BGCOLOR(#055D87):|BGCOLOR(#0B2F7D):|BGCOLOR(#271A86):|BGCOLOR(#6C007E):|BGCOLOR(#A4085A):|
// |~| は無彩色と彩色の境目
明度は適当です。無彩色はタダの色ですね。幾つかは知っていると思います。他にもpやltあたりはパステル調の色ですね。dpは和紙に多そうな落ち着いた色です。
このトーンはさっきの色相名の数字と合わせて色を指定できます。lt-2.5とすると、色相 R と yRの中間色相で浅い色（light）、という事を表せます。
**補色 [#ba98100c]
**色彩調和 [#wa904517]
*** 同系 [#teee699f]
*** 類似 [#i128b6c5]
*** 対照 [#ycb6087f]
**色の錯視 [#u5355a01]
*頻出する色の扱い [#kd7a6a91]
コンピュータ上で色を扱う場合、加法混色か色の3要素を扱うものが多い。最大多数が前者を採用し、グラフィック系ソフトではこれに加えて後者が、DTPや印刷を視野に入れたソフトではさらに減法混色までをサポートするといった構図。
**RGB [#d30c2eb9]
RED, GREEN, BLUEの光の強さを数値にして色を表す。HTML(CSS)での文字色指定などで使われている。~
各色0〜255の値を指定出来るとすると
|R|G|B|color|h
|FF|00|00|&color(red){RED};|
|00|FF|00|&color(lime){GREEN};|
|00|00|FF|&color(blue){BLUE};|
|FF|FF|00|&color(yellow){YELLOW};|
|FF|00|FF|&color(magenta){MAGENTA};|
|00|FF|FF|&color(cyan){CYAN};|
|00|00|00|&color(black){BLACK};|
|80|80|80|&color(gray){GRAY};|
|FF|FF|FF|&color(white){WHITE};|
のように表現できる。
※HTMLでは&color(#00FF00){#00FF00};は&color(green){green};ではなく&color(lime){lime};という扱いになっており、また人間の感覚でも&color(#00FF00){#00FF00};は緑と言うよりも黄緑であり、一般に言う緑は&color(#008000){#008000};である。
**HSV・HSB [#ocb8d674]
色相（Hue）、彩度（Saturation）、明るさ（BrightnessまたはValue）によって色を表す。
色相は赤→黄→緑→青→紫→赤という円環で表現可能であるため、赤を基準とした角度によって0から360までの値で表現されることが多い。
その場合、補色同士は色相の値が180異なる。
彩度は0%から100%までの値で表現する（100%をどの値に当てるかはソフトウェアに依存する）。原色のような鮮やかな色ほど値が大きく、淡い色は値が小さい。白・灰色・黒の無彩色では値は0%となる。
明度も同じく、0%から100%までの値で表現する（100%をどの値に当てるかはソフトウェアに依存する）。値を小さくするほど黒に近づく。
色相（Hue）、彩度（Saturation）、明るさ（BrightnessまたはValue）によって色を表す。~
色相は赤→黄→緑→青→紫→赤という円環（色相環）で表現可能であるため、Hueは赤を基準とした角度によって0から360までの値で表現されることが多い。~
その場合、補色同士は色相環の反対側に位置するため、Hueの値は180異なる。~
Saturationは0%から100%までの値で表現する（100%をどの値に当てるかはソフトウェアに依存する）。原色のような鮮やかな色ほど値が大きく、淡い色は値が小さい。白・灰色・黒のような無彩色では値は0%となる。
Brightnessも同じく、0%から100%までの値で表現する（100%をどの値に当てるかはソフトウェアに依存する）。値を小さくするほど黒に近づくが、値を大きくしても必ずしも白になるわけではない。
[[HSV色空間 - Wikipedia:http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93]]
**HSL [#h4714eec]
色相（Hue）、彩度（Saturation）、輝度（Lightness）によって色を表す。~
HSBとHSVは同じものを指すが、非常に似た体系であるHSLは前述の表色系とは異なるので注意されたい。PhotoshopにはHSB、Paint Shop ProやWindowsのペイントにはHSLのカラーピッカーがそれぞれ採用されているので注意が必要。彩度-明度が四角いのがHSLで三角形なのがHSBと覚えておけばだいたい合ってる。
HSBとHSVは同じものを指すが、非常に似た体系であるHSLは前述の表色系とは異なるので注意されたい。PhotoshopにはHSB、Paint Shop ProやWindowsのペイントにはHSLのカラーピッカーがそれぞれ採用されているので注意が必要。彩度-明度が四角いのがHSLで三角形なのがHSBと覚えておけばだいたい合ってる。~
HSLとHSBの最大の違いは明度の扱い。~
HSLの輝度（Lightness）の値を大きくすると、必ず白に近づいていく。色合いも変化して淡い色になっていく。~
しかしHSBの明度（Brightness）の値を大きくしても、彩度（Saturation）が大きい色の場合は必ずしも白にはならず、色合いを保ったまま明るくなる。~
HSLの輝度（Lightness）の値を大きくすると、必ず白に近づいていく。色合いも変化して淡い色になっていく。見た目に鮮やかな色はLightnessが中間あたりの値となる。~
しかしHSBの明度（Brightness）の値を大きくしても、彩度（Saturation）が大きい色の場合は必ずしも白にはならず、色合いを保ったまま明るくなる。見た目に鮮やかな色はBrightnessが最大値近くになる。
**YCbCr [#w4045323]
輝度信号（Y）と、2つの色差信号（Cb,Cr）を使って表現される色空間。~
映像信号の伝達に用いられたり、JPEGの内部で使用されたり。意外に大活躍ｗ~
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~
[[コンポーネント映像信号 - Wikipedia:http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E6%98%A0%E5%83%8F%E4%BF%A1%E5%8F%B7]]~
Yの計算式においてRGBの定数がすべて異なっているのは、人間の目の視覚特性を考慮しているため（と思われる）。単純にRGBを平均するよりも、見た目で感じる明るさに近い値となる。~
変換式がR、G、Bに関する一次式であることに注意。この点でYCbCrはHSBやHSLとは大きく異なる。
Yの計算式においてRGBの定数がすべて異なっているのは、人間の目の波長ごとの感度を考慮しているためと思われる。単純にRGBを平均するのに比べ、見た目で感じる明るさに近い値を得られる。~
Cb、Crはだいたい色の青み（負の値の場合は黄み）、赤み（負の値の場合は緑み）に対応している。~
人間の目の感度は輝度に敏感な反面、色差にはあまり敏感ではないことを利用し、Yを残してCb、Crの信号だけを間引くことによって見た目の劣化を最小限に抑えて画像データの情報量を削減することが稀によくある。~
[[コンポーネント映像信号 - Wikipedia:http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E6%98%A0%E5%83%8F%E4%BF%A1%E5%8F%B7]]~
**CMYK [#l99f5c47]
印刷用の色空間。~
シアン（Cyan）、マゼンタ（Magenta）、黄（Yellow）、黒（Kuro…ではなくキープレート（Key Plate）からきている）のインクの減法混色によって色を表す。~
シアン、マゼンタ、黄はそれぞれRGBの原色である赤、緑、青の補色にあたる。~
理屈のうえではシアン、マゼンタ、黄を混ぜて黒を作り出せるはずだが、実際にやってみても黒がきれいに出せない。そのため黒を加えてある。~
[[CMYK - Wikipedia:http://ja.wikipedia.org/wiki/CMYK]]
*頻出ではなさそうな色の扱い [#h9ecc6f3]
ちょっとマイナーな表色系たち。
**XYZ [#db30a84d]
表色系の中でとても重要な地位にいて、カラーキャリブレーションや色管理の話では活躍しているのだが…。
*参考ページ [#ba5ac9f5]
日本色彩研究所・日本色研配色体系（PCCS）：http://www.sikiken.co.jp/pccs/
