RGBの特徴
絵の具の赤と青をまぜると紫になり、赤と黄色をまぜるとオレンジ色になり、青と黄 色をまぜると緑になるのは、子供でも知っています。印刷等に使われるCMYKカラー は、白い紙の上に、絵の具をつかって色を重ねる延長線上にあるといえます。私達が 普段、目にしている色も大抵は、この反射色です。
反射色：赤く塗られた紙があるとします。 それは明るい所（光の中）では「赤く」 見えます。 しかし暗闇の中（光の無い所）ではその赤い紙は見る事が出来ません。 つまり赤い色とは光が当たった時に赤い色を反射し、それ以外の他の色を吸収する色 と言う事です。 白は全ての光を反射する色、黒は全ての色を吸収する色ということ です青は青い光を反射しその他の光を吸収する色と言う事です。 これが私達が通常 目にしている慣れ親しんでいる「色」です。
しかし、テレビやPCのモニターで使われるカラーRGBは光の3原色を基にしています。 物に当たり反射された色（光）ではなく、色そのものである「光」です。つまり雨上 がりの空に掛る虹のようなものです。 あるいは、真っ暗なステージ上を行き交う 様々な色のスポット・ライトをイメージしてみると理解しやすいと思います。 そし て全てのスポット・ライトが一点に集まって照らしたら、明るい中「光」の中に色の ある世界が現れるます。
RGBを使って思うように色が作れない。なんだか、良く分からないけ ど、赤と緑をまぜると黄色になり、赤と青をまぜるとピンクになる。 それは、色を まぜて増やせば、濃く（暗く）なる絵の具とは逆だからです。 光りが強くなれば強 くなるほど、色は明るくなります。このように光を加えていくことで色を表現する RGBは、加法混色と言います。また、逆に光の一部を吸収し残りの色を反射すること で（光を選んで減らして）色を表現するCMYKは減法混色と言います。
ＣＭＹＫ 色材の三原色 (減法混色)
無色（白）に4色の インクを混ぜて色を作る。
ＲＧＢ 色光の3原色 (加法混色)
無色（黒）に3色の光
を合わせて色を作る。
スポット・ライトの原理
下に、RGBスライダーとCMYKスライダーを並べてみました。どちらも全ての色の値を 「０」にしてあります。全ての色の値を「０」にすると、RGBは表示色が黒になり、 CMYKでは白になります。
CMYKスライダー
RGBスライダー
また、RGBには黒インクや白えのぐも無いので、色度、明度はもちろん、彩度の調整
も赤、緑、青の3色の光の量で調整しなくてはなりません。 つまり、もう少し、く
すんだ燻したような感じの色にしたいと思っても黒を足せばよいとは行かないと言う
事です。
正直言うと、私もRGBは苦手です。(^_^;) ヒヤアセ でも、「苦手だ−！」なんて
言っていても始らないので、どういったものか纏めてみました。
色々なデジタルモード
RGB、CMYK以外にも色を扱うデジタルモードは他にもあります。
HSBこれは人の目の認識にあわせた色のデジタル・モードで、色相、彩度、明 度で表されます。それならHSBで色指定すればいいじゃないか、とも思いますが、出 力する時は、PCやテレビ等のモニターはRGB光りを使って出力され、印刷等はCMYKイ ンクを使って出力されます。そのため実際に出力する際には色のモードをRGBあるい はCMYKに変換しなくてはなりません。
またCMYKとRGBは構成要素が違うため直接変換する事は出来ないのでLabモー ドにしてから変換されなおされています。 サイトを作る時のHTMLの記述はRGBモードです。
ＲＧＢ 色光の3原色 (加法混色)
モニター上で色を表現する発色方式。
R（red） 赤
G（green） 緑
B（blue） 青
各々の色は255がマックス、0を含めて256段階 で計算されま す。
色材の三原色 (減法混色)
プリンターなどのインクを使った色の合成方式。
C (cyan）シアン
M (magenta）マゼンタ
Y (yellow）イエロー
K (black）ブラック
色は光によって発生しますが、これは反射色で「光」があたった 時の任意の色を 反射する印刷用インクの設定のためのモードです。 インクを使った反射色ですか ら、「光」そのものであるRGBよりも、表現できる領域は狭くなります
ＨＳＢ 人の視覚に基づく色の構成定義
H(Hue) 色相
S(Saturation) 彩度
B(Brightness) 明度
この数値はアプリケーションによってまちまちです。例えば、 Photoshop ではH色 相のmaxが360、S 彩度、B明度はパーセントで計算され、MSのofficeではHSB全て255 をmaxとして計算します。つまり現状においてはアプリケーション上でのみ有効な モードです。
PhotoshopとMSofficeのH色相、数値比較
| RGB | ff0000 | ffff00 | 00ff00 | 00ffff | 0000ff | ff00ff |
| Photoshop | 0 = 360 | 60 | 120 | 180 | 240 | 300 |
| MS office | 0 = 255 | 42 | 85 | 127 | 170 | 213 |
因に、物理学では光のスペクトルは波長 [nm]ナノメータで表されます。
スペクトル
| 可視色 | 紫(purple) | 青(blue) | 緑(green) | 黄(yellow) | 橙(orange) | 赤(red) |
| 波長 [nm] | 380-430 | 430-490 | 490-550 | 550-590 | 590-640 | 640-770 |
注）白色の太陽光をガラスのプリズムで各色の光に分解し、更にそれらを合せて 白色の光を合成させルのに成功したのもアイザック・ニュートンです。
Ｌａｂ 色座標に基づくカラーモデル
L(lightness) 明度
a 規格にもとづく色の領域
（aが＋ならば赤、−ならば補色の緑）
b 規格にもとづく色の領域
（bが＋ならば黄色、−ならば補色の青)
Labとは国際標準規格にもとづく色のモードで表現 出来る色の領 域が一番大きく、人間の可視範囲をすべて表現することが可能いと言われています。 異なったOSや機器の間での変換等に使わレてるそうです
カラーピッカー
これはPhoto shopのカラーピッカーですが、任意の色に対して、4つ のモードとHTMLで使う16進数での値を同時に見る事が出来ます。
RGBの基本と計算方法
ウェブ上では色は光の3原色RGBで表されます。左から右に向かって、■R レッド(赤)■G グリーン(緑)、■B ブルー(青)の順番で記述します。
各々の３つの光の値は２桁の16進法(00〜ff)で計算され、16の(2乗)で、256 段階あります。良く見かけると思いますが、「#FFFFFF」「#000000」などですね。
最初左の2桁がR(赤)、真中の2桁がG(緑)、右の2桁がB(青)の光の値を示しています。「#FFFF FF」
左上のカラー・コントローラーを見るとわかるように、3色、256段階(256の3乗)全部で16777216色を表示出来ます。
さらに一番上の列を見ていると、R r G g B b とありますが、大文字で書 かれた列は10進数で言う２桁目で、小文字で書かれた列は1桁目にあたります。
16進数と10進数の対応表です。 参考にどーぞ。
| 10進数 | 16進数 |
|---|---|
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | a |
| 11 | b |
| 12 | c |
| 13 | d |
| 14 | e |
| 15 | f |
| 16 | 10 |
| 17 | 11 |
| 18 | 12 |
| 254 | fe |
| 255 | ff |
| 10進数 | 16進数 |
|---|---|
| 0 | 0 |
| 11 | 17 |
| 22 | 34 |
| 33 | 51 |
| 44 | 68 |
| 55 | 85 |
| 66 | 102 |
| 77 | 119 |
| 88 | 136 |
| 99 | 153 |
| aa | 170 |
| bb | 187 |
| cc | 204 |
| dd | 221 |
| ee | 238 |
| ff | 255 |
「00」は10進数の「0」であり、「ff」は10進数の「255」にあたります。
「0」が光の値が最も小さく、「F」が光の値の最大値です。
「0」から「F」に向かって大きい値となります。
つまり、「#FFFFFF」は全ての光の強さが最大値の255で「白」になります。 また「#000000」は全ての光の強さが0で「黒」になります。
それでは、ここで「いくつかの名前のついた色 」を参照してみます。
左から、色、色の名前、ウェブで使う16進数によるコード、RGBの10進数による値です。
| 色 | 名前 | 16進数 | R | G | B |
|---|---|---|---|---|---|
| ■ | coral | #ff7f50 | 255 | 127 | 080 |
| ■ | aqua | #00ffff | 000 | 255 | 255 |
| ■ | olive | #808000 | 128 | 128 | 000 |
| ■ | rosybrown | #bc8f8f | 188 | 143 | 143 |
| ■ | slategray | #708090 | 112 | 128 | 144 |
| ■ | lightslategray | #778899 | 119 | 136 | 153 |
| ■ | lightgrey | #D3D3D3 | 211 | 211 | 211 |
| ■ | silver | #C0C0C0 | 192 | 192 | 192 |
| ■ | darkgray | #A9A9A9 | 169 | 169 | 169 |
| ■ | gray | #808080 | 128 | 128 | 128 |
| ■ | dimgray | #696969 | 105 | 105 | 105 |
| ■ | black | #000000 | 0 | 0 | 0 |
| ■ | white | #FFFFFF | 255 | 255 | 255 |
ff=255、00=0、69=105、7f=127、80=128、bc=188、77=119、88=136、
99=153、d3=211のように、それぞれの、16進数によるコードは、10進数に置き換えられる事が分かります。
0が最も小さい数字で、Fが最も大きい数字になります。
6桁のコードの一番左「＃RrGgBg」の数が大きければ、赤の光が強い事が分かり、左から3つめ「＃RrGgBb」の数が大きければ緑の光が強い事が分かり、右から2つめ「＃RrGgBb」の数が大きければ青の光が強い事が分かります。
RGBチャンネル
RGBカラーは、それぞれ3つのチャンネルに分解する事が出来ま す。 あるいは、もっと適格な言い方をすると、コンピューターはRGBを独立した要 素と見なして計算しています。そして、その3つの要素を合わせる事によって色を表 現しています。
それではチャンネルの分解例をウェブ セーフカラーのパレットを使って各々の色の値を見てみたいと思います。 左上 がセーフカラーをRGB全ての色ONにして見た場合の色です。以下RGB単独の色だけを チャンネルごとに見た場合です。セーフカラーなので各々の光の強さは6段階です。 白のセルは値「ff」で強さの最大値、黒のセルは値「00」です。
FF
CC
99
66
33
00
FF
CC
99
66
33
00
FF
CC
99
66
33
00
下は2つのチャンネルをオンにした場合です。
