ウェブカラー

このウェブカラーの記事では、ウェブ等における色の扱い等について解説する。

1. 指定法
------

ウェブコンテンツの視覚的な表現に関して指定するスタイルシートや、Scalable Vector Graphicsにおいて、色を指定する方法はいくつかある。主要な方法としては、十六進でRGBの三ツ組を指定する方法と、色名称で指定する方法がある。詳細は後の節で述べる。

2. 歴史
-----

最初期のMosaicや、続いてNetscape NavigatorなどはどちらもX Window Systemのアプリケーションとして始まったということもあり、色名称としてX11の色名称が流用されていた。その後、インターネット接続環境が一般個人にも広まったが、その当時の一般個人のパーソナルコンピュータのスペックの制限などもあり、色の扱いには気を使う必要がある時代もあった。#ウェブセーフカラーの節で説明する。

3. カラーマネージメント
-------------

パーソナルコンピュータ業界団体によるものとしては、sRGBという比色分析的定義があり、特定の蛍光体の色度、所定の伝達曲線、順応性のホワイトポイント、観察条件などに基づいている。これは一般的なコンピュータのモニタとそれを人間が見る環境に合うように選択されている。しかし、そもそも色再現性という概念が全く一般的には理解されていないため「色が違う」といった苦情が出るなどといったトラブルが後を断たない。

ましてや、加法混合であるディスプレイと減法混合である印刷で、何の調節も管理も無く同じ見栄えが得られる道理などなく、商業レベルのカラーの印刷には、できればカラーマネージメントシステム等が必要であるが、これはコンピュータ中の色表現と印刷という話題であって、ウェブのコンテンツに全く限られない話である。

4. 16進トリプレット表記
--------------

16進トリプレット、16進カラーコードは、先頭に # を前置した後に、色深度がRGBの各色4ビットあるいは8ビットのどれかの色について、16進3桁あるいは6桁で表現するものである。赤・緑・青の順で、16進3桁の各ニブル、あるいは6桁中の各2桁のオクテットが、各成分の0から15あるいは0から255の光度を表現する。0 が真っ暗で、数字が大きいほど明るい。

例えば、赤緑青の光度が、赤は36、緑は104、青は160という色があるとする。それぞれ16進で24、68、A0であり、それを並べて#2468A0となる。1桁の場合は0を前置する。たとえば、4、8、16の場合#040810となる。

なお、3桁のフォーマットはCSSの仕様にはあるが、HTMLの色指定では規格外である。3桁から6桁への拡張は、各桁を繰り返せばよく、例えば09Cなら#0099CCとすればよい。

5. HTMLでの色名称
------------

HTML 4.01仕様では、基本的な色名称を次のように定義している。

ウェブカラーの純色の黄色『Yellow、#FFFF00』■は、レモン色に近い。
ウェブカラーの純色の青『Blue、#0000FF』■は、わずかに紫がかった青色をしていて、群青色に近い。これらの色はHTML 3.0仕様にもsRGBで示されており、「この標準16色はWindowsのVGAパレットでサポートされている」とある。

6. X11の色名称
----------

多くの環境で、X Window Systemと共に普及したX11の色名称に基づいた色名称がサポートされている。これらの色はSVG 1.0で標準化され、SVG Full に対応したユーザーエージェントが受け付ける。

X11製品に付属する色名称一覧ファイルの内容は実装によって差異があり、HTMLでの色名称と食い違いも存在する。さらにX11での定義はsRGBのような特定の色空間を前提としていない単なるRGBとしての定義である。すなわち、X11にある色名称一覧ファイルをそのままウェブ上での色の選択に使うのは好ましくない、とされている。

CSS3仕様でウェブ用の"X11 colors"として定義されている色の一覧を16進と10進の値と共に示す。なお、同じ色で別名が示されているものもある。aquaとcyan、fuchsiaとmagenta、grayと greyである。



7. ウェブセーフカラー
------------

