この文書は「CSS Color Module Level 3 (W3C Recommendation 07 June 2011)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。

原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。

公開日:
2011-06-08
翻訳者:
矢倉 眞隆 <yakura-masataka@mitsue.co.jp>

W3C

CSS カラーモジュール Level 3

2011年6月7日付 W3C 勧告 (Recommendation)

この版:
http://www.w3.org/TR/2011/REC-css3-color-20110607/
最新版:
http://www.w3.org/TR/css3-color
前の版:
http://www.w3.org/TR/2010/PR-css3-color-20101028
Editors:
Tantek Çelik (invited expert, and before at Microsoft Corporation) <>
Chris Lilley (W3C) <>
L. David Baron (Mozilla Corporation) <>
Additional Authors:
Steven Pemberton (CWI) <>
Brad Pettit (Microsoft Corporation) <>

仕様の規範的な定義に修正が加わっている可能性があるため、errata も参照されたい。

この仕様の 翻訳 も参照されたい。訳注:この文書は日本語訳である。


概要

CSS (Cascading Style Sheets) は画面や紙、音声など様々な媒体における HTML や XML 文書の描画方法を記す言語だ。CSS ではテキストや背景、ボーダーをはじめ、文書内の様々な箇所で色を指定する色関連プロパティを利用する。この仕様は色関連の値やプロパティ、そして不透明度に関する機能を定義する。定義するプロパティや値は CSS level 2 にあるものや、新しく加えられたものからなる。

この文書のステータス

このセクションは、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。

この文書に関する議論は、公開メーリングリスト www-style@w3.org (アーカイブ, 参加の手引き) 上で行うことが望ましい。メールを送信する際には、“css3-color” を件名に含めていただきたい。たとえば “[css3-color] …コメントの要約…” といった形が望ましいだろう。

この文書は Style ActivityCSS Working Group によって作成された。

別途用意した 実装レポート にはテストスイートが含まれており、各テストが2つ以上の実装でパスしたことを記している。

