Webページにおける色の使い方は、まさにサイト全体の印象と性格を決定する大きな要因にも影響します。その意味でも、Webページ作成の設計段階から、色の取り扱いには十分な考慮が求められます。

■ 色の持つ属性

色には、「色相」「明度」「彩度」の３つの属性から定義され、その結果、色のトーン（色調）が成り立ちます。色には互いに相対する補色の関係があります。

■ 色相

「色相」とは色をもつ有彩色の持つ色合いを指します。

例えば、赤の隣りに橙色（オレンジ）というように、近似色を隣り合わせにしていくと、色の輪ができます。これを「色相環」と呼び、色相環上の相対する位置にある色を「補色」といいます。

**補色の関係**
#ff0099	#00ff66

#ff0000	#00ffff

#ff6600	#0099ff

#ffff00	#0000ff

注：色相環の図は正確ではありません。あくまでイメージです。

■ 明度

色には明るさの度合いがあり、それを「明度」と呼びます。基本的には白から黒までのグレースケールを基準として考えられ、白に近づくほど明度は高く、逆に黒に近づくほど明度が低くなります。 RGBのそれぞれに色を混ぜることにより明度が変わってきます。

純色の赤に対する明度は、下記の図のようになります。

明度の表示画像

■ 彩度

彩度とは色の鮮やかさ（色の強さ）の度合いをあらわし、無彩色では彩度がありません。純色の赤、青、緑に白や黒などの無彩色を少しずつ加えていくと色の鮮やかさが薄れていき、彩度は低くなっていきます。純色に近いほど彩度が高いということになります。

これら色の３属性をまとめて、ある色相に関する部分を取り出して、明度、彩度に応じて分類すると、１つの色調（トーン）が浮かび上がってきます。

色調の区別

■ 色を使いこなす

コンピューターのモニターディスプレイでの色表示は「発色」という概念にあります。つまり、Ｒ（赤）、Ｇ（緑）、Ｂ（青）の３つの色の発色の「強さ」で様々な色を表示しています。HTMLでの色コードは1677万色以上もの設定が可能になっていますが、古いパソコンではグラフィックカードが256色しかサポートしていないものがありますので、できることなら Web Safe Color の中から使うことをお奨めします。

例えば、白はＲ、Ｇ、Ｂすべてが最も強い発色をし、黒はすべて発色しないことになります。ある色を白に近づけるには、その色以外の色の発色を強めればいいのです。例えば ■ 赤を白に近づけると、

■ ■ ■ ■ ■ ■ ■ ■ このように変化します。

また、赤の発色を弱めていくと黒に近づくことになります。

■ ■ ■ ■ ■ ■ ■ ■ このように赤の発色が弱くなります。

■ 16進数で発色をコントロール

16進数での記述は、Ｒ２桁、Ｇ２桁、Ｂ２桁の合計６桁の数値で設定します。例えば赤は、#ff0000 という記述になり、最初の２桁が赤の発色の強さを表わし、ff は255を示します。

色の発色は 0～255までの256段階あり、256 X 256 X 256 = 16,772,216色が設定できます。

赤に他の色を加えると城に近づくというのは、#ff0000 ～#ffffff ということです。上記の赤が白に近づく色のコードは、

#ff0000 → #ff3300 → #ff3333 → #ff6600 → #ff6666 → #ff9999 → #ffcccc → #ffffff であらわしています。つまり、赤に緑と青を徐々に加えていることがお分かりになるでしょう。

なお、実際の色の使い方についてはメールマガジン第26号をお読みください。

初版公開日 2002年11月3日

■ 色の基礎知識