Web Safe Color

Webページをデザインするとき、デザイナーはデザインのクオリティを重視するためか、当たり前のように24ビットトゥルーカラー(またはフルカラー)をサポートしているマシン環境で制作を行っています。しかしながら、そのページを閲覧するユーザー側でも同じような環境で見ているとは限らないのです。

Webが一般化しはじめた初期の頃と違って、最近では一般ユーザ向けのエントリー・パソコンでも16ビットハイカラーや24ビットトゥルーカラー表示が当たり前になってきていますが、数年前のデスクトップマシンやノートパソコンなどでは、8ビットカラーの 256色表示が一般的でした。

Webページ上の色の扱いは、そのような低ビットのカラー環境で表示される場合についてもあらかじめ考慮し、デザインを行うのが理想です。

8ビット環境でのディザリングについて
ディザリングとは、8ビットカラーである 256色の中から色を組み合わせることによって、8ビットカラー環境のモニタでは本来表示できない 256色を超える色を見かけ上作り出す方法です。異なった色のドットを隣り合わせてパターンとしては位置していくと、色が混ざり合って中間色のように見える錯覚を利用します。
赤と青のドット 紫
(青いドットと赤いドットを組み合わせると紫色に見えます。)
8ビットカラー環境では、256色を超える色については、ブラウザが 256色の中の色を使って画像にそのようなディザリング処理を自動的に施すか、または最も近い 256色の中の色に直接置き換えてしまいます。
このとき単色ベタ面を含むイラストやロゴ、単色の背景などは、場合によってはかなり見苦しいディザ処理が行われ、本来グレーのはずの部分がクリーム色に置き換えられてしまったり、黄色いバックグラウンドが真っ白になってしまったりなど、予測のつかない事態が起こります。また HTML内のコードにも、そういった環境では、それぞれ異なった色にずれてしまうことがあります。
Webセーフカラー」と呼ばれる 216色のパレットから色を選んでページを作成すると、低ビットカラー環境のプラットフォームの違いにおいても、画面に表示される色が変化したり見苦しいディザが施されてしまったりすることがほとんどなくなります。
ユーザー環境に左右されにくい安定した表示を考えるなら、Webセーフカラーをベースにしてページを作っておいたほうが無難です。
しかしながら、すべてのデザインを 216色のみを使って制作するのは実際のところ難しいもので、現実的にはページ全体のデザインや画像のクオリティそのものを左右するような大きな単色ベタ面などには、できる限り 216色の Webセーフカラーを使うように気遣いすればいいでしょう。
単色ベタ面を多く含む画像の場合は、特にそういった点に関して注意が必要ですが、写真画像の場合は、フルカラーの画像を8ビットカラー環境で表示するのも、あらかじめ8ビットカラーに減色しておくのも、どちらでも結局ディザを施される結果になるため、Webセーフカラーに減色することはあまり意味をなしません。
写真などでは下手に減色せず、最適化したフルカラーのJPEG画像を、ユーザー側のブラウザのディザリング処理に任せるようにするほうがいいでしょう。
ビット深度と色数の関係
コンピューターのモニタは、ひとつの色のピクセルを表現するために、R(赤)とG(緑)とB(青)という3色の光を用いて、それぞれの色の発光の強度と組み合わせによって「RGBカラー」といわれる混合色を作り出しています。
強度は RGB各色につき 0から 255までの 256段階 (2の8乗) あり、0が完全オフ、255が完全オン状態を示します。RGB3色とも0(完全オフ)であれば黒、RGB3色とも 255(完全オン) であれば白となります。例えば、R (赤) が255の半分の127、G (緑) が0、B (青) が 255であれば、その結果は紫がかった青 (マゼンダ) になります。
光と印刷における色の3原色
光の3原色 絵の具の3原色
コンピューターのモニタで用いられるRGBカラーは、R (赤) と G (緑) と B (青) の3色の組み合わせと、それぞれの色の強弱によってすべての色を作り出します。色を重ねるほど明るくなっていき、最終的には白になります。

これを加法混色といいます。

印刷における色彩表示には、C (シアン)、M (マゼンダ)、Y (イエロー)、K (ブラック) で構成される CMYKカラーが用いられます。これは色を重ねるほど暗くなって、最終的に黒になります。

これを減法混色といいます。

各色の 0〜255までの中間の段階数は、コンピューターがサポートしているビット深度の設定によって決まります。段階数が多い(ビット深度が深い)ほど、RGB各強度と組み合わせのパターン数が増えるので、表示できる色数は多くなります。設定できるビット深度の深さは、マシンが搭載している VRAMの容量によって決まります。
24ビットトゥルーカラーの環境では RGB3色それぞれが 256段階のビット深度を持つので、256の3乗 (2の24乗) の組み合わせによって約1670万色の表現が可能となります。
Webセーフカラーの指定方法
8ビットカラーの 256色のうち、MacintoshWindowsの間で異なる40色のカラーを除いた、プラットフォーム共通の 216色を「Webセーフカラー」(ブラウザ共通色)といいます。あらかじめこの Webセーフカラーのパレットの中から色を選んでページを作成すれば、8ビットカラー環境においてマシンやブラウザによって色が変換されたり、見苦しくディザ処理されることがなくなります。ページの背景やページ上に配置する画像などに用いる色は、できるだけWebセーフカラーの中から選ぶようにしましょう。
HTMLCSS (カスケーディング・スタイルシート) の属性では、色の指定に「#000000」とか「#FFFFFF」といった 16進表記によるカラー指定を行います。これは RGBカラーのR、G、Bのそれぞれに 00(0)〜FF(255)までの 256段階で数値を指定して「#」のあとに RRGGBB の順に2桁づつ、あるいは1桁表示の「#FFF」とか「#000」というように表記し、色を指定する方法です。詳しくは「Webセーフカラー一覧表」をご覧下さい。
その他の色を指定する方法として、HTML 4.0で定義されている「Color Name」があります。例えば赤の「#FF0000」「red」、白の「#FFFFFF」「white」とするように全部で 16色あります。
Webセーフカラー 216色のルールと違い、00、33、66、99、CC、FF以外の組み合わせも含まれますが、それらの色は Windowsの8ビット・システムカラーの 256色のうち、Webセーフカラー以外の残りの40色の中から選ばれていますので、Windows環境であれば8ビットカラーの 256色表示の場合でも正確に色を表示することができます。
Color Names and RGB Code
Black = #000000 Green = #008000
Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia = #FF00FF Aqua = #00FFFF
Internet ExplorerNetscapeなどの Webブラウザでは、それぞれが独自にサポートしている「Color Name」(色名) がありますが、アクセシビリティを考えるとあまりお勧めいたしません。環境によっては正しい色が表示されないなどの弊害があります。


This Page is HTML4.01 Valid! 初版公開日 2002年5月1日   最新更新日 2003年9月9日
Copyright(C) 2002-2008 banban