最後の Last Call に対しコメント では、その草案後に変更された箇所に関する説明がある。勧告候補 (2003年5月14日付) の期間中に寄せられたコメントと、その対応は css3-color disposition of comments から読むことができる。Last Call (2003年2月14日付 の期間中に寄せられたコメントと、その対応は CSS3 Module: Color — Disposition of Comments から読むことができる。

文書の 変更点 もこの文書内に用意されている。

この文書は W3C Member, ソフトウェア開発者、そしてその他の W3C グループや関係者によって評価が行われ、Director によって W3C 勧告と承認された。この文書は安定しており、参考資料として、または他の文書からの引用に利用されることがあるだろう。仕様の勧告において W3C の果たす役割とは、仕様に注目させ、その普及を促すことである。これにより、Web の機能と相互運用性の向上が期待できる。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。

目次


1. はじめに

CSS level 2 以降の CSS 仕様は、実装と共に段階的に発展できるよう複数のモジュールに分割され定義される。この仕様は、そんなモジュールのひとつである。

このモジュールは、要素の前景色や不透明度を指定するプロパティを定義する。また、CSS の値型 <color> についても詳細に定義している。

この仕様で定義する色関連のプロパティと値には、CSS1CSS2 の段階で既に存在していたものもあれば、新しく導入されたものもある。

CSS Working Group はすべての CSS3 実装が、すべてのプロパティや値を実装するようになるとは考えていない。かわりに「プロファイル」と呼ばれる、CSS3 のサブセットが実装されると考えている。たとえば、この仕様で定義される色関連プロパティや値をすべて含む、32 ビットカラー対応の UA 向けプロファイルなどが現れるかもしれない。

この仕様は、次の勧告 (Recommendations) や草案 (Working Drafts) から色に関連する機能を統合し、さらに新たな機能を付け加えたものとなっている。

2. 依存する仕様

この仕様で定義されていない用語は、 [CSS21]Definitions セクションで定義されている。文書のソースコードは XML [XML10] もしくは HTML [HTML401] の構文に沿って記述されている。

3. 色関連プロパティ

3.1. 前景色 ― ‘color’ プロパティ

名前: color
値: <color> | inherit
初期値: UA 依存
適用対象: すべての要素
継承: あり
パーセンテージ: なし
媒体: visual
計算値:
  • 基本カラーキーワード、RGB 16進数値、拡張カラーキーワードの計算値は RGB 10進数値の3つ組と等価である。つまり、6桁の16進数値もしくは rgb(...) 関数値 に alpha 値 1 が加わったものと等価である。
  • キーワード ‘transparent’ の計算値は RGBA 10 進数値の4つ組すべてに 0 が与えられたものと等価である。つまり、rgba(0,0,0,0) と等価である。
  • キーワード ‘currentColor’ の計算値については、キーワードの定義を参照されたい。
  • その他の値の計算値は指定値となる。

このプロパティは要素のテキスト内容について、その前景色を指定する。また、色関連の値をとる他のプロパティが間接的に利用する値 (currentColor) を提供する際にこのプロパティが利用される。キーワード ‘currentColor’ が ‘color’ プロパティに指定されている場合、それは ‘color:inherit’ として扱われる。

色の指定には、いくつかの方法が存在する。ライムグリーンを指定する場合は次のようになる。

例:

em { color: lime }               /* 色キーワード */
em { color: rgb(0,255,0) }       /* RGB 指定 (0-255) */
<color>
色関連の値は 後のセクション で定義される。

3.2. 不透明度 ― ‘opacity’ プロパティ

不透明度は後処理演算ととらえられる。概念的には、ある要素 (とその子孫) が RGBA のオフスクリーン画像として描画された後に、不透明度の設定がその描画とどのように合成され最終的な描画となるかを指定する。詳細は 単純なアルファ合成 のセクションを参照されたい。

名前: opacity
値: <alphavalue> | inherit
初期値: 1
適用対象: すべての要素
継承: なし
パーセンテージ: なし
媒体: visual
計算値: <alphavalue> を [0.0,1.0] の範囲で切り取った後の指定値と同じ。
<alphavalue>
構文的には <number> と等価である。不透明度の設定はオブジェクト全体に対し均一に適用される。0.0 (透明) から 1.0 (不透明) という範囲を外れた値はこの範囲内に収められる。オブジェクトがコンテナ要素である場合、不透明度の効果は各ピクセルの値が <alphavalue> であるようなマスクを使用し、コンテナの内容と現在の背景が合成したかのように表示される。

不透明度が 1 未満の要素は単一のオフスクリーン画像から合成されるため、要素外にある内容は要素内容と Z 軸で重ねられない。同じ理由から、実装は不透明度が 1 未満の要素に対し新しいスタッキングコンテキストを生成しなければならない。不透明度が 1 未満の要素が配置されていない場合、その親スタッキングコンテキスト内に、要素が ‘z-index: 0’ かつ ‘opacity: 1’ であった場合と同じ重ね順序で要素が生成したレイヤーを描画しなければならない。不透明度が 1 未満の要素が配置されている場合、‘z-index’ プロパティは ‘auto’ を除き [CSS21] で記された通りに適用される。新しいスタッキングコンテキストが常に生成されるため、‘auto’ は ‘0’ として扱われる。スタッキングコンテキストについては section 9.9 および [CSS21]Appendix E を参照されたい。なお、SVG は独自の 描画モデル ([SVG11], Chapter 3) を持つため、この段落で説明した規則は SVG 要素には適用されない。

4. 色の単位

<color> はキーワードまたは数値によって指定される。

4.1. 基本カラーキーワード

基本カラーキーワードは aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow となる。これらの色名は case-insensitive である。

色名と sRGB
色名指定 数値指定 色名 16進数 10進数
    black #000000 0,0,0
    silver #C0C0C0 192,192,192
    gray #808080 128,128,128
    white #FFFFFF 255,255,255
    maroon #800000 128,0,0
    red #FF0000 255,0,0
    purple #800080 128,0,128
    fuchsia #FF00FF 255,0,255
    green #008000 0,128,0
    lime #00FF00 0,255,0
    olive #808000 128,128,0
    yellow #FFFF00 255,255,0
    navy #000080 0,0,128
    blue #0000FF 0,0,255
    teal #008080 0,128,128
    aqua #00FFFF 0,255,255

Example(s):

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) }
em { color: rgb(100%, 0%, 0%) }

