CSS3色モジュール

W3C勧告候補平成15年5月14日

この版:

http://www.w3.org/TR/2003/CR-css3-color-20030514

最新の版:

http://www.w3.org/TR/css3-color

前の版:

http://www.w3.org/TR/2003/WD-css3-color-20030214

編者:

Tantek Çelik (Microsoft Corporation) <tantekc@microsoft.com>

Chris Lilley (W3C) <chris@w3.org>

追加の作者:

Steven Pemberton (CWI) <steven.pemberton@cwi.nl>

Brad Pettit (Microsoft Corporation) <bradp@microsoft.com>

この翻訳の版:

http://zng.info/specs/2003/CR-css3-color-20030514.html

最新の翻訳の版:

http://zng.info/specs/css3-color.html

前の翻訳の版:

なし

訳者:

鉄野正夫・平野貴仁

Copyright © 2003 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.

摘要

CSS(段階スタイルシート)は、画面上、紙面上、音声などでのHTML及びXMLの文書のレンダリング方法を記述するための言語である。文書の要素に色をつけるには、色に関する特性及びそれぞれの値を使う。この規定はCSS水準3に提案される特性及び値を説明する。CSS水準2の特性及び値を包含し、拡張する。

この文書の状態

この規定は、将来のCSS水準3(CSS3)に向けた規定のモジュールの一つである。CSS1及びCSS2にすでに存在している色に関する特性及び値を説明するだけでなく、同じように、CSS3向けの新しい特性及び値も提案する。作業グループは、CSS3のすべての実装が、すべての特性及び値を実装することを期待しない。代わりに、おそらくいくつかのCSS3の変形、いわゆる"プロファイル"を作ることになる。例えば、32ビット色の利用者エージェント向けのプロファイルのみが、提案される色に関する特性及び値のすべてを含むことになるだろう。

規定は、次の勧告及び作業ドラフトの関連する部分の統合及びいくつかの新しい機能の追加の結果である。

• HTML 4.01 [HTML401]
• CSS 2.0 [CSS2]
• SVG 1.0 [SVG10]
• CSS3用色プロファイル(平成11年6月22日)[CSSICCPROF]
• CSS3用利用者インタフェース(平成12年2月16日)[CSSUI]

この規定は、CSS作業部会(スタイル作業の一部、要約を参照)によって、W3C勧告候補として提案されている。この文書は、平成15年2月14日付け最終作業ドラフトの改訂版であり、最終レビューの間に受け取った提案、実装者による意見及びW3CのCSS作業部会の更なる検討を盛り込んでいる。

すべての人に、この規定をレビューし、実装し、(アーカイブされた)公開メーリングリストwww-style(使用説明書を参照)に意見を送付することを奨励する。W3Cの会員はCSS作業部会に直接意見を送付することもできる。

この文書の最新版を見つけるには、上の"最新の版"のリンクをたどるか、W3C技術報告の一覧を訪ねてください。

この規定がCR期間を終えるには、次の条件が満たされなくてはならない。

1. 色モジュールのすべての機能に対する、少なくとも二つの相互利用可能な実装がなければならない。

   この基準の目的上、次の用語を定義する。

   機能

   色モジュールの中の節や小節

   相互利用可能

   色モジュールのテストスイートのそれぞれのテストケースに、または、実装がウェブブラウザでないなら同等のテストに合格すること。そのような利用者エージェント(UA)が相互利用可能性を主張するために使われることになれば、テストスイートの中の該当するテストにはそれぞれ、同等のテストが作成されるべきである。加えて、そのようなUAが相互利用可能性を主張するために使われることになれば、相互利用可能性を目的として同じように同等のテストに合格する、一つ以上の追加のUAがなければならない。同等のテストは、同等のレビューの目的上、一般に入手可能としなければならない。

   実装

   次のことを満たす利用者エージェント

   1. 機能を実装する。
   2. 入手可能である(すなわち、一般にダウンロード可能であるか、ほかの販売機構の公開ポイントを通して利用可能である)。これは、"証拠"を確かめる要件である。
   3. 出荷している(すなわち、開発版、非公開版、非公式版は不十分である)。
   4. 実験的なものでない(すなわち、幅広い利用者を対象とし、日常的に利用できる)。

