Webページをデザインするとき、デザイナーはデザインのクオリティを重視するためか、当たり前のように24ビットトゥルーカラー(またはフルカラー)をサポートしているマシン環境で制作を行っています。しかしながら、そのページを閲覧するユーザー側でも同じような環境で見ているとは限らないのです。
Webが一般化しはじめた初期の頃と違って、最近では一般ユーザ向けのエントリー・パソコンでも16ビットハイカラーや24ビットトゥルーカラー表示が当たり前になってきていますが、数年前のデスクトップマシンやノートパソコンなどでは、8ビットカラーの 256色表示が一般的でした。
Webページ上の色の扱いは、そのような低ビットのカラー環境で表示される場合についてもあらかじめ考慮し、デザインを行うのが理想です。
![]() |
![]() |
![]() |
(青いドットと赤いドットを組み合わせると紫色に見えます。) |
HTML
内のコードにも、そういった環境では、それぞれ異なった色にずれてしまうことがあります。![]() |
![]() |
![]() |
コンピューターのモニタで用いられるRGBカラーは、R (赤) と G (緑) と B (青) の3色の組み合わせと、それぞれの色の強弱によってすべての色を作り出します。色を重ねるほど明るくなっていき、最終的には白になります。 これを加法混色といいます。 |
![]() |
印刷における色彩表示には、C (シアン)、M (マゼンダ)、Y (イエロー)、K (ブラック) で構成される CMYK カラーが用いられます。これは色を重ねるほど暗くなって、最終的に黒になります。
これを減法混色といいます。 |
VRAM
の容量によって決まります。Macintosh
と Windows
の間で異なる40色のカラーを除いた、プラットフォーム共通の 216色を「Webセーフカラー」(ブラウザ共通色)といいます。あらかじめこの Webセーフカラーのパレットの中から色を選んでページを作成すれば、8ビットカラー環境においてマシンやブラウザによって色が変換されたり、見苦しくディザ処理されることがなくなります。ページの背景やページ上に配置する画像などに用いる色は、できるだけWebセーフカラーの中から選ぶようにしましょう。HTML
や CSS
(カスケーディング・スタイルシート) の属性では、色の指定に「#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色あります。00、33、66、99、CC、FF
以外の組み合わせも含まれますが、それらの色は Windows
の8ビット・システムカラーの 256色のうち、Webセーフカラー以外の残りの40色の中から選ばれていますので、Windows
環境であれば8ビットカラーの 256色表示の場合でも正確に色を表示することができます。![]() |
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 Explorer
と Netscape
などの Webブラウザでは、それぞれが独自にサポートしている「Color Name」
(色名) がありますが、アクセシビリティを考えるとあまりお勧めいたしません。環境によっては正しい色が表示されないなどの弊害があります。