16進数表記の RGB 値のフォーマットは、‘#’ 直後に3桁もしくは6桁の16進数値を記述したものになる。3桁の表記は (#rgb) 各桁が繰り返され、6桁の表記 (#rrggbb) に変換される。0が付け足されるわけではないので、たとえば #fb0 は #ffbb00 となる。こうすることで white (#ffffff) を短縮表記 (#fff) で記述でき、さらに画面の色深度への依存を省ける利点がある。

関数表記の RGB 値のフォーマットは ‘rgb(’ 直後に3つの数値 (3つの整数値もしくはパーセンテージ) をカンマで区切り記述し、‘)’ で終了したものだ。整数値 255 は 100% および 16進数表記の F もしくは FF に等しく、すなわち rgb(255,255,255) = rgb(100%,100%,100%) = #FFF となる。数値の前後には空白を記述することができる。

すべての RGB カラーは sRGB 色空間 ([SRGB]) において指定される。色の再現能力が UA により異なる可能性があるが、sRGB を利用することでその色が何であるかを客観的な計測基準で曖昧さなく決定できる。また、国際標準とも関連づけられる ([COLORIMETRY])。

デバイスのガモット外の値が指定された場合、それらは切り取られるもしくはガモット変換を行うべきだ。つまり、red, green, blue の各値はデバイスがサポート範囲内に収められなければならない。UA はあるガモットと別のガモットとの間で色を対応させるといった高品質のマッピング処理を行ってもよい。たとえば、デバイスのガモットが 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%) に収められる */

プリンタなど別のデバイスは sRGB とは異なるガモットを持っている。たとえば、いくつかの色については 0 から 255 の範囲を超えて (しかし、デバイスのガモットの範囲内で) 再現することもできれば、そのほかの色についてはデバイスのガモット外にあるため別の色に置き換えられることもある。

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 値と異なり、16進数表記で RGBA を指定する記法は存在しない。

関数表記の RGB 値のフォーマットは ‘rgb(’ 直後に3つの数値 (3つの整数値もしくはパーセンテージ) および <alphavalue> をカンマで区切り記述し、‘)’ で終了したものだ。整数値 255 は 100% に等しく、すなわち rgb(255,255,255,0.8) = rgb(100%,100%,100%,0.8) となる。数値の前後には空白を記述することができる。

実装は RGBA 値の red, green, blue 値を、RGB カラー値の項で記した規則に基づき、デバイスのガモットに収めなければならない。

次の例は rgba() 記法で色を指定したものだ。

例:

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

Note: RGBA 値が UA によってサポートされていない場合、それは CSS の前方互換な構文解析規則 ([CSS21], Chapter 4) に基づき、認識できない値として扱われるべきだ。RGBA 値は不透明度を無視した RGB 値として扱われてはならない

4.2.3. transparent’ キーワード

transparent’ キーワードは CSS1 で ‘background-color’ の値として用意された。CSS2 では ‘border-color’ も ‘transparent’ を受け付けるようになった。そして、Open eBook(tm) Publication Structure 1.0.1 [OEB101] は ‘color’ プロパティでも ‘transparent’ を受け付けるように値を拡張した。このような経緯から CSS3 では <color> の定義に ‘transparent’ を加え、<color> を値にとるプロパティすべてで利用可能とした。これにより、CSS3 ではプロパティの定義もシンプルなものになった。

transparent
完全な透明を表す。このキーワードは透明な black, すなわちその計算値である rgba(0,0,0,0) の短縮形として扱われる。

4.2.4. HSL color values

CSS3 は RGB カラーに加えて HSL カラーの数値表現を追加した。RGB カラーには次のような制限があったことによる。