2. 最低限の6ヶ月のCR期間が経過していなければならない。どんな残っている大きな誤りも見つけられるよう十分な時間が与えられることが保証される。

CSS作業グループは、この文書がすべての最終の意見に対応し、安定していると考えることができると考えている。まだ作業部会によって更新されることがありうるが、その意味するところを明確にするだけのためである。もし、予想外に重大な問題が見つかれば、作業ドラフトの状態に戻される。そうでなければ、終了基準が満たされればすぐに前進して勧告案となる。どちらの場合も、勧告候補段階の継続期間は少なくとも6ヶ月になる(平成15年4月 - 平成15年10月).

CSSに関する特許情報開示は、作業グループの特許情報開示ページ上で参照できるだろう。

現在のW3C勧告とほかの技術文書の一覧は、http://www.w3.org/TRで参照できる。

目次

• 1. 導入
• 2. 依存
• 3. 色特性
  • 3.1. 前景色:'color'特性
    • 3.1.1. ガンマ補正
  • 3.2. 不透明度:'opacity'特性
  • 3.3. ICC色プロファイル:'color-profile'特性
  • 3.4. 'rendering-intent'特性
  • 3.5. '@color-profile' @規則
• 4. 色の単位
  • 4.1. HTML4の色のキーワード
  • 4.2. 数値の色の値
    • 4.2.1. RGBの色の値
    • 4.2.2. RGBAの色の値
    • 4.2.3. 色のキーワード'transparent'
    • 4.2.4. HSLの色の値
      • 4.2.4.1. HSLの例
    • 4.2.5. HSLAの色の値
  • 4.3. SVGの色のキーワード
  • 4.4. 色のキーワード'currentColor'
  • 4.5. CSSシステム色
    • 4.5.1. CSS2システム色
    • 4.5.2. 'flavor'システム色
  • 4.6. 色を使う上での注意
• 5. (X)HTML向けスタイルシート例
• 6. プロファイル
• 7. テストスイート
• 8.貢献者
• 9. 参考文献
  • 9.1. 規定
  • 9.2. 参考
• Index
• Property index

1. 導入

CSS3は、規定を簡略化し、実装者がその実装に適当な特定のモジュールを柔軟にサポートできるようにするために、分けられプロファイル化されたモジュールの集合である。

このモジュールは、作者が前景色と要素の不透明度を指定することができるようになるCSS特性を説明する。追加の特性により、ICC色プロファイル及び画像内容のレンダリングインテントを指定できるようになる。また、このモジュールは、CSS<color>値型を詳細な説明も行う。

2. 依存

このCSS3モジュールは、次のほかのCSS3モジュールに依存している。

• CSS3構文
• CSS3値と単位

次のCSS3のモジュールは、このモジュールに依存している。

• CSS3背景
• CSS3ボーダー
• CSS3ボックスモデル
• CSS3基本利用者インタフェース

3. 色特性

3.1. 前景色:'color'特性

この特性は、要素のテキスト内容の前景色を記述する。加えて、色の値を受け入れるどのほかの特性にも潜在的間接値(currentColor)を与える。'currentColor'キーワードが'color'特性そのものに指定されれば、'color:inherit'として扱われる。

ライムグリーンを指定するのに異なった方法がある。

em { color: lime }               /* 定義済みの色名 */
em { color: rgb(0,255,0) }       /* 0-255の範囲のRGB   */

<color>

次に続く節で定義される色単位

attr(<identifier>,color)

この関数は、選択子の対象への属性<identifier>の値を色として返す。属性の値は、CSS処理系によって解析される。選択子の対象が属性<identifier>を持っていなければ、あるいは属性<identifier>が妥当な<color>でなければ、値はキーワード'inherit'として扱われる。大文字・小文字の区別は、属性名の文書言語に依存する。注意。CSS3では、選択子のほかの要素への属性値を参照することはできない。注意。"attr()"関数の2番目のパラメータはリテラルなキーワードである。

