RGBの色の調整
RGBのＨＳＢ(色相(Hue、彩度Saturation、明度Brightness)
人の目が認識する色についての情報は、色相(色合い)、彩度(鮮やかさ)、明度(明るさ)の3つです。 「黄色がかった」「青っぽい」「明るい」「暗い」「くすんだ感じ」なんて言葉はよく使うかとおもいます。 しかし、コンピュータはそういった認識の仕方をしません。 RGBの3つの光の量とバランスで、色相、彩度、明度を表現します。
色相、彩度、明度を切り離して色を見る事は出来ないのですが、理解を深めるために各々に焦点を絞って検証してみます。
RGBの色相
各々の光が単独で100%の強さだった場合。
R(赤)の光だけ100%の強さ「＃ff0000」だと、■
G(緑)の光だけ100%の強さ「＃00ff00」だと、■
B(青)の光だけ100%の強さ「＃0000ff」だと、■
2つの光が100%の強さだった場合。
R(赤) とG(緑)の光が100%の強さ「＃ffff00」だと、■
G(緑)とB(青)の光が100%の強さ「＃00ffff」だと、■
B(青)の光とR(赤) の光が100%の強さ「＃ff00ff」だと、■
これが基礎となる光色の組み合わせです。 3つの光が100%の強さ「＃ffffff」だと、白になります。さらにR(赤) 、G(緑)、B(青)の光の強さを変えて組み合わせてみました。
| 赤の光の強さ | 緑の光の強さ | 青の光の強さ | RGBコードと色 |
| 100% | 0% | 0% | ■■■ ff0000 |
| 50% | 0% | 0% | ■■■ 880000 |
| 100% | 50% | 50% | ■■■ ff8888 |
| 100% | 50% | 0% | ■■■ ff8800 |
| 100% | 100% | 0% | ■■■ ffff00 |
| 50% | 50% | 0% | ■■■ 888800 |
| 50% | 100% | 0% | ■■■ 88ff00 |
| 0% | 100% | 0% | ■■■ 00ff00 |
| 50% | 100% | 50% | ■■■ 88ff88 |
| 0% | 50% | 0% | ■■■ 008800 |
| 0% | 100% | 50% | ■■■ 00ff88 |
| 0% | 100% | 100% | ■■■ 00ffff |
| 0% | 50% | 50% | ■■■ 008888 |
| 0% | 50% | 100% | ■■■ 0088ff |
| 0% | 0% | 100% | ■■■ 0000ff |
| 50% | 50% | 100% | ■■■ 8888ff |
| 0% | 0% | 50% | ■■■ 000088 |
| 50% | 0% | 100% | ■■■ 8800ff |
| 50% | 0% | 50% | ■■■ 880088 |
| 100% | 0% | 100% | ■■■ ff00ff |
| 100% | 0% | 50% | ■■■ ff0088 |
彩度：255 明度：120を基準に、色相を９段階に分けて表にして、 明度を上げたもの、明度を下げたもの、彩度を下げたものを並べてみました。
色相を見るさい注目すべきは、各々の色を構成する３つの光の中で最も強い値の光はどれかという事です。 各々の色の最大値を赤でハイライトしました。 彩度、明度は違っても色相ごとの最大値は４つの表とも同じです。
| 色相 | 16進数コード | R | G | B |
| 0 | ■ff0000 | 255 | 0 | 0 |
| 30 | ■ffb601 | 255 | 182 | 1 |
| 60 | ■98ff01 | 152 | 255 | 1 |
| 90 | ■01ff1f | 1 | 255 | 31 |
| 120 | ■01ffb5 | 1 | 255 | 213 |
| 150 | ■017aff | 1 | 122 | 255 |
| 180 | ■3d01ff | 61 | 1 | 255 |
| 210 | ■f301ff | 243 | 1 | 255 |
| 240 | ■ff015c | 255 | 1 | 92 |
| 色相 | 16進数コード | R | G | B |
| 0 | ■ff9191 | 255 | 145 | 145 |
| 30 | ■ffe091 | 255 | 224 | 145 |
| 60 | ■d2ff91 | 210 | 255 | 158 |
| 90 | ■91ff9e | 145 | 255 | 158 |
| 120 | ■91ffed | 145 | 255 | 237 |
| 150 | ■91c5ff | 145 | 197 | 255 |
| 180 | ■ab91ff | 171 | 145 | 255 |
| 210 | ■fa91ff | 250 | 145 | 255 |
| 240 | ■ff91b8 | 255 | 145 | 184 |
| 色相 | 16進数コード | R | G | B |
| 0 | ■780000 | 120 | 0 | 0 |
| 30 | ■785600 | 120 | 86 | 0 |
| 60 | ■477800 | 71 | 120 | 0 |
| 90 | ■00780e | 0 | 120 | 14 |
| 120 | ■007864 | 0 | 120 | 100 |
| 150 | ■003978 | 0 | 57 | 120 |
| 180 | ■1d0078 | 29 | 00 | 120 |
| 210 | ■720078 | 114 | 0 | 120 |
| 240 | ■78002b | 120 | 0 | 43 |
| 色相 | 16進数コード | R | G | B |
| 0 | ■945c5c | 148 | 92 | 92 |
| 30 | ■94845c | 148 | 132 | 92 |
| 60 | ■7d945c | 125 | 148 | 92 |
| 90 | ■5c9463 | 92 | 148 | 99 |
| 120 | ■5c948b | 92 | 148 | 139 |
| 150 | ■5c7794 | 92 | 119 | 148 |
| 180 | ■695c94 | 105 | 92 | 148 |
| 210 | ■915c94 | 145 | 92 | 148 |
| 240 | ■945c70 | 148 | 92 | 112 |
RGBの明度
光の量が増えれば明くなり、光の量が減れば暗い色になるというのは分かると思いますが、RGBの場合、彩度によって光の量の増減のバランスが変わります。どういうことか分りやすくする為に、同じ色相で彩度を変えた色で2種と彩度の無い色で表を作ってみました。
| 明度 | 16進数コード | R | G | B |
| 0 | ■000000 | 0 | 0 | 0 |
| 30 | ■3C0000 | 60 | 0 | 0 |
| 60 | ■780000 | 120 | 0 | 0 |
| 90 | ■B40000 | 180 | 0 | 0 |
| 120 | ■F00000 | 240 | 0 | 0 |
| 150 | ■FF2020 | 255 | 45 | 45 |
| 180 | ■FF6969 | 255 | 105 | 105 |
| 210 | ■FFA5A5 | 255 | 165 | 165 |
| 240 | ■ffE2E2 | 255 | 225 | 225 |
| 255 | ■ffffff | 255 | 255 | 255 |
| 明度 | 16進数コード | R | G | B |
| 0 | ■000000 | 0 | 0 | 0 |
| 30 | ■2C1010 | 44 | 16 | 16 |
| 60 | ■582020 | 88 | 32 | 32 |
| 90 | ■843030 | 132 | 48 | 48 |
| 120 | ■B04040 | 176 | 64 | 64 |
| 150 | ■C76565 | 199 | 101 | 101 |
| 180 | ■D79191 | 215 | 145 | 145 |
| 210 | ■E7BDBD | 231 | 189 | 189 |
| 240 | ■F7E9E9 | 247 | 233 | 233 |
| 255 | ■FFFFFF | 255 | 255 | 255 |
| 明度 | 16進数コード | R | G | B |
| 0 | ■000000 | 0 | 0 | 0 |
| 30 | ■243C00 | 36 | 60 | 0 |
| 60 | ■477800 | 71 | 120 | 0 |
| 90 | ■6BB400 | 107 | 180 | 0 |
| 120 | ■8FF000 | 143 | 240 | 0 |
| 150 | ■AAFF2D | 170 | 255 | 45 |
| 180 | ■C2FF69 | 194 | 255 | 105 |
| 210 | ■DBFFA5 | 219 | 255 | 165 |
| 240 | ■F3FFE1 | 243 | 255 | 225 |
| 255 | ■FFFFFF | 255 | 255 | 255 |
| 明度 | 16進数コード | R | G | B |
| 0 | ■000000 | 0 | 0 | 0 |
| 30 | ■202715 | 63 | 78 | 42 |
| 60 | ■3F4E2A | 95 | 78 | 42 |
| 90 | ■5F7440 | 95 | 116 | 64 |
| 120 | ■7F9B55 | 127 | 155 | 85 |
| 150 | ■9CB577 | 156 | 181 | 119 |
| 180 | ■B8CA9E | 184 | 202 | 158 |
| 210 | ■D4DFC5 | 212 | 223 | 197 |
| 240 | ■F1F4EC | 241 | 244 | 236 |
| 255 | ■FFFFFF | 255 | 255 | 255 |
| 明度 | 16進数コード | R | G | B |
| 0 | ■000000 | 0 | 0 | 0 |
| 30 | ■10282C | 16 | 40 | 44 |
| 60 | ■205058 | 32 | 80 | 88 |
| 90 | ■307884 | 48 | 120 | 132 |
| 120 | ■40A0D0 | 64 | 160 | 176 |
| 150 | ■65B9C7 | 101 | 185 | 199 |
| 180 | ■91CDD7 | 145 | 205 | 215 |
| 210 | ■BDE1E7 | 189 | 225 | 231 |
| 240 | ■E9F5F7 | 233 | 245 | 247 |
| 255 | ■FFFFFF | 255 | 255 | 255 |
| 明度 | 16進数コード | R | G | B |
| 0 | ■000000 | 0 | 0 | 0 |
| 30 | ■1E1E1E | 30 | 30 | 30 |
| 60 | ■3C3C3C | 60 | 60 | 60 |
| 90 | ■5A5A5A | 90 | 90 | 90 |
| 120 | ■787878 | 120 | 120 | 120 |
| 150 | ■969696 | 150 | 150 | 150 |
| 180 | ■B4B4B4 | 180 | 180 | 180 |
| 210 | ■D2D2D2 | 210 | 210 | 210 |
| 240 | ■F0F0F0 | 240 | 240 | 240 |
| 255 | ■FFFFFF | 255 | 255 | 255 |
明度が最大値255の時はRGB3つの光とも最大値の255で、明度が最小値0の場合RGB3つの光とも最少値の0というのは、表いずれの色相、彩度の時も変わりませんが、 明度の中間値の数を見ると、彩度が高い方が各々の光の強さの差が大きくなるのが分かります。
そして彩度0の表（表7-6）を見るとRGB3つの光とも、いずれの明度の時でも各々同じ値を示しています。各々の光は色相を表現するだけでなく、他の色の明度を補う為でもあるのです。例えて言うなら光の中の影の光です。そして「無彩色の色」を作るにも3色の光が必要と言う事です。
■R(赤)、■G(緑)、■B(青)の光の値(量)が同じ場合を見てみると、その全ての段階において、白、黒または、その中間で色彩のないグレーになります。
■ffffff ■eeeeee ■dddddd ■cccccc ■bbbbbb ■aaaaaa ■999999 ■888888 ■777777 ■666666 ■555555 ■444444 ■333333 ■222222 ■111111 ■000000
RGBの彩度
色合い、明るさを固定したまま「鮮やかさ」のみ変更してみた時の、RGBの数値の移り変わりを見てみたいと思います。
| 彩度 | 16進数コード | R | G | B |
| 255 | ■ff00ff | 255 | 0 | 255 |
| 200 | ■e41ce4 | 228 | 28 | 228 |
| 150 | ■cb35cb | 203 | 53 | 203 |
| 100 | ■b24db2 | 178 | 78 | 178 |
| 50 | ■996799 | 153 | 103 | 153 |
| 0 | ■808080 | 128 | 128 | 128 |
| 彩度 | 16進数コード | R | G | B |
| 255 | ■ffa6f6 | 255 | 165 | 246 |
| 200 | ■f3afee | 245 | 175 | 238 |
| 150 | ■ecb8e7 | 236 | 184 | 231 |
| 100 | ■e4c0e1 | 228 | 192 | 225 |
| 50 | ■dcc9d9 | 219 | 201 | 217 |
| 0 | ■d2d2d2 | 210 | 210 | 210 |
色相、明度が同じで、彩度を変更すると、RGBの光の量はどのように変化したでしょうか？ 彩度が低くなるにしたがい、各々のRGBの光の量の差が縮まり、グレーになった時には3つの光の各々の量は同じになっています。
3つの光の量が同じだと無彩色になるのはこの場合も同様で、RGBで彩度を調整するのにも、3つの光の量の割合で調整します。
ここでは、その理解を助ける為に、
明るいグレー■999999と暗いグレー■333333をサンプルに各々の光の量を調整して色を作ってみてみたいと思います。
こちらのボタンで背景色を変えて発色を見て下さい。
■333333より ■R(赤)の光だけが、多い場合
R(赤)がかなり多い。 ■ff3333
R(赤)が少し多い。 ■663333
■999999より ■R(赤)の光だけが、多い場合
R(赤)がかなり多い。 ■ff9999
R(赤)が少し多い。 ■aa9999
■333333より ■R(赤)の光だけが、少ない場合
R(赤)がかなり少ない。 ■003333
R(赤)が少し少ない。 ■223333
■999999より ■R(赤)の光だけが、少ない場合
R(赤)がかなり少ない。 ■339999
R(赤)が少し少ない。 ■669999
■333333より ■R(赤)と■G(緑)の光が、多い場合
R(赤) とG(緑)の光が、かなり多い。■ffff33
R(赤) とG(緑)の光が、少し多い。■666633
R(赤) がかなり、G(緑)が少し多い。■ff6633
R(赤) が少し、G(緑)がかなり多い。■66ff33
■999999より ■R(赤)と■G(緑)の光が、多い場合
R(赤) とG(緑)の光が、かなり多い。■ffff99
R(赤) とG(緑)の光が、少し多い。■aaaa99
R(赤) かなり、G(緑)が、少し多い。■ffaa99
R(赤) 少し、G(緑)が、かなり多い。■aaff99
■333333 より ■G(緑)の光だけが、多い場合
G(緑)がかなり多い。 ■33ff33
G(緑)が少し多い。 ■336633
■999999より ■G(緑)の光だけが、多い場合
G(緑)がかなり多い。 ■99ff99
G(緑)が少し多い。 ■99aa99
■333333より ■G(緑)の光だけが、少ない場合
G(緑)がかなり少ない。■330033
G(緑)が少し少ない。 ■332233
■999999より ■G(緑)の光だけが、少ない場合
G(緑)がかなり少ない。 ■993399
G(緑)が少し少ない。 ■996699
■333333より ■G(緑)と■B(青)の光が、多い場合
G(緑)とB(青)の光が、かなり多い。■33ffff
G(緑)とB(青)の光が、少し多い。■336666
G(緑)がかなり、B(青)が少し多い。■33ff66
G(緑)が少し、B(青)がかなり多い。■3366ff
■999999より ■G(緑)と■B(青)の光が、多い場合
G(緑)とB(青)の光が、かなり多い。■99ffff
G(緑)とB(青)の光が、少し多い。■99aaaa
G(緑)がかなり、B(青)が、少し多い。■99ffaa
G(緑)が少し、B(青)が、かなり多い。■99aaff
■333333より ■B(青)の光だけが、多い場合
B(青)がかなり多い。 ■3333ff
B(青)が少し多い。 ■333366
■999999より ■B(青)の光だけが、多い場合
B(青)がかなり多い。 ■9999ff
B(青)が少し多い。 ■9999aa
■333333より ■B(青)の光だけが、少ない場合
B(青)がかなり少ない。 ■333300
B(青)が少し少ない。 ■333322
■999999より ■B(青)の光だけが、少ない場合
B(青)がかなり少ない。 ■999933
B(青)が少し少ない。 ■999966
■333333より ■B(青)と■R(赤) の光が、多い場合は
B(青)とR(赤) の光が、かなり多い。■ff33ff
B(青)とR(赤) の光が、少し多い。■663366
B(青)がかなり、R(赤) が少し多い。■6633ff
B(青) が少し、R(赤) がかなり多い。■ff3366
■999999より ■B(青)と ■R(赤) の光が、多い場合は
B(青)とR(赤) の光が、かなり多い。■ff99ff
B(青)とR(赤) の光が、少し多い。■aa99aa
B(青)かなり、R(赤) が、少し多い。■aa99ff
B(青) 少し、R(赤) がかなり多い。■ff99aa
RGBの色調
色調とは明度と彩度を複合した概念、色彩の強弱・濃淡の調子のことです。 つまり、一つの色相に対して彩度と明度を違えた色で、トーンと同じ意味になります。 「もう少し柔かいトーン」で、とか「明るいトーン」でなどはよく聞くと思います。
色別、トーンチャート
4つの彩度の色をサンプルに各々色調（彩度・明度）を変えた図を作ってみました。 横が明度で左から右に明→暗、縦が彩度で上から下に高→低となり、左下の白に向って、彩度が下がるとともに明度が上がり、右下の黒に向って彩度が下がるとともに明度が下がっています。 さらに、各々の中間色も配置しました。
■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
カラーコード・サンプル
参考に、赤の図のカラーコードを表にしてみました。 横列の彩度は同じです。 縦は上から下に向かって彩度下がり、一番下の6行目が無彩色です。 左から右へ白#ffffff〜黒#000000です。一番上が原色の赤#ff0000です。 左1列目上から下に向かって、赤#ff0000〜白#ffffffです。右13列目上から下に向かって、赤#ff0000〜黒#000000です。
| 1列目 | 2列目 | 3列目 | 4列目 | 5列目 | 6列目 | 7列目 | 8列目 | 9列目 | 10列目 | 11列目 | 12列目 | 13列目 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1行目 | ■ f00 |
■ f00 |
|||||||||||
| 2行目 | ■ f33 |
■ e22 |
■ d11 |
■ c00 |
|||||||||
| 3行目 | ■ f66 |
■ e55 |
■ d44 |
■ c33 |
■ b22 |
■ a11 |
■ 900 |
||||||
| 4行目 | ■ f99 |
■ e88 |
■ d77 |
■ c66 |
■ b55 |
■ a44 |
■ 933 |
■ 822 |
■ 711 |
■ 600 |
|||
| 5行目 | ■ fcc |
■ ebb |
■ daa |
■ c99 |
■ b88 |
■ a77 |
■ 966 |
■ 855 |
■ 744 |
■ 633 |
■ 522 |
■ 411 |
■ 300 |
| 6行目 | ■ fff |
■ eee |
■ ddd |
■ ccc |
■ bbb |
■ aaa |
■ 666 |
■ 555 |
■ 444 |
■ 333 |
■ 222 |
■ 111 |
■ 000 |
トーン別、カラー・テーブル
各色相ごとのトーンを見てみましたが、次は、各トーンごとに色相の異なる表を見てみましょう。これは、彩度と明度が同じで色相が異なるということですから、RGBの色相の表6-1〜表6-4の色と同様になります。
横軸が色相の変化を表しています。縦軸が色調（彩度と明度）の変化を表してい ます。
配色する際、同じ色相の色を組み合わせると配色しやすいということが分かると 思います。例えば、青系統の色で統一する等です。また、違う色相を組み合わせる際、色調（彩度と明度）を揃えると配色し やすくなります。例えば、パステル調で統一する等です。
| 色相 | 淡い色合 彩度：230 明度：200 |
明るい色合 彩度：255 明度：180 |
鮮かな色合 彩度：255 明度：120 |
くすんだ色合 彩度：255 明度：60 |
地味な色合 彩度：60 明度：120 |
暗い色合 彩度：100 明度：20 |
|---|---|---|---|---|---|---|
| 0 | ■■■■■ ■■■■■ e5b7b7 |
■■■■■ ■■■■■ ff9191 |
■■■■■ ■■■■■ ff0000 |
■■■■■ ■■■■■ 780000 |
■■■■■ ■■■■■ 945c5c |
■■■■■ ■■■■■ 330000 |
| 30 | ■■■■■ ■■■■■ e5d6b7 |
■■■■■ ■■■■■ ffe091 |
■■■■■ ■■■■■ ffb601 |
■■■■■ ■■■■■ 785600 |
■■■■■ ■■■■■ 94845c |
■■■■■ ■■■■■ 332300 |
| 60 | ■■■■■ ■■■■■ d1e5b7 |
■■■■■ ■■■■■ d2ff91 |
■■■■■ ■■■■■ 98ff01 |
■■■■■ ■■■■■ 477800 |
■■■■■ ■■■■■ 7d945c |
■■■■■ ■■■■■ 305100 |
| 90 | ■■■■■ ■■■■■ b7e5bc |
■■■■■ ■■■■■ 91ff9e |
■■■■■ ■■■■■ 01ff1f |
■■■■■ ■■■■■ 00780e |
■■■■■ ■■■■■ 5c9463 |
■■■■■ ■■■■■ 003305 |
| 120 | ■■■■■ ■■■■■ b7e5dd |
■■■■■ ■■■■■ 91ffed |
■■■■■ ■■■■■ 01ffb5 |
■■■■■ ■■■■■ 007864 |
■■■■■ ■■■■■ 5c948b |
■■■■■ ■■■■■ 005140 |
| 150 | ■■■■■ ■■■■■ b7ceed |
■■■■■ ■■■■■ 91c5ff |
■■■■■ ■■■■■ 017aff |
■■■■■ ■■■■■ 003978 |
■■■■■ ■■■■■ 5c7794 |
■■■■■ ■■■■■ 002251 |
| 180 | ■■■■■ ■■■■■ c1b7e5 |
■■■■■ ■■■■■ ab91ff |
■■■■■ ■■■■■ 3d01ff |
■■■■■ ■■■■■ 1d0078 |
■■■■■ ■■■■■ 695c94 |
■■■■■ ■■■■■ 100051 |
| 210 | ■■■■■ ■■■■■ e2b7e5 |
■■■■■ ■■■■■ fa91ff |
■■■■■ ■■■■■ f301ff |
■■■■■ ■■■■■ 720078 |
■■■■■ ■■■■■ 915c94 |
■■■■■ ■■■■■ 450051 |
| 240 | ■■■■■ ■■■■■ e5b7c6 |
■■■■■ ■■■■■ ff91b8 |
■■■■■ ■■■■■ ff015c |
■■■■■ ■■■■■ 78002b |
■■■■■ ■■■■■ 945c70 |
■■■■■ ■■■■■ 330011 |
人の目が識別出来る色の数は数千万色と言われています。RGBでは約1760万色の色を表現する事が出来ます。しかし 名前のついた色を見れば分かると思いますが、あれだけ沢山の名前を考えて名付けたといっても、1760万色の内のわずか150色にすぎません。 つまり全ての色を言葉で表現する事は難しいという事です。
言葉で色を全て表現出来なくても、色では色々な事を表現出来ます。モニターのなかという限られた世界でも、クールな、かわいい、元気な、楽しい、温かい、優しい、懐かしい色。おしゃべりな色で溢れています。ウェブサイトをデザインする時はコンテンツや機能に左右されて「形」としてのデザインは限られてきますが、配色は自由です。そしてどんな配色にするかによって訪問者にあたえる印象を変えることが出来ます。