他のカラースキームも検討されるが、HSL の利点に明るさと暗さが対称であること (これはたとえば HSV にはあてはまらない)、HSL から RGB への変換が容易であることが挙げられる。

HSL カラーは 3 つ組 (色相、彩度、明度) で表される。色相はカラーサークル (虹を円で表したもの) の角度で表される。この角度はほとんどの場合、度 (°) で表されるため、CSS の構文において単位は暗黙のものとして扱われ、ただ <number> を記述することになる。red = 0 = 360 であり、他の色は green = 120, blue = 240 など、円に沿って表される。角度であるため -120=240 や 480=120 という対応関係がある。表された角度を x として、実装はその角度を (((x mod 360) + 360) mod 360) で計算し、 [0, 360) (0 以上 360 未満) の範囲に正規化することができるだろう。彩度と明度はパーセンテージで表される。 100% はfull saturation, 0% は shade of gray になる。明度が 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, 75%, 75%) }  /* パステルグリーン */

RGB と比べて HSL の利点は、その表現がずっと直感的なことにある。どの色が欲しいのかを推測し、変更できることにある。また、同系色のセットも (色相を固定し、明度や彩度を調整することによって) 簡単に作成できる。

彩度が 0% 未満の場合、実装はそれを 0% に収めなければならない。値が端末のガモット外にある場合、実装はそのガモット内に収めなければならない。このとき、色相は可能な限り維持するべきだが、そうでない場合は未定義となる。(これは次に記す HSL を RGB に変換するアルゴリズムを適用し、その後 RGB を収める規則とは異なる。)

HSL から RGB に変換するアルゴリズムはとてもシンプルだ (テーブルを生成するのに使った ABC 記法 [ABC] で表している。) 変換アルゴリズムにおいて、3 つの値 (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° ごと) し、red, yellow, green, cyan, blue, magenta およびその中間色を選んでいる (最後の色は magenta と red の中間色となる)。

各テーブルの X 軸は彩度 (100%, 75%, 50%, 25%, 0%) を表す。

各テーブルの Y 軸は明度を表す。50% が “normal” となる。

0° Reds
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
30° Red-Yellows (=Oranges)
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
60° Yellows
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
90° Yellow-Greens
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
120° Greens
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
150° Green-Cyans
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
180° Cyans
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
210° Cyan-Blues
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
240° Blues
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
270° Blue-Magentas
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
300° Magentas
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          
330° Magenta-Reds
彩度
100% 75% 50% 25% 0%
100          
88          
75          
63          
50          
38          
25          
13          
0          

4.2.5. HSLA カラー値

rgb()’ 関数に対し ‘rgb()’ 関数があるのと同じように、‘hsl()’ 関数にもアルファを指定するための ‘hsla()’ 関数がある。詳細は 単純なアルファ合成 のセクションを参照されたい。次の例はすべて同じ色を指定したものだ。

例:

em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* 上記と等価 (不透明度 1 を明示的に指定) */

HSLA カラー値のフォーマットは ‘hsla(’ 直後に色相の数値、彩度、明度パーセンテージのパーセンテージ、そして <alphavalue> をカンマで区切り記述し、‘)’ で終了したものだ。数値の前後には空白を記述することができる。

実装は HSLA 値の色相、彩度、明度を、HSL カラー値の項で記した規則に基づき、デバイスのガモットに収めなければならない。

次の例は hsla() 記法で色を指定したものだ。

例:

p { color: hsla(240, 100%, 50%, 0.5) } /* 半透明の青 */
p { color: hsla(30, 100%, 50%, 0.1) }  /* とても薄く投下されたオレンジ */

4.3. 拡張カラーキーワード

次の表に記すのはブラウザの多くでサポートされる X11 の色 [X11COLORS] に、SVG 1.0 の gray/grey 関連キーワードを追加したものだ。表の内容はほぼ SVG 1.0 色キーワード と同じである。本仕様は SVG での定義を外に広げたものとなる。表の左にある 2 列の色表示には意味があり、1列目は色名で、2列目は数値指定と、2種類の方法で背景色を指定している。