色を設定するのにbody要素上の'text'属性を参照するには、次のようにすればよい。

body { color: attr(text,color); } /* 'text'属性を用いる */

3.1.1. ガンマ補正

ガンマの課題に関する情報については, PNG規定([PNG1.0])のGamma Tutorialを参照されたい。

ガンマ補正の計算では、CRTに表示するUAは理想的なCRTを想定してよく、ディザ化によって生じる見かけのガンマへの影響を無視してもい。すなわち、現プラットフォームで行わなければならない最小処理は、次のとおり。

MS-Windowsを使用するPC

なし

X11を使用するUnix

なし

QuickDrawを使用するMac

ガンマ1.45[ICC32]を適用。ColorSync-savvyアプリケーションは、正確な色補正を実行するために，単にsRGB ICCプロファイルをColorSyncに渡すだけでよい。

Xを使用するSGI

/etc/config/system.glGammaValからのガンマ値を適用。デフォルト値は1.70とする。Irix 6.2以降で動作するアプリケーションは，単にsRGB ICCプロファイルを色管理システムに渡すだけでよい。

"ガンマを適用"とは、OSで処理される前に、つのR、G及びBのそれぞれがR'=R^gamma, G'=G^gamma, B'=B^gammaに変換されなければならないことを意味する。

これは、ブラウザの起動の都度、256要素の照合表を次のとおり構築することによって、迅速に実行してもよい。

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

この処理によって，色属性ごとの面倒な数学的処理の実施を，1画素当りはるかに小さいものとすることができる。

3.2. 不透明度:'opacity'特性

不透明度は、概念的には後処理操作と考えることができる。概念的には、要素(その子も含む)がRGBAオフスクリーンイメージにレンダリングされた後、不透明度の設定がオフスクリーンレンダリングを合成して、現在の複合レンダリングとする。

<alphavalue>

構文的には、<number>である。均一の不透明度設定がオブジェクト全体に適用される。0.0(完全に透明)から1.0(完全に不透明)の範囲の外の値はどんな値もこの範囲に丸められる。オブジェクトが包含要素であれば、効果は、それぞれのピクセルのマスクの値が<alphavalue>であるマスクを用いた現在の背景と、包含要素の内容が、合成されたかのようになる。

3.3. ICC色プロファイル:'color-profile'プロパティ

この特性により、デフォルトでないソース色プロファイルを指定できる。

auto

これはデフォルトの振る舞いである。内容データの中でより的確な組み込みプロファイルが指定されれば、すべての色はsRGB色空間の中で定義される。データに組み込まれたプロファイルがある画像に対しては、そのプロファイルが用いられる。プロファイルがない画像に対しては、そういった画像の色が、CSS及びHTMLで指定された色と"同期して"保持されるように、sRGBプロファイルが用いられる。

sRGB

ソースプロファイルがsRGBと想定される。これは、画像中の組み込みプロファイルを上書きする点で、autoと異なっている。CSSの字句走査及び解析規則と一貫させるため、大文字・小文字の区別はないが、一般の工業的慣習と一貫させるために,、大文字及び小文字の混合"sRGB"が用いられることが推奨される。

<name>

利用者エージェントの色プロファイル記述データベースの中にあるあらかじめ定義された色プロファイルと一致する名前。利用者エージェントは、名前記述子が<name>と一致し、かつ見つかった最後の色プロファイル記述エントリを色プロファイル記述データベースから検索する。一致が見つかれば、一致するプロファイル画像内の組み込みプロファイルを上書きする。一致が見つからなければ、画像内の組み込みプロファイルが用いられる。

<uri>

標準ICCプロファイルリソースの場所。ちょうどsRGBを指定したときのように、組み込みプロファイルを上書きする。

/* たとえ画像が組み込みプロファイルを含んでいても
   指定されたプロファイルを用いる */
IMG { color-profile: url("http://example.com/profiles/eg.icm") }

