ホーム » カテゴリー：色彩の基礎知識
カテゴリー：色彩の基礎知識の記事
最初に知識を詰め込むと初めて色彩を学ぶという方には敷居も高く、色彩についての理解すら失ってしまうかも知れません。ここでは必要最低限の色彩の知識を学び、それを元に配色を行っていくことにします。
様々なOS下で同じ色に見えると言われ、長年用いられてきたWebセーフカラーに対する考え方です。
Webセーフカラーとは？
コンピューターの色は現在発売されているOSなどでは8bit（256色）、16bit（65,536色）、24bit（16,777,216色）などのカラーモードを切り替えることが出来ますが、かなり古いマシンなどでは256色しか表示できないようなものが多く存在しました。
そこでNetscape社が8bit以上の環境でホームページを閲覧した時にWindowsとMacといった異なったOSでも表示が左右されない216色を制定しました。これをWebセーフカラーと呼んでいます。これらの色をそのまま使えば、どのような環境で見ても画面は同じように表示されるとされています。
RGB値を16進数で表す時に、00,33,66,99,CC,FFのみを用いて色を作ります。赤・緑・青がそれぞれ6段階ずつあるということで、6×6×6=216で216色という数字になっております。256色からWebセーフカラー216色を引いた残りの40色はOS自体がシステムとして使う色が割り当てられております。
Webセーフカラーは本当に安全？
しかしそのWebセーフカラーも16bit（65536色）の環境では色の表示が異なって見える場合があるということがわかっております。
ややこしい話になるので、ここでは具体的なことは述べませんが、16bit環境で見え方が変わる色と言うのもOSやブラウザによって違うというわけです。あるテストによれば216色のうち、様々な環境で適切に表示されるのは22色であったとされています。（これは2000年の記事に基づくものですが、筆者がテストした結果、現在のブラウザではある程度改善されています。）
つまりWebセーフカラーはセーフカラーではなかったということです。
Webセーフカラーは気にしない
ではWebセーフカラーは無視してもよいのかということですが、誤解を恐れずに書くならば、まったく気にせずともよいと思います。
ページの印象を左右するような大きなベタ塗りの部分にはWebセーフカラーを用いた方がよいというような考え方もありますが、そこまでこだわるべき色が偶然Webセーフカラーにあてはまればよいのですが、現実的には216色のうち、最も彩度が高い色（上記のカラーキューブの一番外側の色）については大きな面積で使用するとまぶしい印象が強く、使用に耐えませんので、実際に使える色はもっと限られてきます。
Webセーフカラーを使わなければ色がずれて見えるという現象も、色が少しずれるのだけで、青が赤に見えるわけではありません。色の表示は作り手だけでなく、閲覧者のモニターの設定やビデオカードなど様々な要因がありますので、Webセーフカラーを使っても同じように見えるということはそもそも不可能なことです。
大切なのはどの環境でも同じように見えることではなく、どのような人でも読みやすくわかりやすいということです。Webセーフカラーを使った配色イメージということで、まぶしく読みにくいサンプルに惑わされたり、縛られたりするよりも、自分の表現したい内容を適切に表現することが出来る色彩設計をした後で、8bitカラーや16bitカラーでもきちんと読むことが出来るかを確認した方が建設的です。
« 隠す
コンピューターにおける色指定は一般的にRGB値によって行われます。そのRGBについての解説です。
パソコンの画面などは光の三原色と呼ばれる赤(red)・緑(green)・青(blue)の組み合わせによって全ての色を再現しています。このような色の決め方をRGBカラーと呼んでいます。光を混ぜ合わせていくので、重なれば重ねるほど明るくなっていき、3色が重なる部分は白になります。
現在のコンピューターではRGBはそれぞれ256段階の値を持っています。つまり256の3乗で16,777,216色を再現することが可能になります。
ホームページで配色する場合はこの256段階を16進数に変換し、最初に#を付けて使います。
大きい面積の原色
上記のRGBのイメージ図を見ていただくと、R:#FF0000 G:#00FF00 B:#0000FFなどは、かなりギラギラとまぶしい感じで見えていると思います。安易に目立たせたいからという理由で#FF0000の赤などを使ってしまうと、逆に読みにくくなったりすることもありそうですよね。
理論上は白が一番光の量が多くなりますので、眼に対する刺激も強いはずですが、心理的なストレスは各色の原色などの方が強くなると感じられているのではないでしょうか？
この先ではこれを回避する方法についても考えていきます。
« 隠す
色彩には大きく分けて色みのある有彩色と、白・黒・灰色など色みを感じない無彩色があります。
有彩色と無彩色
色彩には大きく分けて色みのある有彩色と、白・黒・灰色など色みを感じない無彩色があります。
有彩色は一番左の写真のように赤・青・黄・緑などの色味が感じられる色のことです。無彩色は右の写真のように色味が感じられない白・黒・灰のことを指します。
もちろん中央の写真も有彩色となります。少しでも色みがついていれば有彩色となります。
« 隠す
赤、青、緑と言った色みの違いを表すものです。また類似色相と補色についても説明しています。イメージを決定するのに最も重要な属性です。
色相と色相環
色相とは赤、青、緑のような色味の違いのことを表します。色相はイメージの違いを最も表現することが出来る属性です。
また色相を円上に配置したものを色相環と言います。同じ赤の中でも赤紫に近い赤や橙に近い赤など色々な赤がありますが、ここでは代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相の色相環を作っております。
類似色相
よく似た色相のことを表します。厳密にどこまでを似ているというかは大きな問題ではありませんが、色相環の上の5を基準にすると、3～4と6～7くらいまでを、類似色相として覚えておけばよいでしょう。
補色
この色相環の正反対に位置する色のことを補色と呼びます。補色同士を並べて配置するとお互いに引き立て合って鮮やかに見えます。しかし使いどころを間違えると、まぶしくかえって見えにくくなってしまいます。
« 隠す
色の明るさを表します。文字の読みやすさに直接関わる要素ですので、慎重に扱うことが必要です。
明度とは
明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。
通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします。
明度と読みやすさ
明度は色相、彩度といった他の属性よりも文字の読みやすさに直接影響してきます。文字を読みやすくするためには明度の差を大きく取ることが基本となってきます。情報が読めないとホームページの価値は一気に下がってしまいますので、明度差の取り方には十分注意しながら配色を行うようにします。
« 隠す
色の鮮やかさを表します。派手・地味感を表現するのに使いやすい属性です。
彩度とは
彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。
彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。
« 隠す
HSBカラーモデルは人間の色知覚に基づいたカラーモデルで直感的に色彩を扱えるように出来ております。
HSBとは
HSBカラーモデルとはコンピューター上で扱う色を数値化した物の一つで、色の三属性である色相(Hue)、彩度(Saturation)、明度(BrightnessもしくはValue)を用いて色を指定するものです。マシンやOS、ソフト等によってHSV（VはValue)もしくはHSL（LはLightness)と呼ばれるものもあります。これらは異なるものですが、ここでは同じものと考えても差し支えないでしょう。
このホームページでは呼称をHSBで統一して説明していきます。
Illustrator、PhotoshopとMacでのHSB
これらのソフトとMacでは標準でHSBで色を変える機能がついております。またその他のグラフィックソフトでもHSBを扱える物は数多くありますので、お手持ちのソフトなども一度ご確認下さい。
左側の色空間は横軸に彩度がとられており、右にいくほど彩度が高くなっていきます。縦軸は明度となっております。上に行くほど明度は高くなり、明るくなっていきます。これら2つは0～100%の範囲で調整が可能です。
右側にあるのは色相のバーです。一番下が赤の原色(0°）で、上にいくにつれて橙、黄、黄緑と色相が変わっていき、最後には赤（360°= 0°）に戻ってきます。
注意しなければならないのは明度100%の色が白ではないことです。選ばれた色相と彩度における最も明るい色が100%となりますので、白に近づける場合には彩度を下げながら、明度を上げていくことになります。つまりトーンを移動させて白に近づけていくのと同じ事になります。
« 隠す
HSBの色相は見た目が偏っており、色彩調和論に基づいた配色を理論的に説明することが難しいカラーモデルでもあります。そのHSBの特徴を知ることで配色に活かします。
HSBの色相環
HSBは色相を角度で表しますので、色相環を作ることは非常に簡単です。20色の色相環なら18°ずつ色を変えて色相環を作っていくだけでよいのです。
しかし右の色相環をご覧いただければおわかりのように、HSBの色相には偏りが見られます。aとbはほぼ同じように見えるのに対して、cとdはかなり大きな差があるように感じられます。それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。
HSBの色相環と均等な色相環
ここでは見た目の色の差が均等な色相環を用い、それに基づいて配色を考えていくことにします。これにより色彩調和論に基づいた配色が可能となります。PCCSやマンセルシステムのような知覚的に等間隔な色相環をご存じない方は、下記の表を用いて色相の差を考えていくことにしましょう。ただしモニターなどの閲覧環境やHSBの特性によって必ず正しい色が再現できているるわけでないことをご了承下さい。
色相とHSBの色相値の対応表
| |
HSB |
Windows |
| 赤 |
341-17 |
230-11 |
| 橙 |
18-37 |
12-25 |
| 黄 |
38-60 |
26-40 |
| 黄緑 |
61-113 |
41-76 |
| 緑 |
114-165 |
77-110 |
| 青緑 |
166-181 |
111-121 |
| 青 |
182-202 |
121-135 |
| 青紫 |
203-259 |
136-172 |
| 紫 |
260-310 |
173-208 |
| 赤紫 |
311-341 |
209-229 |
« 隠す
WindowsではOSのみでHSBカラーモデルを扱うことが出来ません。それを可能にするフリーソフトをご紹介いたします。
「FE – Color Palette」のご紹介
Windowsをお使いの方で、HSBを扱うことの出来るグラフィックソフトをお持ちでない方は、何らかのソフトを用意してHSBを扱える環境を整える必要があります。
他のソフトでも可能ですが、「FE – Color Palette」という非常に優秀なソフトがフリーソフトとして配布されておりますので、こちらを利用して配色を進めていくことをおすすめいたします。
Windowsの「色の編集」パネル
Windowsの「色の編集」パネルは色合い（色相:0-239）、鮮やかさ（彩度:0-240）、明るさ（明度:0-240）で色を決めることになります。こちらでも色の三属性による配色は可能ですが、HSBとWindowsの色の編集パネルでは明度と彩度の扱い方が違いますので、注意が必要です。
« 隠す
トーンの概念を知れば配色が格段に行いやすくなります。
トーンとは明度と彩度の複合概念
※今までに色彩を学習したことのある方でPCCS（日本色研配色体系）やCCIC（商工会議所カラーコーディネーションチャート）のトーン表をお持ちの方は、このページに掲載しているトーン表は見ずに、そちらの方をご覧下さい。PCCSのトーン表の掲載は著作権の侵害となりますので、このウェブサイトでは独自でHSBを使ったトーン表を作成したことをご了承の上下さい。
トーンとは日本語で色調のことで、明度と彩度を複合した概念です。まずは下のトーン表をご覧下さい。同じトーン同士で配色をまとめると明度、彩度が近い色が集まるため、調和しやすくなります。
HSBを使い、SとBを変えずにHだけを動かせばトーンが出来ます。ここでは便宜上、彩度の段階を4つに分けておりますが、他の数値でも全く問題はありません。ご自分のイメージに近いトーンを作り出してから配色を考える方法もありますので、一度トーンの作成をお試し下さい。
明度、彩度が100のトーン
明度と彩度が共に100の場合は原色となります。派手なイメージが表現できますが、このまま使用して配色するとまぶしくて目が疲れる配色となる可能性がありますので、なるべく使わないようにすると、妙に華美でうさんくさい配色から一歩遠ざかることが出来ます。
« 隠す
▲このページの先頭に戻る