色名指定 数値指定 色名 16進数 10進数
    aliceblue #f0f8ff 240,248,255
    antiquewhite #faebd7 250,235,215
    aqua #00ffff 0,255,255
    aquamarine #7fffd4 127,255,212
    azure #f0ffff 240,255,255
    beige #f5f5dc 245,245,220
    bisque #ffe4c4 255,228,196
    black #000000 0,0,0
    blanchedalmond #ffebcd 255,235,205
    blue #0000ff 0,0,255
    blueviolet #8a2be2 138,43,226
    brown #a52a2a 165,42,42
    burlywood #deb887 222,184,135
    cadetblue #5f9ea0 95,158,160
    chartreuse #7fff00 127,255,0
    chocolate #d2691e 210,105,30
    coral #ff7f50 255,127,80
    cornflowerblue #6495ed 100,149,237
    cornsilk #fff8dc 255,248,220
    crimson #dc143c 220,20,60
    cyan #00ffff 0,255,255
    darkblue #00008b 0,0,139
    darkcyan #008b8b 0,139,139
    darkgoldenrod #b8860b 184,134,11
    darkgray #a9a9a9 169,169,169
    darkgreen #006400 0,100,0
    darkgrey #a9a9a9 169,169,169
    darkkhaki #bdb76b 189,183,107
    darkmagenta #8b008b 139,0,139
    darkolivegreen #556b2f 85,107,47
    darkorange #ff8c00 255,140,0
    darkorchid #9932cc 153,50,204
    darkred #8b0000 139,0,0
    darksalmon #e9967a 233,150,122
    darkseagreen #8fbc8f 143,188,143
    darkslateblue #483d8b 72,61,139
    darkslategray #2f4f4f 47,79,79
    darkslategrey #2f4f4f 47,79,79
    darkturquoise #00ced1 0,206,209
    darkviolet #9400d3 148,0,211
    deeppink #ff1493 255,20,147
    deepskyblue #00bfff 0,191,255
    dimgray #696969 105,105,105
    dimgrey #696969 105,105,105
    dodgerblue #1e90ff 30,144,255
    firebrick #b22222 178,34,34
    floralwhite #fffaf0 255,250,240
    forestgreen #228b22 34,139,34
    fuchsia #ff00ff 255,0,255
    gainsboro #dcdcdc 220,220,220
    ghostwhite #f8f8ff 248,248,255
    gold #ffd700 255,215,0
    goldenrod #daa520 218,165,32
    gray #808080 128,128,128
    green #008000 0,128,0
    greenyellow #adff2f 173,255,47
    grey #808080 128,128,128
    honeydew #f0fff0 240,255,240
    hotpink #ff69b4 255,105,180
    indianred #cd5c5c 205,92,92
    indigo #4b0082 75,0,130
    ivory #fffff0 255,255,240
    khaki #f0e68c 240,230,140
    lavender #e6e6fa 230,230,250
    lavenderblush #fff0f5 255,240,245
    lawngreen #7cfc00 124,252,0
    lemonchiffon #fffacd 255,250,205
    lightblue #add8e6 173,216,230
    lightcoral #f08080 240,128,128
    lightcyan #e0ffff 224,255,255
    lightgoldenrodyellow #fafad2 250,250,210
    lightgray #d3d3d3 211,211,211
    lightgreen #90ee90 144,238,144
    lightgrey #d3d3d3 211,211,211
    lightpink #ffb6c1 255,182,193
    lightsalmon #ffa07a 255,160,122
    lightseagreen #20b2aa 32,178,170
    lightskyblue #87cefa 135,206,250
    lightslategray #778899 119,136,153
    lightslategrey #778899 119,136,153
    lightsteelblue #b0c4de 176,196,222
    lightyellow #ffffe0 255,255,224
    lime #00ff00 0,255,0
    limegreen #32cd32 50,205,50
    linen #faf0e6 250,240,230
    magenta #ff00ff 255,0,255
    maroon #800000 128,0,0
    mediumaquamarine #66cdaa 102,205,170
    mediumblue #0000cd 0,0,205
    mediumorchid #ba55d3 186,85,211
    mediumpurple #9370db 147,112,219
    mediumseagreen #3cb371 60,179,113
    mediumslateblue #7b68ee 123,104,238
    mediumspringgreen #00fa9a 0,250,154
    mediumturquoise #48d1cc 72,209,204
    mediumvioletred #c71585 199,21,133
    midnightblue #191970 25,25,112
    mintcream #f5fffa 245,255,250
    mistyrose #ffe4e1 255,228,225
    moccasin #ffe4b5 255,228,181
    navajowhite #ffdead 255,222,173
    navy #000080 0,0,128
    oldlace #fdf5e6 253,245,230
    olive #808000 128,128,0
    olivedrab #6b8e23 107,142,35
    orange #ffa500 255,165,0
    orangered #ff4500 255,69,0
    orchid #da70d6 218,112,214
    palegoldenrod #eee8aa 238,232,170
    palegreen #98fb98 152,251,152
    paleturquoise #afeeee 175,238,238
    palevioletred #db7093 219,112,147
    papayawhip #ffefd5 255,239,213
    peachpuff #ffdab9 255,218,185
    peru #cd853f 205,133,63
    pink #ffc0cb 255,192,203
    plum #dda0dd 221,160,221
    powderblue #b0e0e6 176,224,230
    purple #800080 128,0,128
    red #ff0000 255,0,0
    rosybrown #bc8f8f 188,143,143
    royalblue #4169e1 65,105,225
    saddlebrown #8b4513 139,69,19
    salmon #fa8072 250,128,114
    sandybrown #f4a460 244,164,96
    seagreen #2e8b57 46,139,87
    seashell #fff5ee 255,245,238
    sienna #a0522d 160,82,45
    silver #c0c0c0 192,192,192
    skyblue #87ceeb 135,206,235
    slateblue #6a5acd 106,90,205
    slategray #708090 112,128,144
    slategrey #708090 112,128,144
    snow #fffafa 255,250,250
    springgreen #00ff7f 0,255,127
    steelblue #4682b4 70,130,180
    tan #d2b48c 210,180,140
    teal #008080 0,128,128
    thistle #d8bfd8 216,191,216
    tomato #ff6347 255,99,71
    turquoise #40e0d0 64,224,208
    violet #ee82ee 238,130,238
    wheat #f5deb3 245,222,179
    white #ffffff 255,255,255
    whitesmoke #f5f5f5 245,245,245
    yellow #ffff00 255,255,0
    yellowgreen #9acd32 154,205,50