3.4. 'rendering-intent'特性

この特性により、デフォルトでない色プロファイルのレンダリングインテントを指定できる。auto又はinheritでない値の振る舞いは国際色彩協会標準[ICC32]によって定義される。

auto

これはデフォルトの振る舞いである。利用者エージェントは、内容に基づく最善のインテントを決定する。組み込みプロファイルを含む画像の内容に対しては、プロファイルの中で指定されるインテントが望まれるインテントであると想定されるべきである。そうでなければ、利用者エージェントは、現在のプロファイル(color-profileスタイルに基づく)を使用し、プロファイルそのものに記録されているだろうどんなインテントも上書きして、そのインテントを強制するのがよい。

3.5. '@color-profile'@規則

SVG 1.0は、color-profile及びrendering-intent特性をグループ化する手段として、@color-profile@規則を導入した。

@color-profile規則は、色プロファイルの記述を指定するのに使うことができる。一般的な形式は、次のようなものである。

@color-profile { <color-profile-description> }

ここで、<color-profile-description>は、次のような形式である。

descriptor: value;
[...]
descriptor: value;

それぞれの@color-profile規則は、暗示的に又は明示的にそれぞれの色プロファイルの記述子に値を指定する。規則の中で明示的な値を与えられない記述子は、この規定の中のそれぞれの記述子のところに記載されている初期値をとる。この記述子は、定義される@color-profile規則の内容の中にだけ適用され、文書言語の要素には適用されない。したがって、どの要素に記述子が適用されるのか、あるいは、値が子要素に継承されるかどうかは、考えなくてよい。

次のものは、<color-profile-description>に対する記述子である。

<name>

'color-profile'特性の値となることができる名前。<name>が与えられなければ、与えられた色プロファイル記述子を参照することは不可能であることに注意すること。名前"sRGB"は定義済みである。<name>が"sRGB"に設定された色プロファイルの記述子は、どんな記述子も無視される。

sRGB

ソースプロファイルは、sRGB色空間とする。CSSの字句走査及び解析規則と一貫させるため、キーワード"sRGB"に大文字・小文字の区別はないが、一般の工業的慣習と一貫させるために、大文字及び小文字の混合"sRGB"が用いられることが推奨される。

<local-profile>

ソースプロファイルは、ローカルに記録されたプロファイルとする。<local-profile>の規則は、次のものとする。

"local(" + <string> + ")"

ここで、<string>は、国際色彩協会によって指定されるプロファイルの一意IDとする。(注意。プロファイル記述フィールドは、プロファイルの一意IDを表現してはいない。現在のICCの提案では、プロファイルの一意IDはプロファイルのヘッダの中のMD5エンコードされた値である。)

<uri>

ソースプロファイルは、色プロファイルへのURI参照とする。

(<local-profile> <uri>)

二つのプロファイルが指定される。もし<local-profile>がローカルシステム上に見つからなければ、<uri>が使われる。

'rendering-intent'特性の説明を参照のこと。

4. 色の単位

<color>は、キーワード又は数値RGB指定のいずれかとする。

4.1. HTML4色キーワード

HTML4のキーワードの色のリストは、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white及びyellowである。色名は、大文字・小文字を区別しない。

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

4.2. 数値の色の値

4.2.1. RGBの色の値

RGB色モデルは数値色指定に使われる。次の例はすべて同じ色を指定している。

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      /* 0 - 255の範囲の整数 */
em { color: rgb(100%, 0%, 0%) } /* 0.0% - 100.0%の範囲の浮動小数 */

