Part 1. Let's begin CSS : Appendix A

A.4 Web セーフカラー

 CSS では,多くの場面で色の指定を行う。しかし,表示環境はさまざまで,指定した色が閲覧側で再現される保証はない。そこで利用されるのが,216 色からなる Web セーフカラーである。

色の再現と Web セーフカラー

 色の再現というのは,思いのほか難しい。同じ色でも,照明条件が違えば異なった色に見える。モニタで色を再現するにしても,同じ色指定なのに,色温度やガンマ値が異なれば,違う色に見えてしまう。

 インターネットに接続されているコンピュータの環境が多様であることは,ご存じだろう。先ほど述べた色の再現の困難さがあるのに加え,その出力環境があまりに多彩なのである。

 Web セーフカラーは,送り手と受け手で同じ色になることを保証するものではなくて,送り手と受け手で色指定が変わらないというものである。たとえば,256 色しか出ない表示環境で,そこでは表示できない色指定がされたとする。そうしたら,256 色表示環境は,その色指定を何らかの方法で操作して,表示できるものにするだろう。しかし,Web セーフカラー中の色は,その色指定が変更されない。ただし,前述の,表示装置の特性や見る環境で,別の色になってしまう(見えてしまう)ことはじゅうぶんにありうる。

Web セーフカラー

 Web セーフカラーは,256 色以上の環境で,ブラウザ(特に Internet Explorer と Netscape)で色指定が別の色に置き換わってしまわないとされる 216 色である。1.5 で述べたように,CSS では,色は光の三原色の混合によって指定する。Web セーフカラーでは,光の三原色の赤・緑・青をそれぞれ 6 段階で指定し,6³=216[色] を指定する。すなわち,

  • 6 桁の 16 進数で指定する場合は,光の三原色の強さを表す 2 桁の 16 進数は,00,33,66,99,CC,FF のいずれか
  • 3 桁の 16 進数で指定する場合は,同様に 0,3,6,9,C,F のいずれか
  • 各成分を整数値で指定する場合,0,51,102,153,204,255 のいずれか
  • 各成分を百分率で指定する場合は,0%,20%,40%,60%,80%,100% のいずれか

の組み合わせで色が指定される。以降,ここでは色の指定は 3 桁の 16 進数を使う。

 以下に,Web セーフカラーの見本を掲げる。RGB 表色系では,色は R,G および B の 3 つの軸で表されるが,この見本では,上部の 3 つのボタンで軸を転回することができる。なお,この色見本の閲覧には Flash プレーヤが必要である。

 軸の指定は,次のようになっている。

  • R を軸とした場合,36 色の組の中では R は一定。36 色の組の中で,横軸が G,縦軸が B。
  • G を軸とした場合,36 色の組の中では G は一定。36 色の組の中で,横軸が B,縦軸が R。
  • B を軸とした場合,36 色の組の中では B は一定。36 色の組の中で,横軸が R,縦軸が G。

色見本から色をピックアップする場合には,軸の対応と,多くの場合 R,G,B の順で指定することに気をつけられたい。

 現在,多くの PC の画面では,多くの色を表示できるようになっており,この Web セーフカラーのみに縛られる状況ではなくなっている。しかし,WWW が閲覧される環境はさまざまであり,“微妙な色合い”も再現される保証はない。Web セーフカラーは,今でも,WWW デザインの基本的な知識として,少なからぬ考慮が必要ではあるだろう。