4.4. currentColor’ キーワード

CSS1 と CSS2 は、border-color’ プロパティ の初期値を color’ プロパティの値 と定義したが、関連するキーワードを定義しなかった。これは SVG で認知されており、結果として SVG 1.0 は ‘currentColor’ キーワードを定義 し、‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, ‘lighting-color’ プロパティから利用できるようにした。CSS3 はこの ‘currentColor’ キーワードを <color> に加え、その値をとれるすべてのプロパティで利用可能とした。CSS3 でキーワードがが拡張されたことにより、それらのプロパティの定義も簡略化されることになった。

currentColor
color’ プロパティの値。‘currentColor’ キーワードの計算値は ‘color’ プロパティの計算値となる。‘currentColor’ キーワードが ‘color’ プロパティの値として指定された場合、それは ‘color: inherit’ として扱われる。

4.5. CSS システムカラー

4.5.1. CSS2 システムカラー

Deprecated. カラーキーワードをテキストや背景に指定する機能に加え、CSS2 では、製作者がユーザーのグラフィック環境と統合したかたちで色を指定する機能を定義していた。

該当する値を持たないシステムにおいて、指定値はもっとも近いシステムカラー値、もしくは規定値にマップされるべきだ。システムカラーをサポートしない CSS プロファイルが存在する可能性に注意されたい。