16進記法のRGB値のフォーマットは、'#'で始まり，その直後に3桁又は6桁の16進数が続くものとする。3桁の数字のRGB記法(#rgb)は、ゼロを付加するのではなく、数字を重複させることによって、6桁の形式(#rrggbb)に変換される。例えば、#fb0は#ffbb00に展開される。これによって、確実に白(#ffffff)は短い記法(#fff)で指定でき、ディスプレイの色ビット幅への依存性が除去される。

関数的記法でのRGB値のフォーマットは、'rgb('で始まり，これに三つの数値(三つの整数値又は三つのパーセント値のいずれか)をコンマで区切ったリストが続き、さらに')'が続くものとする。整数値255は100%に対応し、16進記法でのF又はFFに対応する。すなわち，rgb(255,255,255) = rgb(100%,100%,100%) = #FFFである。空白文字が、数値の前後にあってもよい。

すべてのRGB色は、sRGB色空間で指定される([SRGB]参照)。利用者エージェントがこれらの色を表示する正確さは一律でなくともよいが、sRGBを使用することによって、その色が何かという、あいまい性のない客観的に測定可能な定義が提供され、国際規格への関係付けが可能となる([COLORIMETRY]を参照)。

装置の全色域外の値は，切り取るほうがよい。red，green及びblueの値は，装置がサポートする範囲内にあるように変更されなければならない。全色域がsRGBと同じである典型的なCRTモニタに対しては，次の三つの規則は等しい。

em { color: rgb(255,0,0) }       /* 0 - 255の範囲の整数 */
em { color: rgb(300,0,0) }       /* rgb(255,0,0)に切り取られる */
em { color: rgb(255,-10,0) }     /* rgb(255,0,0)に切り取られる */
em { color: rgb(110%, 0%, 0%) }  /* rgb(100%,0%,0%)に切り取られる */

4.2.2. RGBAの色の値

RGB色モデルは、色の不透明度を指定できるようにするため、'alpha'を含むようにこの規定の中で拡張される。この例は、すべて同じ色を指定している。

em { color: rgb(255,0,0) }      /* 0 - 255の範囲の整数 */
em { color: rgba(255,0,0,1)     /* 同じ。明示的に不透明度が1となっている */
em { color: rgb(100%,0%,0%) }   /* 0.0% - 100.0%の範囲の浮動小数 */
em { color: rgba(100%,0%,0%,1) } /* 同じ。明示的に不透明度が1となっている */

RGB値と違い、RGBA値には16進記法がない。

関数的記法でのRGBA値のフォーマットは、'rgba('で始まり，これに三つの数値(三つの整数値又は三つのパーセント値のいずれか)をコンマで区切ったリストが続き、<alphavalue>が続き、さらに')'が続くものとする。整数値255は100%に対応し、16進記法でのF又はFFに対応する。すなわち、rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8)である。空白文字が，数値の前後にあってもよい。

次の例は、新しいrgba()記法で可能になった新しい効果を指定している。

p { color: rgba(0,0,255,0.5) }        /* 半透明な均一な青 */
p { color: rgba(100%, 50%, 0%, 0.1) } /* 透明度の高い均一なオレンジ */

注意。RGBA値が利用者エージェントにサポートされていなければ、CSSの前方互換解析規則ごとに認識できない値のように扱われるべきである。RGBA値は、単に不透明度が無視されたRGB値として扱われてはならない。

4.2.3. 'transparent'色キーワード

CSS1は、background-color特性に'transparent'の値を導入した。CSS2は、border-colorも'transparent'の値を受け入れられるようにした。Open eBook(tm) Publication Structure 1.0.1 [OEB101]は、'color'特性も'transparent'キーワードを受け入れられるように拡張した。CSS3は、<color>の値を受け入れるすべての特性で使えるようにするために、色の値を'transparent'を含むように拡張する。これにより、CSS3でのそういった特性の定義を簡略化する。

transparent

完全な透明。このキーワードは計算値であるrgba(0,0,0,0)の簡略記述と考えることができる。

4.2.4. HSLの色の値

CSS3は、数値のRGBの色を補足するものとして、数値の色相・彩度・明度(HSL)の色を加える。RGB色には次の制限があることが観察されている。

• RGBはハードウェア志向である。CRTの使用を反映したものである。
• RGBは直感的ではない。人々はRGBを使用する方法を学ぶことができるが、実際には、色相、彩度及び明度、又は類似のものを、RGBに変換する方法を習得することによって学ぶのである。

いくつかほかにもも可能な色のスキームがある。HSLの利点は、明暗に対称性があり(例えば、HSVの場合では、ない)、HSLをRGBに変換するのが平易であることである。

HSLの色は、三つ一組の数値(色相、彩度、明度)でエンコードされる。色相は色相環(すなわち、円形に表現された虹)の角度として表現される。この角度は、典型的に度で測られるので、単位はCSSでは暗黙的とし、構文的には<number>が与えられる。定義によると、red=0=360であり、ほかの色は、円周上に広がっているので、green=120、blue=360などとなっている。角度として、-120=240及び480=120のように暗黙的に丸められる。実装が角度xを範囲[0,360)に標準化する一つの方法は、((x mod 360) + 360) mod 360)を計算することである。彩度や明度はパーセントとして表現される。100%は最大の彩度であり、0%は灰色の陰である。0%の明度は黒であり、100%の明度は白であり、50%の明度は'normal'である。