MS-DOS環境のゲームなど、シングルタスク環境であればそのアプリケーションに必要な色のみを選べばよいが、GUI環境のウェブブラウザは任意のタイプの画像を対象とせねばならず、また、任意に必要な色を確保していった場合、ページの途中で足りなくなるといったことも起こりうる。そのためウェブブラウザは、赤緑青の各色について 0, 51, 102, 153, 204, 255の6段階として、6×6×6 の216色をあらかじめ確保しておくものとし、コンテンツ中のそれ以外の色については、最も近い色をあてるか、ディザを施すこととした。残り40色のうち16色はシステム用として、24色程度の余裕があり、ブラウザ自身のボタンのアイコン等のための色に使うこともできる。

X11などではアプリケーション間でカラーパレットを共有するため、ブラウザが使用可能な色は256色よりも少ない場合がある。そのようなシステムではコンテンツ側でウェブセーフカラーを使っていたとしても、さらに減色される。

以上のようにしてデファクトスタンダードとして成立したパレットであり、色彩設計からの観点などは無い。背景に使える明るい色の選択肢が狭い、暗い色同士は区別が難しいものもある、などといった欠点が指摘されている。また、写真などの画像を減色加工する目的等に適しているわけでもなく、イラスト等を描く際に、これらの中にある色を選べば、表示側でそのまま表示される、という目安に過ぎない。

このパレットの出典として、これを「Browser Safe color palette」として著書で紹介したLynda Weinmanの名が提示されていることがある。しかし、前述のように、ブラウザの側の実装がそうなっていた、というのが先であり、Lynda Weinmanの関与は名前を付けただけに過ぎない。著者自身がフォローのための情報をウェブで公開していた。

ウェブセーフカラーの各色に対する標準名称といったものは存在しない。



7.1. カラーテーブル
------------

次の表は、ウェブセーフカラー全216色である。

凡例

下線のある色は、次節で説明する「Reallysafe」な22色。
見出しの「330°」などの数字は、MRYGCBの、それぞれのちょうど中間点となる、色相の値。
F0F - C0Fまでの一列30色は、彩度・明度ともに最大=純色。

7.2. Reallysafe palette
-----------------------

約1600万色のうち256色が使える環境の他に、当時は、16ビットカラーの環境も多かった。David LehnとHadley Sternは、ウェブセーフカラーの216色のうち、16ビットカラーで表示できる22色を the Reallysafe palette と呼んだ。

以下にその22色を示す。また、上の表では、それらの色には下線を引いてある。

※は、「HTML基本16色」のうちの8色。

8. CSSカラー
---------

Cascading Style Sheetsでは、HTML 4仕様と同じ数の色を定義している。またCSS 2、SVGおよびCSS 2.1では//system colors//と呼ばれる色が使えるが、これらの色はオペレーティングシステムのデスクトップで使っている色の値に名前をつけたものである。これらを使うとユーザーのOS環境に合わせた色を使うことができる。2004年現在、CSS3仕様ではこの機能が"depreated"とされているが、今後変更される可能性もある。

CSS3仕様ではまた、スタイルシートにHSL色空間を導入している。

CSSの例 /* RGB model */ p { color: #F00 } /* #rgb */ p { color: #FF0000 } /* #rrggbb */ p { color: rgb } /* integer range 0 - 255 */ p { color: rgb } /* float range 0.0% - 100.0% *//* RGB with alpha channel, added to CSS3 */ p { color: rgba } /* 0.5 opacity, semi-transparent */

/* HSL model, added to CSS3 */ p { color: hsl } /* red */ p { color: hsl } /* green */ p { color: hsl } /* dark green */ p { color: hsl } /* light green */ p { color: hsl } /* pastel green */

/* HSL model with alpha channel */ p { color: hsla } /* green */ p { color: hsla } /* semi-transparent green */ p { color: hsla } /* very transparent green */<WtXmlEndTag />

9. アクセシビリティ
-----------

中には色をサポートしていないウェブブラウザや機器もある。そのような機器や、視覚障害、色覚異常のあるユーザーのため、ウェブコンテンツは色がなくとも使えるようにすることが望ましい。色が表示できないとき、背景と文字が似たような明るさで識別できくなることは避けるべきである。同様にリンクを青で表示することが多いため、背景を青系の色にするとリンクが目立たなくなる。

10. 脚注
------

10.1. 注釈
--------

10.2. 出典
--------

11. 関連項目
--------

色名一覧
CIE Lab色空間

12. 外部リンク
---------

[1]