次のリストは色に関連する他の CSS の値をその意味と共に列挙したものだ。色関連プロパティにはこれらのキーワードを指定できる。キーワードは case-insensitive ではあるが、色の名前をより読みやすくする目的で、書かれている通りに記述することを推奨する。

ActiveBorder
アクティブなウィンドウのボーダーの色。
ActiveCaption
アクティブなウィンドウのキャプションの色。
AppWorkspace
複数のドキュメントインターフェースの背景色。
Background
デスクトップの背景色。
ButtonFace
周りのボーダーのため立体的に見える要素の最前面の背景色。
ButtonHighlight
周りのボーダーのため立体的に見える要素において、光に面したボーダーの色。
ButtonShadow
周りのボーダーのため立体的に見える要素において、光から離れたボーダーの色。
ButtonText
ボタンの文字色。
CaptionText
キャプション、サイズボックス、スクロールバーのアローボックスの文字色。
GrayText
(無効化された) 灰色の文字色。ディスプレイドライバが灰色をサポートしない場合は #000 となる。
Highlight
選択されたコントロールの色。
HighlightText
選択されたコントロールの文字色。
InactiveBorder
アクティブでないウィンドウのボーダーの色。
InactiveCaption
アクティブでないウィンドウのキャプションの色。
InactiveCaptionText
アクティブでないキャプションの文字色。
InfoBackground
ツールチップコントロールの背景色。
InfoText
ツールチップコントロールの文字色。
Menu
メニューの背景色。
MenuText
メニューの文字色。
Scrollbar
スクロールバーの灰色。
ThreeDDarkShadow
周りのボーダーのため立体的に見える要素のボーダーのうち、光源から遠いところにある暗い2辺 (基本的に外側) の色。
ThreeDFace
周りのボーダーのため立体的に見える要素の、表面の背景色。
ThreeDHighlight
周りのボーダーのため立体的に見える要素のボーダーのうち、光源から近いところにある明るい2辺 (基本的に外側) の色。
ThreeDLightShadow
周りのボーダーのため立体的に見える要素のボーダーのうち、光源から遠いところにある暗い2辺 (基本的に内側) の色。
ThreeDShadow
周りのボーダーのため立体的に見える要素のボーダーのうち、光源から近いところにある明るい2辺 (基本的に内側) の色。
Window
ウィンドウの背景色。
WindowFrame
ウィンドウのフレームの色。
WindowText
ウィンドウの文字色。

非推奨な例:

たとえば、ユーザーのウィンドウと同じ前景色、背景色を段落に適用したい場合は次のように書く。

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

Note. CSS2 システムカラー値は CSS3 UI の ‘appearance’ プロパティの導入により廃止される。UI 関連要素もしくはコントロールの見た目を模倣したい場合は、システムカラーの組み合わせではなく ‘appearance’ プロパティを利用してほしい。

4.6. 色の利用について

色を利用することで、文書に多くの情報を与えることや、文書をより読みやすくもできるが、文書内で色を利用する際には W3C Web Content Accessibility Guidelines をふまえてほしい。[WCAG20]

5. 単純なアルファ合成

実装は描画の際に、[SVG11]Section 14.2 Simple alpha compositing で定義された規則に従い、アルファを処理しなければならない。(セクションで言及される ‘color-interpolation’ や ‘color-rendering’ プロパティが実装されていない、もしくは適用されない場合、実装は初期値を持っているものとして処理しなければならない。)

6. (X)HTML のスタイルシートサンプル

この附属書は参考情報であり、規範的ではない。このスタイルシートは実装において、HTML4, XHTML1, XHTML1.1, XHTML Basic, その他の XHTML Family 文書のデフォルトスタイルシートの一部として利用できるだろう。

html { 
	color: black;
	background: white;
}


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

/* default focus outline */
:focus {
	outline: 1px dotted;  /* or 1px dotted invert */
}

7. プロファイル

CSS3 カラー を利用する仕様は CSS3 カラーで定義される機能のうち、何を受け付け、何を除外し、その他どのような制約があるかを記したサブセットを定義しなければならない。

非規範的な例を次に記す。