それゆえ、例えば、

* { color: hsl(0, 100%, 50%) }   /* 赤 */
* { color: hsl(120, 100%, 50%) } /* 緑 */ 
* { color: hsl(120, 100%, 25%) } /* 薄緑 */ 
* { color: hsl(120, 100%, 75%) } /* 深緑 */ 
* { color: hsl(120, 50%, 50%) }  /* パステルグリーンなど */

RGBにHSLが勝る点は、はるかに直感的だということである。欲しい色を推測し、それから微調整することができる。色に一致するセットを作るのも容易である(色相を同じままにして、明度/暗度や彩度を変えることによって)。

HSLをRGBに変換するアルゴリズムは単純である(ここでは、テーブルを生成するのに使われるABC[ABC]で表現した)。次のアルゴリズムでは、三つの値(H、SとL)がすべて割合0..1に標準化されている。

    HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h): 
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1

4.2.4.1. HSLの例

下の表は、それぞれ一つの色相を表現している。赤、黄、緑、シアン、青、マゼンタと、その中間色すべて(最後のは、マゼンタと赤の間の色)という、12の均等に間隔をあけた色(すなわち、30¡間隔)が、色相環から選ばれている。

それぞれの表のX軸は彩度(100%、75%、50%、25%、0%)を表現している。

Y軸は明度を表現している。50%は'normal'である。

4.2.5. HSLAの色の値

ちょうど'rgb()'関数的記法が、対応するアルファのある関数的記法'rgba()'を持っていたように、'hsl()'関数的記法は、対応するアルファのある関数的記法'hsla()'を持っている。次の例は同じ色を指定している。

em { color: hsl(120, 100%, 50%) }     /* 緑 */
em { color: hsla(120, 100%, 50%, 1) } /* 同じ。明示的に不透明度が1となっている */

関数的記法でのHSLAの色の値のフォーマットは、'hsla('で始まり、これに度での色相、パーセントでの彩度及び明度及び<alphavalue>が続き、さらに')'が続くものとする。

次の例は、新しいhsla()記法で可能になった新しい効果を指定している。

p { color: hsla(240, 100%, 50%, 0.5) } /* 半透明の均一な青 */
p { color: hsla(30, 100%, 50%, 0.1) }  /* 透明度の高い均一なオレンジ */

4.3. SVG色キーワード

下の表は、一般的なブラウザによってサポートされているX11色[X11COLORS]とSVG 1.0から加わったgray/greyの変異形のリストを与える。結果のリストはSVG 1.0色キーワード名とまったく同じである。左の二つの色の区画により、二つの方法での表のセルの背景色の設定を例証している。最初の列は色名を使い、2番目の列はそれぞれの数値の色の値を使っている。

4.4. 'currentColor'色キーワード

CSS1及びCSS2は、'border-color'特性の初期値を'color'特性の値と定義したが、相当するキーワードを定義しなかった。この脱落はSVGによって認識され、したがって'fill'、'stroke'、'stop-color'、'flood-color'、'lighting-color'に対しSVG1.0は'currentColor'の値を導入した。CSS3は、<color>の値を受け入れるすべての特性で使えるようにするために、色の値を'currentColor'キーワードを含むように拡張する。これは、CSS3におけるそういった特性の定義を簡略化する。