CSS3 カラー プロファイル
仕様 HTML4
受け入れる機能 基本カラーキーワード
6桁の16進数表記 RGB カラー値
除外する機能 color’ プロパティ
opacity’ プロパティ
RGB カラー値の3桁の16進数表記と関数表記 value
RGBA カラー値
HSL, HSLA カラー値
拡張カラー値
currentColor’ キーワード
CSS2 UI カラー
transparent’ キーワード
その他の制約 なし。
CSS3 カラー プロファイル
仕様 CSS level 1
受け入れる機能 color’ プロパティ
基本カラーキーワード
RGB カラー値
除外する機能 opacity’ プロパティ
RGBA カラー値
HSL, HSLA カラー値
拡張カラー値
currentColor’ キーワード
CSS2 UI カラー
transparent’ キーワード
その他の制約 なし。
CSS3 カラー プロファイル
仕様 CSS level 2
受け入れる機能 color’ プロパティ
基本カラーキーワード
RGB カラー値
CSS2 UI カラー
transparent’ キーワード
除外する機能 opacity’ プロパティ
RGBA カラー値
HSL, HSLA カラー値
拡張カラー値
currentColor’ キーワード
その他の制約 transparent’ キーワードを ‘color’ プロパティに指定すると invalid になる。
拡張カラー値の ‘orange’ は CSS 2.1 で追加された。
CSS3 カラー プロファイル
仕様 SVG 1.0 and 1.1
受け入れる機能 color’ プロパティ
opacity’ プロパティ
基本カラーキーワード
RGB カラー値
CSS2 UI カラー
拡張カラー値
currentColor’ キーワード
除外する機能 RGBA カラー値
HSL, HSLA カラー値
transparent’ キーワード
その他の制約 currentColor’ キーワードを ‘color’ の値に指定すると invalid になる。

8. テストスイート

CSS カラーモジュールの テストスイート が用意されている。このテストスイートは UA が仕様への適合性を確かめるものだ。このテストスイートは網羅的なものを意図せず、また色の数値指定の組み合わせすべてを確かめるものではない。テストは http://www.w3.org/Style/CSS/Test/#css3-color よりアクセスできる。

9. 削除された機能の実装呼びかけ

2003年5月14日付の勧告候補で定義されていた機能の多くは、この仕様から削除されている。しかし、これらの機能についての実装呼びかけは継続しており、充分な実装と相互運用性を担保するテストスイートがあれば、将来の仕様に盛り込まれる可能性がある。削除された機能は次のとおり。

10. 謝辞

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, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL working group, and all the rest of the www-style community. And thanks to Chris Lilley for being the resident CSS Color expert.

11. 仕様の変更点

この文書は、1つ前の2010年10月28日付の勧告案から、W3C 勧告の公開にあわせて日付、ステータス、スタイルの更新、参考文献の更新が行われた。これによる仕様の大きな変更はない。

12. 参考文献

12.1. 規範的な参考文献

[COLORIMETRY]
Colorimetry, Third Edition. CIE 15:2004. ISBN 978-3-901906-33-6
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
[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. as amended by Amendment A1:2003. URL: http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf
[SVG11]
Jon Ferraiolo et al. Scalable Vector Graphics (SVG) 1.1. 14 January 2003. W3C Recommendation. URL: http://www.w3.org/TR/2003/REC-SVG11-20030114/

12.2. 参考情報

[ABC]
Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer's Handbook. Prentice-Hall. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc
[CSS2]
Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411
[CSS3UI]
Tantek Çelik. CSS3 Basic User Interface Module. 11 May 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-ui-20040511
[HTML401]
David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[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]
Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
[WCAG20]
Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211
[X11COLORS]
X11 Color Names URL: http://en.wikipedia.org/wiki/X11_color_names
[XML10]
C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/

インデックス

プロパティ一覧

プロパティ名 初期値 適用対象 継承 パーセンテージ 媒体
color <color> | inherit UA 依存 すべての要素 あり なし visual
opacity <alphavalue> | inherit 1 すべての要素 なし なし visual