currentColor

'color'特性の値。'currentColor'キーワードの計算値は、'color'特性の計算値である。もし'currentColor'キーワードが'color'特性そのものに設定されれば、解析時に'color:inherit'として扱われる。

4.5. CSSシステム色

4.5.1. CSS2

推奨しない。あらかじめ定義された色値をテキスト、背景等に割り当てることができる以外に、CSS2により、文書作成者は利用者の図形環境に統合するという方法で、色を指定することができる。

システムに対応する値がない場合は、最も近似するシステム属性又はデフォルト色に指定値を対応付けるのがよい。CSSのプロファイルにはシステム色をまったくサポートしないものもあるであろうことに注意すること。

次は，色関連のCSSの値及びその一般的な意味について、付加的な値を列挙したものである。いずれの色特性も次の名前を一つとることができる。これらは大文字及び小文字を区別しないが、より読み易くするために、後述するように大文字及び小文字を混在させることを推奨する。

ActiveBorder

活性ウィンドウの境界線。

ActiveCaption

活性ウィンドウの標題。

AppWorkspace

複数の文書インタフェースの背景色。

Background

デスクトップの背景。

ButtonFace

三次元表示要素の書体色。

ButtonHighlight

三次元表示要素の暗影(光源から離れている辺に関するもの)。

ButtonShadow

三次元表示要素の影となる色。

ButtonText

押しボタン上のテキスト。

CaptionText

標題、サイズボックス及びスクロールバーの矢印ボックスのテキスト。

GrayText

グレー(使用不可)テキスト。この色は，現在の表示ドライバが濃いグレーをサポートしない場合は#000に設定される。

Highlight

制御で選択される項目。

HighlightText

制御で選択される項目のテキスト。

InactiveBorder

非活性ウィンドウの境界。

InactiveCaption

非活性ウィンドウの標題。

InactiveCaptionText

非活性標題のテキストの色。

InfoBackground

ツールの助言情報制御の背景色。

InfoText

ツールの助言情報制御のテキスト色。

Menu

メニューの背景。

MenuText

メニューのテキスト。

Scrollbar

スクロールバーのグレー領域。

ThreeDDarkShadow

三次元表示要素の暗影。

ThreeDFace

三次元表示要素の書体の色。

ThreeDHighlight

三次元表示要素の強調色。

ThreeDLightShadow

三次元表示要素の光源色(光源に直面する辺に関するもの)。

ThreeDShadow

三次元表示要素の影。

Window

ウィンドウの背景。

WindowFrame

ウィンドウのフレーム。

WindowText

ウィンドウ内のテキスト。

p { color: WindowText; background-color: Window }

注意。システム色のキーワード値の計算値は、キーワードそのものである。

利用者インタフェース関連の要素の見た目を完全に指定するCSS3 UIの'appearance'特性を推奨し、CSS2システム色は非推奨とする。

4.5.2. 'flavor'システム色

flavor

利用者エージェント自体の利用者インタフェースをカスタマイズするための、強調色(通常は利用者によって選択される)。UAがプラットホーム及び機構からその情報を取り出すことができれば、利用者エージェントは、デフォルトで、'flavor'を利用者が対話する物理的な機構(高い頻度でマウス、キーボード及びコンピュータケース、しばしばラップトップコンピュータ)上での主要な強調色にする。この値がすべてのプラットホーム及び機構上で意味をなすことは期待されない。

:focus {outline: 1px solid flavor}
  /* 現在フォーカスされている要素の周りに、もしあれば、色が
ブラウザの強調色と同じ輪郭線を置く */

4.6. 色を使う上での注意

色は、文書に多量の情報を加え、より読みやすくすることができるが、文書中に色を含めるときは、W3Cウェブ内容アクセシビリティガイドライン[WCAG]を参照されたい。

• ガイドライン2. 色だけに頼らないこと。

5. (X)HTML用スタイルシート例

この附属書は参考であって, 規定ではない。このスタイルシートは、HTML、XHTML1、XHTML 1.1、XHTML Basic及びほかのXHTMLファミリ文書のデフォルトのスタイル化の一部として、実装は使用することができる。

html { 
	color: black;
	background: white;
	color-profile: sRGB;
	rendering-intent: auto 
}

body[text] {
    color: attr(text,color};
}

body[bgcolor],table[bgcolor],tr[bgcolor],td[bgcolor],th[bgcolor] {
    background-color: attr(bgcolor,color);
}

font[color] {
    color: attr(color,color);
}

/* traditional desktop user agent colors for hyperlinks */
:link    { color: blue; }   
:visited { color: purple; }

img,object {
 	color-profile: auto;
 	rendering-intent: auto
}

/* default focus outline */
:focus {
	outline: 1px dotted gray; 
	outline: 1px solid flavor;
}

6. プロファイル

CSS3色を使った規定は、それぞれ、許容し、除外するCSS3の色の機能のサブセットを定義し、サブセットのすべての構成要素のそこでの意味を説明しなければならない。

規定でない例:

7. Test Suite

This specification shall refer to a test suite allowing user agents to verify their basic conformance to the specification. This test suite does not pretend to be exhaustive and does not cover all possible numerical color values. These tests are available [link forthcoming].

8. Acknowledgments

Thanks to Brad Pettit both for writing up color-profiles, and for implementing it. Thanks to Steven Pemberton for his write up on HSL colors. Thanks especially to the feedback from Marc Attinasi, David Baron, Bert Bos, Joe Clark, fantasai, Ian Hickson, Susan Lesch, Christoph Päper, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, and all the rest of the www-style community. And thanks to Chris Lilley for being the resident CSS Color expert.

9. References

9.1. Normative

[COLORIMETRY]

Colorimetry, Second Edition. CIE Publication 15.2-1986. ISBN 3-900-734-00-3 URL: http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html

[ICC32]

ICC Profile Format Specification, version 3.2. 1995. URL: http://www.color.org/icc32.pdf

[PNG1.0]

T. Boutell ed. PNG (Portable Network Graphics) Specification, Version 1.0. 1 October 1996. W3C Recommendation. URL: http://www.w3.org/TR/REC-png-multi.html

[SRGB]

Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB. IEC 61966-2-1 (1999-10). ISBN: 2-8318-4989-6 ｭ ICS codes: 33.160.60, 37.080 ｭ TC 100 ｭ 51 pp. URL: http://www.iec.ch/nr1899.htm

9.2. Informative

[ABC]

Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer's Handbook. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc/

[CSS2]

Bert Bos; H虧on Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2

[CSSICCPROF]

Brad Pettit; Tantek ﾇelik; Chris Lilley. Color Profiles for CSS3. 22 June 1999. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/1999/06/WD-css3-iccprof-19990623

[CSSUI]

Tantek ﾇelik; Peter Linss; Sho Kuwamoto. User Interface for CSS3. 16 February 2000. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2000/WD-css3-userint-20000216

[HTML401]

Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.01 Specification. Dec 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[HTMLICCPROF]

Apple Computer with input from Microsoft Corporation. Proposal for HTML support of ICC profiles. URL: http://www.apple.com/colorsync/benefits/web/icc-profiles.html

[OEB101]

Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm

[SVG10]

Various. Scalable Vector Graphics (SVG) 1.0 Specification. Sep 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904

[WCAG]

Wendy Chisholm; Gregg Vanderheiden; Ian Jacobs. Web Content Accessibility Guidelines 1.0. 5-May-1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

[X11COLORS]

Robert B. Hess. Colors By Name. MSDN Online Web Workshop. 02 November 1996. URL: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/X11_names.asp

Index

• color, #
  • names of, #
• color-profile, #
• <color>
  • definition of, #
• 'name', #
• opacity, #
• rendering-intent, #
• 'rendering-intent', #
• 'src', #

Property index