Edit

Page

Page title:

Page body:

[77] [[CSS]] における [DFN[[CODE(CSS)@en[[[<color>]]]]]] は、[[色]]を表します。

* 仕様書

- [78] [CITE@en[CSS Color Module Level 3]] ([TIME[2011-06-07 21:54:38 +09:00]] 版) <http://www.w3.org/TR/2011/REC-css3-color-20110607/#colorunits>
- [90] [CITE[Basic Data Types and Interfaces – SVG 1.1 (Second Edition)]] ([TIME[2011-06-09 08:01:15 +09:00]] 版) <http://www.w3.org/TR/SVG/types.html#ColorKeywords>

* 構文

- [88] [[色キーワード]]
-- [79] [[基本色キーワード]]
-- [89] [[拡張色キーワード]]
-- [87] [CODE(CSS)@en['[[transparent]]']]
-- [97] [CODE(CSS)@en['[[currentColor]]']]
-- [98] [[システム色]]
-- [99] [CODE(CSS)@en['[[flavor]]']]
-- [107] [CODE(CSS)@en['[[invert]]']]
-- [106] [CODE(CSS)@en['[[-moz-use-text-color]]']]
- [86] [CODE(CSS)@en[[['''#'''[VAR[rgb]]]]]]
- [86] [CODE(CSS)@en[[['''#'''[VAR[rrggbb]]]]]]
- [82] [CODE(CSS)@en[[[rgb()]]]]
- [83] [CODE(CSS)@en[[[rgba()]]]]
- [84] [CODE(CSS)@en[[[hsl()]]]]
- [85] [CODE(CSS)@en[[[hsla()]]]]

* 基本色キーワード

[80] [DFN[[RUBYB[[[基本色キーワード]]]@en[basic color keywords]]]]は、
[[HTML]] や [[CSS]] の仕様で古くから規定されてきた基本的な[[色]]の名前の[[キーワード]]16種類です。
[[大文字・小文字不区別]]です。

[81] <http://www.w3.org/TR/2011/REC-css3-color-20110607/#colorunits> に一覧があります。

* [CODE(CSS)@en[orange]]

[92] [CODE(CSS)@en[[[orange]]]] は[[基本色キーワード]]に含まれていませんが、 [[CSS 2.1]] で追加されました。
実際には[[拡張色キーワード]]に含まれていて古くから実装されてきました。

* 拡張色キーワード

[91] [DFN[[RUBYB[[[拡張色キーワード]]]@en[extended color keywords]]]]は、
[[X11]] に由来して [[HTML]] や [[CSS]] で古くから使われてきた[[色]]の名前の[[キーワード]]です。
[[大文字・小文字不区別]]です。

[93] [[基本色キーワード]]と [CODE(CSS)@en[[[orange]]]] を含み沢山の[[色]]が定義されています。

[94] <http://www.w3.org/TR/2011/REC-css3-color-20110607/#svg-color>
に一覧があります。

[95] 元々は [[X11]] で使われていた[[色]]の名前を [[Netscape Navigator]] が [[HTML]]
に採用したものでしたが、他の [[Webブラウザー]]も追随し、 [[HTML]] と [[CSS]]
で広く使われてきました。 [[SVG 1.0]] で初めて公式な仕様に取り込まれ、 [[CSS]]
本体仕様としては [[CSS3]] ではじめて [[W3C]] [[勧告]]となりました。

[96] 大元の [[X11]] の[[色]]とは多少の違いがあります。 [[SVG]] や [[CSS]]
では [CODE(CSS)@en[[[gray]]]] と [CODE(CSS)@en[[[grey]]]] の表記揺れをすべて含んでいますが、
歴史的には片方のみにしか対応していない実装もありました。

* 色名

,[[#form:'%color-example(color=>aliceblue);':'':'%output(form=>0);']]	,"rgb(240,248,255)	"	,[X11]
,[[#form:'%color-example(color=>antiquewhite);':'':'%output(form=>0);']]	,"rgb(250,235,215)	"	,[X11]
,[[#form:'%color-example(color=>aqua);':'':'%output(form=>0);']]	,"rgb(  0,255,255)	"	,"(=cyan) [HTML4],[X11],[J]"
,[[#form:'%color-example(color=>aquamarine);':'':'%output(form=>0);']]	,"rgb(127,255,212)	"	,[X11]
,[[#form:'%color-example(color=>azure);':'':'%output(form=>0);']]	,"rgb(240,255,255)	"	,[X11]
,[[#form:'%color-example(color=>beige);':'':'%output(form=>0);']]	,"rgb(245,245,220)	"	,[X11]
,[[#form:'%color-example(color=>bisque);':'':'%output(form=>0);']]	,"rgb(255,228,196)	"	,[X11]
,[[#form:'%color-example(color=>black);':'':'%output(form=>0);']]	,"rgb(  0,  0,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>blanchedalmond);':'':'%output(form=>0);']]	,"rgb(255,235,205)	"	,[X11]
,[[#form:'%color-example(color=>blue);':'':'%output(form=>0);']]	,"rgb(  0,  0,255)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>blueviolet);':'':'%output(form=>0);']]	,"rgb(138, 43,226)	"	,[X11]
,[[#form:'%color-example(color=>brown);':'':'%output(form=>0);']]	,"rgb(165, 42, 42)	"	,[X11]
,[[#form:'%color-example(color=>burlywood);':'':'%output(form=>0);']]	,"rgb(222,184,135)	"	,[X11]
,[[#form:'%color-example(color=>cadetblue);':'':'%output(form=>0);']]	,"rgb( 95,158,160)	"	,[X11]
,[[#form:'%color-example(color=>chartreuse);':'':'%output(form=>0);']]	,"rgb(127,255,  0)	"	,[X11]
,[[#form:'%color-example(color=>chocolate);':'':'%output(form=>0);']]	,"rgb(210,105, 30)	"	,[X11]
,[[#form:'%color-example(color=>coral);':'':'%output(form=>0);']]	,"rgb(255,127, 80)	"	,[X11]
,[[#form:'%color-example(color=>cornflowerblue);':'':'%output(form=>0);']]	,"rgb(100,149,237)	"	,[X11]
,[[#form:'%color-example(color=>cornsilk);':'':'%output(form=>0);']]	,"rgb(255,248,220)	"	,[X11]
,[[#form:'%color-example(color=>crimson);':'':'%output(form=>0);']]	,"rgb(220, 20, 60)	"	,[X11]
,[[#form:'%color-example(color=>cyan);':'':'%output(form=>0);']]	,"rgb(  0,255,255)	"	,(=aqua) [X11]
,[[#form:'%color-example(color=>darkblue);':'':'%output(form=>0);']]	,"rgb(0,  0,139)	"	,[X11]
,[[#form:'%color-example(color=>darkcyan);':'':'%output(form=>0);']]	,"rgb(0,139,139)	"	,[X11]
,[[#form:'%color-example(color=>darkgoldenrod);':'':'%output(form=>0);']]	,"rgb(184,134, 11)	"	,[X11]
,[[#form:'%color-example(color=>darkgray);':'':'%output(form=>0);']]	,"rgb(169,169,169)	"	,[X11]
,[[#form:'%color-example(color=>darkgreen);':'':'%output(form=>0);']]	,"rgb(  0,100,  0)	"	,[X11]
,[[#form:'%color-example(color=>darkgrey);':'':'%output(form=>0);']]	,"rgb(169,169,169)	"	,[Mozilla]
,[[#form:'%color-example(color=>darkkhaki);':'':'%output(form=>0);']]	,"rgb(189,183,107)	"	,[X11]
,[[#form:'%color-example(color=>darkmagenta);':'':'%output(form=>0);']]	,"rgb(139,  0,139)	"	,[X11]
,[[#form:'%color-example(color=>darkolivegreen);':'':'%output(form=>0);']]	,"rgb( 85,107, 47)	"	,[X11]
,[[#form:'%color-example(color=>darkorange);':'':'%output(form=>0);']]	,"rgb(255,140,  0)	"	,[X11]
,[[#form:'%color-example(color=>darkorchid);':'':'%output(form=>0);']]	,"rgb(153, 50,204)	"	,[X11]
,[[#form:'%color-example(color=>darkred);':'':'%output(form=>0);']]	,"rgb(139,  0,  0)	"	,[X11]
,[[#form:'%color-example(color=>darksalmon);':'':'%output(form=>0);']]	,"rgb(233,150,122)	"	,[X11]
,[[#form:'%color-example(color=>darkseagreen);':'':'%output(form=>0);']]	,"rgb(143,188,143)	"	,[X11]
,[[#form:'%color-example(color=>darkslateblue);':'':'%output(form=>0);']]	,"rgb( 72, 61,139)	"	,[X11]
,[[#form:'%color-example(color=>darkslategray);':'':'%output(form=>0);']]	,"rgb( 47, 79, 79)	"	,[X11]
,[[#form:'%color-example(color=>darkslategrey);':'':'%output(form=>0);']]	,"rgb( 47, 79, 79)	"	,[Mozilla]
,[[#form:'%color-example(color=>darkturquoise);':'':'%output(form=>0);']]	,"rgb(  0,206,209)	"	,[X11]
,[[#form:'%color-example(color=>darkviolet);':'':'%output(form=>0);']]	,"rgb(148,  0,211)	"	,[X11]
,[[#form:'%color-example(color=>deeppink);':'':'%output(form=>0);']]	,"rgb(255, 20,147)	"	,[X11]
,[[#form:'%color-example(color=>deepskyblue);':'':'%output(form=>0);']]	,"rgb(  0,191,255)	"	,[X11]
,[[#form:'%color-example(color=>dimgray);':'':'%output(form=>0);']]	,"rgb(105,105,105)	"	,[X11]
,[[#form:'%color-example(color=>dimgrey);':'':'%output(form=>0);']]	,"rgb(105,105,105)	"	,[Mozilla]
,[[#form:'%color-example(color=>dodgerblue);':'':'%output(form=>0);']]	,"rgb( 30,144,255)	"	,[X11]
,[[#form:'%color-example(color=>firebrick);':'':'%output(form=>0);']]	,"rgb(178, 34, 34)	"	,[X11]
,[[#form:'%color-example(color=>floralwhite);':'':'%output(form=>0);']]	,"rgb(255,250,240)	"	,[X11]
,[[#form:'%color-example(color=>forestgreen);':'':'%output(form=>0);']]	,"rgb(34,139, 34)	"	,[X11]
,[[#form:'%color-example(color=>fuchsia);':'':'%output(form=>0);']]	,"rgb(255,  0,255)	"	,"(= magenta) [HTML4],[X11],[J4]"
,[[#form:'%color-example(color=>gainsboro);':'':'%output(form=>0);']]	,"rgb(220,220,220)	"	,[X11]
,[[#form:'%color-example(color=>ghostwhite);':'':'%output(form=>0);']]	,"rgb(248,248,255)	"	,[X11]
,[[#form:'%color-example(color=>gold);':'':'%output(form=>0);']]	,"rgb(255,215,  0)	"	,[X11]
,[[#form:'%color-example(color=>goldenrod);':'':'%output(form=>0);']]	,"rgb(218,165, 32)	"	,[X11]
,[[#form:'%color-example(color=>gray);':'':'%output(form=>0);']]	,"rgb(128,128,128)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>grey);':'':'%output(form=>0);']]	,"rgb(128,128,128)	"	,[Mozilla]
,[[#form:'%color-example(color=>green);':'':'%output(form=>0);']]	,"rgb(  0,128,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>greenyellow);':'':'%output(form=>0);']]	,"rgb(173,255, 47)	"	,[X11]
,[[#form:'%color-example(color=>honeydew);':'':'%output(form=>0);']]	,"rgb(240,255,240)	"	,[X11]
,[[#form:'%color-example(color=>hotpink);':'':'%output(form=>0);']]	,"rgb(255,105,180)	"	,[X11]
,[[#form:'%color-example(color=>indianred);':'':'%output(form=>0);']]	,"rgb(205, 92, 92)	"	,[X11]
,[[#form:'%color-example(color=>indigo);':'':'%output(form=>0);']]	,"rgb( 75,  0,130)	"	,[X11]
,[[#form:'%color-example(color=>ivory);':'':'%output(form=>0);']]	,"rgb(255,255,240)	"	,[X11]
,[[#form:'%color-example(color=>khaki);':'':'%output(form=>0);']]	,"rgb(240,230,140)	"	,[X11]
,[[#form:'%color-example(color=>lavender);':'':'%output(form=>0);']]	,"rgb(230,230,250)	"	,[X11]
,[[#form:'%color-example(color=>lavenderblush);':'':'%output(form=>0);']]	,"rgb(255,240,245)	"	,[X11]
,[[#form:'%color-example(color=>lawngreen);':'':'%output(form=>0);']]	,"rgb(124,252,  0)	"	,[X11]
,[[#form:'%color-example(color=>lemonchiffon);':'':'%output(form=>0);']]	,"rgb(255,250,205)	"	,[X11]
,[[#form:'%color-example(color=>lightblue);':'':'%output(form=>0);']]	,"rgb(173,216,230)	"	,[X11]
,[[#form:'%color-example(color=>lightcoral);':'':'%output(form=>0);']]	,"rgb(240,128,128)	"	,[X11]
,[[#form:'%color-example(color=>lightcyan);':'':'%output(form=>0);']]	,"rgb(224,255,255)	"	,[X11]
,[[#form:'%color-example(color=>lightgoldenrodyellow);':'':'%output(form=>0);']]	,"rgb(250,250,210)	"	,[X11]
,[[#form:'%color-example(color=>lightgray);':'':'%output(form=>0);']]	,"rgb(211,211,211)	"	,[Mozilla]
,[[#form:'%color-example(color=>lightgreen);':'':'%output(form=>0);']]	,"rgb(144,238,144)	"	,[X11]
,[[#form:'%color-example(color=>lightgrey);':'':'%output(form=>0);']]	,"rgb(211,211,211)	"	,[X11]
,[[#form:'%color-example(color=>lightpink);':'':'%output(form=>0);']]	,"rgb(255,182,193)	"	,[X11]
,[[#form:'%color-example(color=>lightsalmon);':'':'%output(form=>0);']]	,"rgb(255,160,122)	"	,[X11]
,[[#form:'%color-example(color=>lightseagreen);':'':'%output(form=>0);']]	,"rgb( 32,178,170)	"	,[X11]
,[[#form:'%color-example(color=>lightskyblue);':'':'%output(form=>0);']]	,"rgb(135,206,250)	"	,[X11]
,[[#form:'%color-example(color=>lightslategray);':'':'%output(form=>0);']]	,"rgb(119,136,153)	"	,[X11]
,[[#form:'%color-example(color=>lightslategrey);':'':'%output(form=>0);']]	,"rgb(119,136,153)	"	,[Mozilla]
,[[#form:'%color-example(color=>lightsteelblue);':'':'%output(form=>0);']]	,"rgb(176,196,222)	"	,[X11]
,[[#form:'%color-example(color=>lightyellow);':'':'%output(form=>0);']]	,"rgb(255,255,224)	"	,[X11]
,[[#form:'%color-example(color=>lime);':'':'%output(form=>0);']]	,"rgb(  0,255,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>limegreen);':'':'%output(form=>0);']]	,"rgb( 50,205, 50)	"	,[X11]
,[[#form:'%color-example(color=>linen);':'':'%output(form=>0);']]	,"rgb(250,240,230)	"	,[X11]
,[[#form:'%color-example(color=>magenta);':'':'%output(form=>0);']]	,"rgb(255,  0,255)	"	,"(= fuchsia) [X11],[J3]"
,[[#form:'%color-example(color=>maroon);':'':'%output(form=>0);']]	,"rgb(128,  0,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>mediumaquamarine);':'':'%output(form=>0);']]	,"rgb(102,205,170)	"	,[X11]
,[[#form:'%color-example(color=>mediumblue);':'':'%output(form=>0);']]	,"rgb(0,  0,205)	"	,[X11]
,[[#form:'%color-example(color=>mediumorchid);':'':'%output(form=>0);']]	,"rgb(186, 85,211)	"	,[X11]
,[[#form:'%color-example(color=>mediumpurple);':'':'%output(form=>0);']]	,"rgb(147,112,219)	"	,[X11]
,[[#form:'%color-example(color=>mediumseagreen);':'':'%output(form=>0);']]	,"rgb( 60,179,113)	"	,[X11]
,[[#form:'%color-example(color=>mediumslateblue);':'':'%output(form=>0);']]	,"rgb(123,104,238)	"	,[X11]
,[[#form:'%color-example(color=>mediumspringgreen);':'':'%output(form=>0);']]	,"rgb(  0,250,154)	"	,[X11]
,[[#form:'%color-example(color=>mediumturquoise);':'':'%output(form=>0);']]	,"rgb( 72,209,204)	"	,[X11]
,[[#form:'%color-example(color=>mediumvioletred);':'':'%output(form=>0);']]	,"rgb(199, 21,133)	"	,[X11]
,[[#form:'%color-example(color=>midnightblue);':'':'%output(form=>0);']]	,"rgb( 25, 25,112)	"	,[X11]
,[[#form:'%color-example(color=>mintcream);':'':'%output(form=>0);']]	,"rgb(245,255,250)	"	,[X11]
,[[#form:'%color-example(color=>mistyrose);':'':'%output(form=>0);']]	,"rgb(255,228,225)	"	,[X11]
,[[#form:'%color-example(color=>moccasin);':'':'%output(form=>0);']]	,"rgb(255,228,181)	"	,[X11]
,[[#form:'%color-example(color=>navajowhite);':'':'%output(form=>0);']]	,"rgb(255,222,173)	"	,[X11]
,[[#form:'%color-example(color=>navy);':'':'%output(form=>0);']]	,"rgb(  0,  0,128)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>oldlace);':'':'%output(form=>0);']]	,"rgb(253,245,230)	"	,[X11]
,[[#form:'%color-example(color=>olive);':'':'%output(form=>0);']]	,"rgb(128,128,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>olivedrab);':'':'%output(form=>0);']]	,"rgb(107,142, 35)	"	,[X11]
,[[#form:'%color-example(color=>orange);':'':'%output(form=>0);']]	,"rgb(255,165,  0)	"	,[X11]
,[[#form:'%color-example(color=>orangered);':'':'%output(form=>0);']]	,"rgb(255,69,  0)	"	,[X11]
,[[#form:'%color-example(color=>orchid);':'':'%output(form=>0);']]	,"rgb(218,112,214)	"	,[X11]
,[[#form:'%color-example(color=>palegoldenrod);':'':'%output(form=>0);']]	,"rgb(238,232,170)	"	,[X11]
,[[#form:'%color-example(color=>palegreen);':'':'%output(form=>0);']]	,"rgb(152,251,152)	"	,[X11]
,[[#form:'%color-example(color=>paleturquoise);':'':'%output(form=>0);']]	,"rgb(175,238,238)	"	,[X11]
,[[#form:'%color-example(color=>palevioletred);':'':'%output(form=>0);']]	,"rgb(219,112,147)	"	,[X11]
,[[#form:'%color-example(color=>papayawhip);':'':'%output(form=>0);']]	,"rgb(255,239,213)	"	,[X11]
,[[#form:'%color-example(color=>peachpuff);':'':'%output(form=>0);']]	,"rgb(255,218,185)	"	,[X11]
,[[#form:'%color-example(color=>peru);':'':'%output(form=>0);']]	,"rgb(205,133, 63)	"	,[X11]
,[[#form:'%color-example(color=>pink);':'':'%output(form=>0);']]	,"rgb(255,192,203)	"	,[X11]
,[[#form:'%color-example(color=>plum);':'':'%output(form=>0);']]	,"rgb(221,160,221)	"	,[X11]
,[[#form:'%color-example(color=>powderblue);':'':'%output(form=>0);']]	,"rgb(176,224,230)	"	,[X11]
,[[#form:'%color-example(color=>purple);':'':'%output(form=>0);']]	,"rgb(128,  0,128)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>red);':'':'%output(form=>0);']]	,"rgb(255,  0,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>rosybrown);':'':'%output(form=>0);']]	,"rgb(188,143,143)	"	,[X11]
,[[#form:'%color-example(color=>royalblue);':'':'%output(form=>0);']]	,"rgb( 65,105,225)	"	,[X11]
,[[#form:'%color-example(color=>saddlebrown);':'':'%output(form=>0);']]	,"rgb(139, 69, 19)	"	,[X11]
,[[#form:'%color-example(color=>salmon);':'':'%output(form=>0);']]	,"rgb(250,128,114)	"	,[X11]
,[[#form:'%color-example(color=>sandybrown);':'':'%output(form=>0);']]	,"rgb(244,164, 96)	"	,[X11]
,[[#form:'%color-example(color=>seagreen);':'':'%output(form=>0);']]	,"rgb( 46,139, 87)	"	,[X11]
,[[#form:'%color-example(color=>seashell);':'':'%output(form=>0);']]	,"rgb(255,245,238)	"	,[X11]
,[[#form:'%color-example(color=>sienna);':'':'%output(form=>0);']]	,"rgb(160, 82, 45)	"	,[X11]
,[[#form:'%color-example(color=>silver);':'':'%output(form=>0);']]	,"rgb(192,192,192)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>skyblue);':'':'%output(form=>0);']]	,"rgb(135,206,235)	"	,[X11]
,[[#form:'%color-example(color=>slateblue);':'':'%output(form=>0);']]	,"rgb(106, 90,205)	"	,[X11]
,[[#form:'%color-example(color=>slategray);':'':'%output(form=>0);']]	,"rgb(112,128,144)	"	,[X11]
,[[#form:'%color-example(color=>slategrey);':'':'%output(form=>0);']]	,"rgb(112,128,144)	"	,[Mozilla]
,[[#form:'%color-example(color=>snow);':'':'%output(form=>0);']]	,"rgb(255,250,250)	"	,[X11]
,[[#form:'%color-example(color=>springgreen);':'':'%output(form=>0);']]	,"rgb(  0,255,127)	"	,[X11]
,[[#form:'%color-example(color=>steelblue);':'':'%output(form=>0);']]	,"rgb( 70,130,180)	"	,[X11]
,[[#form:'%color-example(color=>tan);':'':'%output(form=>0);']]	,"rgb(210,180,140)	"	,[X11]
,[[#form:'%color-example(color=>teal);':'':'%output(form=>0);']]	,"rgb(  0,128,128)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>thistle);':'':'%output(form=>0);']]	,"rgb(216,191,216)	"	,[X11]
,[[#form:'%color-example(color=>tomato);':'':'%output(form=>0);']]	,"rgb(255, 99, 71)	"	,[X11]
,[[#form:'%color-example(color=>turquoise);':'':'%output(form=>0);']]	,"rgb( 64,224,208)	"	,[X11]
,[[#form:'%color-example(color=>violet);':'':'%output(form=>0);']]	,"rgb(238,130,238)	"	,[X11]
,[[#form:'%color-example(color=>wheat);':'':'%output(form=>0);']]	,"rgb(245,222,179)	"	,[X11]
,[[#form:'%color-example(color=>white);':'':'%output(form=>0);']]	,"rgb(255,255,255)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>whitesmoke);':'':'%output(form=>0);']]	,"rgb(245,245,245)	"	,[X11]
,[[#form:'%color-example(color=>yellow);':'':'%output(form=>0);']]	,"rgb(255,255,  0)	"	,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>yellowgreen);':'':'%output(form=>0);']]	,"rgb(154,205, 50)	"	,[X11]

[1] [HTML4] は [[HTML4]], [[CSS1]], [[CSS2]] で規定されている基本16色。

[2] [X11] は [[SVG]] で規定されている拡張色。多くの [[WWWブラウザ]]は
[[HTML]] や [[CSS]] の色系属性値として昔から対応している。

[39] [J3] は 「[[J-SKY]] 向け HTML/3.01」,
[J4] は同/4.0。 [J] は [J3] 且つ [J4]。

[J3] にあった [CODE(HTML)[magenta]] は [J4]
で HTML 4 にあわせて [CODE(HTML)[Fuchsia]] に変更されました。

- [3] ''CSS2 <color>データ型・ノート'' <http://is.vis.ne.jp/notes/css2_syndata/v_color.xhtml>
- [4] ''Color Values'' <http://developer.netscape.com/docs/manuals/communicator/jsguide4/colors.htm>
- [5] 色名は基本16色以外は安全ではないから16進数表記を使うようにと長らく言われてきました。しかし最近では色名に対応した [[UA]] はほとんど X11 colors と呼ばれる、 [[NN]] 拡張に由来すると言われている追加の色にも対応しています。ですから、ほとんどの場合 X11 色も安全ですし、実際そういう事情を知らずに使っている人は沢山います。 (事情を知ってても、 [CODE[orange]] のような基本的な色名まで非標準だったとは知らない人もいるでしょう。)
- [6] >>5 というわけで、 (SVG で CSS に取り入れられて、 CSS3 でも採用される見込みですから) X11 色も今は堂々と使って良いと思います。とはいっても、そういう事情を説明しないで基本16色と X11 色をごちゃまぜにした''説明''はやっぱり好きませんけどね。
- [7] ところで、基本16色でも X11 色でも (CSS2 の [[UI]] 色でも) ない、 WWW ブラウザ独自拡張の色が他にも無いか調べてみましたが、見つかりませんでした。
- [10] ''HTML Color Chart'' <http://www.cam.hi-ho.ne.jp/mendoxi/misc/colorchart.html> 非常によくまとめられていておすすめです。 >>8- で取り上げた gray/grey 問題のほか、 X11 の色表と WWW の X11 色との比較や幻の HoneydewTab と HoneydewTad の話が (って全部か。) 興味深いです。
- [19] ''XHTML colour names and their sRGB values'' <http://frank.ellermann.bei.t-online.de/colour.htm>

[20] >>19 によればこんな色もあったそうですが、今の Mozilla
では [CODE[lightgray]] を除いて確認出来ません。

- [[#form:'%color-example(color=>Lightgoldenrod);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Lightslateblue);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Lightgray);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Navyblue);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Violetred);':'':'%output(form=>0);']]

また、 [[#form:'%color-example(color=>blue1);':'':'%output(form=>0);']]
〜[[#form:'%color-example(color=>blue4);':'':'%output(form=>0);']],
[[#form:'%color-example(color=>gray1);':'':'%output(form=>0);']]
〜[[#form:'%color-example(color=>gray100);':'':'%output(form=>0);']]
という指定もあるらしいですが、やはり確認出来ません。

- [21] >>20 後者は rgb.txt に由来するのかな? ''RGB to Color Name Mapping'' <http://web2.ucs.ubc.ca/newcounter/rgb.txt.html>
- [22] >>21 >>20 前半の色も >>21 に載ってますね。
- [23] ''カラー名のlightgreyって?'' <http://www.ybi.co.jp/koike/qa2000/qa2169.htm> ばけらたんの考察が興味深いです。
- [24] >>-23 結局、 X11 から WWW に輸入する時点で混乱が生じたようですな
- [25] 隠し色名があるとの情報もありますが、どんな名前のものかも不明です。 >>20-21 の数字つき色名のことなんでしょうか?
- [28] さて、上の表で [HTML4] は全て [X11] に含まれます。
- [29] (>>10 によれば幾つか定義が違うものがあるものの) [X11] は (本物の [[X]]11 の) [CODE(file)[rgb.txt]] に全て含まれます。
- [30] そして、 [X11] に [Mozilla] を加えたものはやはり [CODE(file)[rgb.txt]] の subset です。
- [31] [X11] + [Mozilla] は [[SVG]] 1.0 や CSS3 で定義された (システム色を除く) 色名と同じです。

[32] >>28-31 文字で書くより図の方が分かりやすい。

,基本16色	,X11 色	,greys	,その他
,"[HTML4] (HTML 3.2, HTML 4, CSS1, CSS2)"
,"[X11] (NC4 以前, IE)                  "	,==
,"[X11] + [Mozilla] (SVG 1.0, CSS3)     "	,==	,==
,X の [CODE(file)[rgb.txt]]	,==	,==	,==

- [33] >>33 スタイル・シート等によっては表の枠線の表示の関係で余計に分かりにくいかも。
- [34] >>33 文書による代替があるので許容ということで。
- [35] [WEAK[2003-02-22 13:34]] ''[[名無しさん]]'': CSS 2.1 (''Syntax and basic data types'' <http://www.w3.org/TR/CSS21/syndata.html#color-units> まだ WD) は [CODE(CSS)[orange]] を17番目の色として追加します。
- [40] >>34 [DEL[文書]] [INS[文字]]

[44]
''ホームページの作り方 その2'' <http://www.itoh.org/io/html/02.html>
(1998年9月8日付け、 [CODE(HTTP)[[[Last-Modified]]]] なし。)
には
[CODE[turkishblue]] という色名を [CODE(HTMLe)[[[font]]]] で使う例が紹介されています。

しかし、この色名は [[Google]] で検索しても他に典拠がまったくみつかりません。
[[WinIE 6]] で表示してみると [CODE[blue]] と同じ色になりました。 [CODE[eblue]] なども同じ色で、 [CODE[blue]] が入っていれば何でも同じなのかと思いきや、 [CODE[gblue]] は別の色で、例の WinIE
の謎の色名算法によって導き出された色がたまたま [CODE[turkishblue]]
だとそれっぽく見えたので筆者が勝手に捏造したのではないかと推察されます。
([[名無しさん]] [WEAK[2004-05-23 23:34:40 +00:00]])

[45]
''Corian Colors'' <http://www.solidsurfacesinc.net/colors/> に [Q[turkishblue]] が載っていますが、
HTML などとは関係なく、単なる見本です。
これを見る限り [Q[turkishblue]] は
[Q[blue]] とは違った色だと思いますが、
>>44 の頁の著者の目は大丈夫でしょうかね。
他にも純粋な色の名前としての用例は幾つか見つかりますが、
HTML で使った勇者は >>44 だけの模様。
([[名無しさん]] [WEAK[2004-05-23 23:37:38 +00:00]])

[[#comment]]

* gray & grey

[8] X11 色には幾つか [CODE[‐gray]] という名前がありますが、このうち
[CODE[lightgrey]] だけ [CODE[‐grey]] になっています。

英語としてはどちらも正しいのですが、 [CODE[lightgray]] を除く [CODE[‐gray]] と
[CODE[lightgrey]] しか対応していない [[UA]] が多いです。
その中には [[M$IE]] と [[NN]]4 も含まれます。

[[Mozilla]] は全てについて [CODE[‐gray]] と [CODE[‐grey]]
に共に対応しています。

- [9] WinIE ではなぜか (無着色ではなく) 全然関係ない色になりますね。どういうアルゴリズムなんだか。

* [VAR[rrggbb]]

[149] [CITE[https://web.archive.org/web/20050213215625if_/http://www.geocities.com:80/Paris/8975/comp.html]], [TIME[2025-06-05T01:41:19.000Z]] <view-source:https://web.archive.org/web/20050213215625if_/http://www.geocities.com:80/Paris/8975/comp.html>

>
[PRE[
ÌÀÉÅÄÇÈ ÎÈÐÅÄÊÈ
]PRE]

;; [150] [[文字化け]]。 [SEE[ [[georgian-academy]] ]]

* HoneydewTab と HoneydewTad

[11] >>10 に詳しいですが、2つの幻の色名, 
[[#form:'%color-example(color=>HoneydewTab);':'':'%output(form=>0);']] と [[#form:'%color-example(color=>HoneydewTad);':'':'%output(form=>0);']]
が''存在''しています。

[12] Mozilla ではこの指定は無視されますが、 WinIE
ではいずれも 
[[#form:'%color-example(color=>"#00DEAB");':'':'%output(form=>0);']]
で表示されます。

[13] しかし、 >>10 の考察を読めば分かりますが、 WinIE
もこの色を実装しているわけではありません。
ではなぜそれっぽい色 (いや、 Honeydew = 糖液・蜜に [CODE[#00DEAB]]
がふさわしいのかは謎ですが。) が表示されるのか。

ためしに適当な文字列を入れてみると、その文字列によって色が変化することがわかります。
また、 WinIE は[[互換モード]]では [CODE[#]] がつかない16進表記
(もちろん不正。) も認識するらしいです。

このことから考えると、 WinIE は適当な文字列が指定された場合に、それを頑張って16進の色指定と認識しようとすると思われます。
だとすると >>9 も説明がつきます。

- [14] >>12 WinIE で互換モードでも、 [[CSS]] では無視されるようです。
- [15] >>13 HoneydewTab は鳥名らしいです。
- [17] 検索してみると確かに''日本語サイトに限って''この2つの色名が蔓延してることがわかります。  HoneydewTab が多く (鳥名として正しい綴りだからだろう。), HoneydewTad は少数です。こちらは typo でしょうか。 
- [18] >>17 WinIE でしか確認しないで, 他の資料の丸写しで色一覧を作ってる人が多いことがよくわかりますね(w

[50]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070422]] ([CODE[2007-04-23 00:47:45 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20070422#l-599>
([[名無しさん]] [WEAK[2007-04-22 15:48:55 +00:00]])

[51]
[CITE[mozilla/gfx/src/nsColor.cpp]] ([CODE[2006-06-23 20:33:26 +09:00]] 版) <http://lxr.mozilla.org/mozilla/source/gfx/src/nsColor.cpp#126>

* 端末でのレンダリング

[61] [CITE@en[GNU `gettext' utilities]] ([TIME[2009-03-20 11:59:11 +09:00]] 版) <http://www.gnu.org/software/gettext/manual/gettext.html#Style-rules>

>Colors will be adjusted to match the terminal's capabilities. Note that many terminals support only 8 colors.

;; [CODE@en[[[msgcat]]]] は [CODE(CSS)@en[[[color]]]] と
[CODE(CSS)@en[[[background-color]]]] に対応しています。

* 文脈

[FIG(short list)[ [141] [CODE(CSS)@en[<color>]] が使える場所
- [CODE(CSS)['color']]
- [CODE(CSS)[background-color]]
- [CODE(CSS)@en[border-color]]
- [CODE(HTML)[<link color>]]
]FIG]

* 歴史

** 色指定の登場

[120] 1995年3月の [[Netscape Navigator 1.1]] ベータ版、4月の [[Netscape Navigator 1.1]]
正式版で色を指定できる [[HTML]] の[[属性]] [CODE(HTMLa)@en[[[text]]]],
[CODE(HTMLa)@en[[[link]]]], [CODE(HTMLa)@en[[[alink]]]], [CODE(HTMLa)@en[[[vlink]]]]
が追加されました。

[122] 説明 [SRC[>>121]] や開発者のメール [SRC[>>123]] によると [[HTML 3.0]] の一部として提案されていた [CODE(HTMLa)@en[[[background]]]] [[属性]]を実装すると[[背景画像]]によって文字が読めなくなる可能性があるため、
[CODE(HTMLa)@en[[[text]]]] なども同時に提案・実装したということのようです。

;; [124] ただし提案は受け入れられないまま [[HTML 3.0]] の標準化自体が破綻することになります。

[125] この時、 [CODE(HTML)@en[#rrggbb]] のような16進数表記が取り入られました。この表記は [[Netscape]]
社内で決められたのか、メーリングリストなどで議論された形跡はありません。また [[Netscape]]
が実装する前に同様の提案や議論がなされた形跡も見当たりません。

[REFS[
- [121] [CITE[Document specific background and foreground control]] ([TIME[2014-04-07 09:20:39 +09:00]] 版) <http://web.archive.org/web/19961020032532/http://www3.netscape.com/assist/net_sites/bg/index.html>
- [123] [CITE@en[Re: color: NCSA Mosaic, Netscape, and HTML3]] ([[Lou Montulli]] 著, [TIME[1995-07-19 10:26:26 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-style/1995Jul/0080.html>
]REFS]

** 色名キーワードの導入

[114] [[X11]] における色名の歴史については、 >>108 と >>112 にまとまっています。

[REFS[
- [108] [CITE[x11 - What are the origins of rgb.txt? - Unix & Linux Stack Exchange]]
( ([TIME[2013-12-07 18:21:22 +09:00]] 版))
<http://unix.stackexchange.com/questions/72919/what-are-the-origins-of-rgb-txt>
- [112] [CITE@en[Re: Last call comments on CSS3 module: color]]
( ([[Alex Sexton]] 著, [TIME[2014-03-13 11:44:50 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2014Mar/0272.html>
]REFS]

[115] [[HTML]] に色名が取り入れられたのが正確にいつなのかははっきりしません。 [[Netscape Navigator 1.1]]
のドキュメントに色名への言及がなく、 [[Netscape Navigator 2.0]] のドキュメント [SRC[>>116]]
には言及があるので、 2.0 で追加された可能性がありますが、追加した旨の記述や色名の一覧は見つかっていません。

[117] [[Netscape Navigator 3.0]] のドキュメント [SRC[>>113]] には色名の一覧があります。
この時には既に色名キーワードの多くが揃っています。

;; 140個定義されています。

;; [126] ちなみに >>116 のドキュメントのリンク先の例示には [CODE(HTML)[#]] のない
[CODE(HTML)[rrggbb]] で色を表した例があって、この当時既に [CODE(HTML)[#]]
がなくても構わない実装になっていたこと、 [[Netscape]] 社内の担当者も正しい表記がわからなくなっていたことがわかりますw

[REFS[
- [116] [CITE[Welcome to Netscape Navigator Version 2.0]] ([TIME[2014-04-07 09:13:32 +09:00]] 版) <http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images>
- [113] [CITE[Color values]]
( ([TIME[2014-04-07 08:56:51 +09:00]] 版))
<http://web.archive.org/web/20030212162000/http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/colors.htm>
]REFS]

[118] 90年代にはまだブラウザー間で (もしかしたら [[OS]] 間でも) 色名の種類や解釈に違いがありました。

** 色名キーワードの標準化

[119] 1996年の [[HTML 3.2]] と [[CSS1]] でいわゆる[[基本16色]]が、その数年後の [[SVG 1.0]]
でいわゆる [[X11色]]が標準化されることになります。これらの色がどのような基準で選ばれたのかは明確ではありません。

* メモ

[148] 
[CITE[Color Names for World Wide Web]], [TIME[2024-08-18T02:52:45.000Z]], [TIME[1998-01-13T21:18:15.591Z]] <https://web.archive.org/web/19980113211755/http://www.cm.spyglass.com/doc/spec/webcolor.html>

- [16] ''あれこれ/カラーサンプル'' <http://www2.starcat.ne.jp/~master/tips/0003/> 環境による近似色関係の情報もあって有用。
- [26] ''CSS3 module: Color'' <http://www.w3.org/TR/css3-color/>
- [27] >>26 CSS3 は従来の HTML, W3C CSS, 独自拡張 CSS の色関係の指定を整理したうえで更に拡張しています。この [[WD]] 自体が、簡単ではあるものの [[HTML4]] 以降の色関係の指定方法の変化の説明となっています。
- [36] [[XSL]](-FO) の場合。 ''Property Refinement / Resolution'' <http://www.w3.org/TR/xsl/slice5.html>, ''Formatting Properties'' <http://www.w3.org/TR/xsl/slice7.html#section-N42081-Color-related-Properties>, ''Property Refinement / Resolution'' <http://www.w3.org/TR/xsl/slice5.html#section-N8794-Property-Datatypes>
- [37] >>36 基本16色, [CODE(XSL)[#]] の16進数表記, CSS と同様の [[rgb]] 関数, [[rgb-icc]] 関数, [[system-color]] 関数が指定できます。
- [38] ''色指定は正しく指定しましょう - Web標準普及プロジェクト'' <http://www.mozilla.gr.jp/standards/webtips0008.html> [CODE(HTML)[#]] 省略問題について。
- [41] html:[[body]]/@[[bgcolor]] 属性の値に不正な値を指定し場合について。[CODE(HTML)[ ] ([[SP]]) の場合、 [[Mozilla]] 1.3 では既定背景色、 [[WinIE]] 6.0 では黒になりました。 [CODE(HTML)[#]] や [CODE(HTML)[;]] ではどちらの [[UA]] でも黒になりました。なお、利用者指定の既定値や前景色との関係は調べてません。]]
- [42] [CODE(CSS)[[[-moz-Field]]]], [CODE(CSS)[[[-moz-FieldText]]]], ...

[43] HTML の色属性の値は、
最初の [SAMP(HTML)[#]] を省いて指定されることがよくありました。
(もちろん誤り。)
それを「ちゃんと」解釈してくれるブラウザもあるから困った物で。

[46]
[CITE[あまり紹介されていないハイパーテキストタグの説明のページ]] <http://www.geocities.co.jp/Hollywood/9752/tag.html>
(日付なし)

この文書は、 [CODE(HTML)[aliceblue]] が
[[NN]] では緑、 [[IE]] では白であると主張しています。
また、 NN は [CODE(HTML)[elm]] を黒に近い色とする (IE は未対応) と主張しています。

([[名無しさん]] [sage])

[47]

- [CODE(CSS)@en[[[-webkit-link]]]]
- [CODE(CSS)@en[[[-webkit-activelink]]]]
- [CODE(CSS)@en[[[-webkit-focus-ring-color]]]]
- [CODE(CSS)@en[[[-webkit-text]]]]

([[名無しさん]] [sage])

[48]
[CODE(CSS)@en[[[-moz-activehyperlinktext]]]]
([[名無しさん]] [sage])

[49]
[CITE[hxxk.jp - JIS 慣用色の色名と CSS での数値指定との対応表]] <http://hxxk.jp/appendix/2006-06-22-colortable>
([[名無しさん]] [WEAK[2006-08-18 04:34:40 +00:00]])

[52]
,[[CSS]] 上の元の値	,[[CSSOM]] 上に現れる値	,==	,==	,==	,==	,==
,	,[[Firefox]] 2	,==	,[[WinIE 6]]	,==	,[[Opera]] 9	,==
,	,無奇癖	,奇癖	,無奇癖	,奇癖	,無奇癖	,奇癖
,[CODE(CSS)@en[[[red]]]]	,[CODE(CSS)@en[[[red]]]]	,==	,==	,==	,[CODE(CSS)@en[#ff0000]]	,==
,[CODE(CSS)@en[[[ReD]]]]	,[CODE(CSS)@en[[[ReD]]]]	,==	,[CODE(CSS)@en[[[red]]]]	,==	,[CODE(CSS)@en[#ff0000]]	,==
,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,==	,"[CODE(CSS)@en[[[rgb]](255,0,0)]]"	,==	,[CODE(CSS)@en[#ff0000]]	,==
,"[CODE(CSS)@en[[[rGb]](255, 0, 0)]]"	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,==	,"[CODE(CSS)@en[[[rgb]](255,0,0)]]"	,==	,[CODE(CSS)@en[#ff0000]]	,==
,[CODE(CSS)@en[#ff0000]]	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,==	,[CODE(CSS)@en[#ff0000]]	,==	,==	,==
,[CODE(CSS)@en[#fF0000]]	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,==	,[CODE(CSS)@en[#ff0000]]	,==	,==	,==
,[CODE(CSS)@en[#f00]]	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,==	,[CODE(CSS)@en[#f00]]	,==	,[CODE(CSS)@en[#ff0000]]	,==
,[CODE(CSS)@en[#F00]]	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,==	,[CODE(CSS)@en[#f00]]	,==	,[CODE(CSS)@en[#ff0000]]	,==
,[CODE(CSS)@en[ff0000]]	,([[無視]])	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,([[無視]])	,[CODE(CSS)@en[#ff0000]]	,([[無視]])	,[CODE(CSS)@en[#ff0000]]
,[CODE(CSS)@en[f00]]	,([[無視]])	,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]"	,([[無視]])	,[CODE(CSS)@en[#f00]]	,([[無視]])	,[CODE(CSS)@en[#ff0000]]
,[CODE(CSS)@en[[[windowText]]]]	,[CODE(CSS)@en[[[windowtext]]]]	,==	,==	,==	,[CODE(CSS)@en[[[WindowText]]]]	,==

[53]
[CITE[simon.html5.org/test/html/parsing/color-attributes]] ([CODE[2008-01-19 13:46:28 +09:00]] 版) <http://simon.html5.org/test/html/parsing/color-attributes/>
([[名無しさん]])

[54]
[[奇癖モード]]の [[CSS]] [CODE(CSS)@en[<[[color]]>]] [[特性値]]の解釈に関して:
- 1桁・2桁の[[16進数]]の場合
-- [[WinIE 6]] と [[Opera]] 9 は[[宣言]]ごと[[無視]]します。
-- [[Firefox]] 2 は 先頭に [CODE(CSS)[#]] と4〜5個の 0 を補って
6桁の[[16進数]]として解釈します。
- 3桁の[[16進数]] [CODE(CSS)[[VAR[x]][VAR[y]][VAR[z]]]] の場合
-- [[WinIE 6]] と [[Opera]] 9 では 
[CODE(CSS)[#[VAR[x]][VAR[y]][VAR[z]]]] = 
[CODE(CSS)[#[VAR[x]][VAR[x]][VAR[y]][VAR[y]][VAR[z]][VAR[z]]]] と解釈されます。
-- [[Firefox]] 2 では [CODE(CSS)[#000[VAR[xyz]]]] と解釈されます。 
--<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20123%3B%0A%7D%0Aq%20%7B%0A%20%20color%3A%20%23123%3B%0A%7D%0A;h=%3Cp%3Exxxxxxxxxxxxxxxxxxxxxxx;p=q;x=style-element;i=html-div>
- 4桁・5桁の[[16進数]]の場合
-- [[WinIE 6]] は[[宣言]]ごと[[無視]]します。
-- [[Firefox]] 2 は先頭に [CODE(CSS)[#]] と1〜2個の [CODE(CSS)[[[0]]]]
を補って6桁の[[16進数]]として解釈します。
-- [[Opera]] 9 は先頭に [CODE(CSS)[#]] を補い、
最初の3桁''以外''は除去し、3桁の[[16進数]]として解釈します。
- 6桁の[[16進数]]の場合
-- 3ブラウザとも、先頭に [CODE(CSS)[#]] を補って6桁の[[16進数]]として解釈します。
- 7桁以上の[[16進数]]の場合
-- [[WinIE 6]] と [[Firefox]] 2 は[[宣言]]ごと[[無視]]します。
-- [[Opera]] 9 は先頭に [CODE(CSS)[#]] を補い、
最初の6桁''以外''は除去し、6桁の[[16進数]]として解釈します。

;; [[WinIE 6]] が一番まともだとは一体どういうことよw

[55] [CITE[SMIL 3.0 Media Object]] ([TIME[2008-12-02 00:45:09 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-media-object.html#edef-brush>

[56] [[SMIL]] [CODE(XMLe)@en[[[blush]]]] [[要素]]の
[CODE(XMLa)@en[[[color]]]] [[属性]]の構文は [CODE(CSS)@en[[[background-color]]]]
と同じになっています。ただし、 [CODE(CSS)@en[[[inherit]]]] は意味を成さないとして禁じられています。

[57] [[Opera]] 9.61 で[[色名]]を [CODE(CSS)@en[[[<color>]]]]
として与えた時に [CODE(DOMa)@en[[[currentStyle]]]] 
が返す値は "" で括られています。 [CODE(DOMm)@en[[[getComputedStyle]]]] は正常です。

;; <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20white%3B%0D%0A%7D;h=%3Cp%3Exxxxx%3Cbutton%20type%3Dbutton%20onclick%3D%22w(this.parentNode.currentStyle.color)%22%3EcurrentStyle.color%3C%2Fbutton%3E%20%3Cbutton%20type%3Dbutton%20onclick%3D%22w(getComputedStyle%20(this.parentNode%2C%20null).color)%22%3EgetComputedStyle.color%3C%2Fbutton%3E%20;p=n;x=style-element;i=html-div>

[58] >>57 [[WinIE7]] は正常でした。

[59] [CITE[Bug 475191 – bgcolor="lightred" mysteriously comes out blue (quirks mode color parsing)]] ([TIME[2009-01-30 23:57:40 +09:00]] 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=475191>

[60] [CITE[IRC logs: freenode / #whatwg / 20090210]] ([TIME[2009-02-12 07:13:29 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20090210#l-251>

>
-[11:58] <Hixie> zcorpan: have you tested http://simon.html5.org/specs/html-color-attributes against IE by giving it random strings and checking the computed values? 
-[13:19] <zcorpan> Hixie: it doesn't match ie when the input is in the format "#rgb" 
-[13:19] <zcorpan> Hixie: we changed it to support pages that were written against ie pocket/firefox/safari 
-[13:24] <Hixie> no i get fails for other things too 
-[13:24] <Hixie> e.g. #3 
-[13:28] <Hixie> hm actually the problem is the way i'm reading the colors 
-[13:29] <zcorpan> oh yeah, currentStyle is weird in ie 
-[13:29] <Hixie> it's saying #3 => #300 instead of #030000 
-[13:29] <Hixie> i wonder how to get around that 
-[13:30] <zcorpan> use <body bgcolor> and document.bgColor 
-[13:30] <Hixie> they serialise differently? 
-[13:30] <zcorpan> yes

* [CODE@en[color]] (MathML)

[63] [[MathML]] における [DFN[[CODE[[[color]]]]]] は、[[レンダリング]]に用いる[[色]]を表します。
表現能力としては [[CSS]] における [CODE(CSS)@en[[[<color>]]]] の[[部分集合]]となっていますが、
構文的には厳密には[[部分集合]]ではありません。

** 仕様書

- [62] [CITE[MathML Fundamentals]] ([TIME[2010-10-21 05:51:46 +09:00]] 版) <http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#fund.color>

** 構文

[64] [CODE@en[[[color]]]] は、次のいずれかの形式で表します [SRC[>>62]]。

- [65] [CODE@en[[[[SPAN[#]][VAR[R]][VAR[G]][VAR[B]]]]]]
- [66] [CODE@en[[[[SPAN[#]][VAR[RR]][VAR[GG]][VAR[BB]]]]]]
- [67] [CODE@en[[VAR[html-color-name]]]]
- [70] [CODE@en[[[transparent]]]] ([[背景色]]でのみ)

[68] >>65, >>66 は [[CSS]] と同じで[[16進数]]によって[[赤]]、[[青]]、[[緑]]の値を指定します。

[69] [DFN[[CODE[html-color-name]]]] は、[[HTML4]] の [CODE(SGML)@en[[[%Color;]]]]
と同じ16色で、[[大文字・小文字を区別しない]]とされています。 [SRC[>>62]]

** 処理モデル

[71] (前景)[[色]]がある[[要素]]に適用されるとすると、その[[色]]は、
[[字句]]の[[内容]]が[[レンダリング]]されるときに使われます。 [SRC[>>62]]

[72] 周りの[[要素]]や、 [[MathML]] [[式]]が埋め込まれている[[環境]]から[[色]]が[[継承]]される場合には、
[[線]]や[[根号]]なども含め、 [[MathML]] の[[要素]]によって[[レンダリング]]されるものすべてに効果が及びます。
[SRC[>>62]]

[73] [[背景色]]は、[[要素]]の[[内容]]の[RUBYB[[[次元]]]@en[dimension]]が[[負]]ではなく、
また[[負]]の[RUBYB[[[間隔付け]]]@en[spacing]]によって他のものと領域が重なっていないのであれば、
その[[要素]]によって[[レンダリング]]がなされるものの裏側で塗られる[RUBYB[べき]@en[should]]であって、
周りのものの裏側は塗られる[RUBYB[べきではありません]@en[should not]]。
そうではなく[[負]]であったりして重なるような場合にどこが塗られるのかは、
[[MthML]] の[RUBYB[推奨]@en[recommended]][[視覚レンダリング]]規則では定めれられていません。
[SRC[>>62]]

[74] [CITE@en[Web Applications 1.0 r5875 Change how canvas serialises alpha<1 colours to match CSS.]]
( ([TIME[2011-02-12 05:36:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5874&to=5875>

[75] [CITE[''''''[''''''whatwg'''''']'''''' Canvas feedback (various threads)]]
( ([TIME[2011-02-12 10:51:29 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-February/030404.html>

[76] [CITE[''''''[''''''whatwg'''''']'''''' Accept full CSS colors in the legacy color parsing algorithm]]
( ([TIME[2011-04-14 08:58:18 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-April/031181.html>

[100] [CITE[User Interface Enhancements]]
( ([TIME[1999-09-16 05:07:02 +09:00]] 版))
<http://www.w3.org/TR/1999/WD-css3-userint-19990916#color>

[101] [CITE@en[User Interface for CSS3]]
( ([TIME[2000-06-23 03:09:21 +09:00]] 版))
<http://www.w3.org/TR/2000/WD-css3-userint-20000216#color>

[102] [CITE@en[X11 color names - Wikipedia, the free encyclopedia]]
( ([TIME[2012-05-12 16:33:21 +09:00]] 版))
<http://en.wikipedia.org/wiki/X11_color_names>

[103] [CITE@en[Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt]]
( ([[Chris Lilley]] 著, [TIME[2002-04-24 10:35:13 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-svg/2002Apr/0052.html>

[104] [CITE[Why does HTML think “chucknorris” is a color? - Stack Overflow]]
( ([TIME[2013-01-20 22:42:35 +09:00]] 版))
<http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color/12630675>

[105] [CITE@en[Bug 13639 – CSS2 System Colors Should Be Recognized]]
( ([TIME[2013-01-24 09:01:43 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=13639>

[109] [CITE@en[Bug 278498 – ''''''[''''''CSS'''''']'''''' CSS support for SWT colour constants]]
( ([TIME[2014-02-04 11:55:02 +09:00]] 版))
<https://bugs.eclipse.org/bugs/show_bug.cgi?id=278498>

[111] [CITE@en[eclipse.platform.ui.git - Eclipse Platform UI]]
( ([TIME[2014-02-04 11:54:59 +09:00]] 版))
<http://git.eclipse.org/c/platform/eclipse.platform.ui.git/commit/?id=8fab17122c0d0e9d0181ef533f0f5d4b56d31092>

[127] [CITE[IRC logs: freenode / #whatwg / 20140430]]
( ([TIME[2014-05-01 16:26:02 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140430>

[128] [CITE@en[Web Applications 1.0 r8815 Fix some stale links to TR/ pages to be stable links to W3C living standards]]
( ([TIME[2014-09-25 07:13:00 +09:00]] 版))
<https://html5.org/r/8815>

[129] [CITE@en[Re: ''''''[''''''css-color'''''']'''''' Exposing "brand"/"accent" color]]
( ([[fantasai]] 著, [TIME[2014-10-16 09:52:19 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2014Oct/0298.html>

[110] [CITE[OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema]]
([TIME[2011-09-29 13:00:00 +09:00]] 版)
<http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a18_3_9color>

[130] [CITE@en[RFC 7444 - Security Labels in Internet Email]]
([TIME[2015-02-19 09:27:02 +09:00]] 版)
<https://tools.ietf.org/html/rfc7444#section-4>

[FIG(quote)[
[FIGCAPTION[
[131] [CITE@en[QColor Class | Qt 4.8]]
([TIME[2015-11-03 21:56:19 +09:00]] 版)
<http://doc.qt.io/qt-4.8/qcolor.html#setNamedColor>
]FIGCAPTION]

> Sets the RGB value of this QColor to name, which may be in one of these formats:
> #RGB (each of R, G, and B is a single hex digit)
> #RRGGBB
> #RRRGGGBBB
> #RRRRGGGGBBBB
> A name from the list of colors defined in the list of SVG color keyword names provided by the World Wide Web Consortium; for example, "steelblue" or "gainsboro". These color names work on all platforms. Note that these color names are not the same as defined by the Qt::GlobalColor enums, e.g. "green" and Qt::green does not refer to the same color.
> transparent - representing the absence of a color.
> X11 only: If allowX11ColorNames() returns true, any valid X11 color name. See the documentation for XParseColor() for information about valid X11 color names.

]FIG]

[132] [CITE@en[29489 – hashless color quirk definition doesn't interact correctly with scientific notation]]
([TIME[2016-02-23 11:15:08 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=29489>

[133] [CITE@en[Add a note about sci-not hashless colors · whatwg/quirks@4d3fab3]]
([TIME[2016-02-24 13:41:15 +09:00]] 版)
<https://github.com/whatwg/quirks/commit/4d3fab3b2481d94b95bc8a66cb0959a7bfdc8946>

[134] [CITE@en[Fixes #42. Fix redundant currentcolor | <color>. · whatwg/compat@de76913]]
([TIME[2016-03-01 11:47:14 +09:00]] 版)
<https://github.com/whatwg/compat/commit/de769138fd3f8309fef521eb298d97c7e8653794>

[FIG(quote)[
[FIGCAPTION[
[135] [CITE[【茨城新聞】つくばみらい・陽光台小披露 木を多用、開放感]]
( ([TIME[2016-05-27 19:06:37 +09:00]]))
<http://ibarakinews.jp/news/newsdetail.php?f_jun=14267651108083>
]FIGCAPTION]

> 
> 					<li><A href="http://ibarakinews.jp/hp/taste.php" data-ajax='false'>Taste</a></li>
> 					<li><A href="http://ibarakinews.jp/hp/hpdetail.php?f_jun=150" data-ajax='false'>出前授業</a></li>
> 					<li data-role='list-divider'>グルメ</li>
> 					<li><A href="http://ibarakinews.jp/hp/list.php?elem=selection" data-ajax='false'>グルメセレクション</a></li>
> 					<li><A href="http://ibarakinews.jp/hp/list.php?elem=gurume" data-ajax='false'>四季彩クッキング</a></li>
>

]FIG]

[136] [CITE@en[Bug 159963 – Support PANTONE Color Names in CSS color properties]]
([TIME[2016-07-23 10:41:46 +09:00]])
<https://bugs.webkit.org/show_bug.cgi?id=159963>

[137] [CITE@en['''['''css-color''']''' vendor named color enhancement]]
([[Alex Cohen]]著, [TIME[2016-07-22 05:16:28 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2016Jul/0052.html>

[138] [CITE@en[Re: '''['''css-color''']''' vendor named color enhancement]]
([[Tab Atkins Jr.]]著, [TIME[2016-07-26 08:52:41 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2016Jul/0062.html>

[FIG(quote)[
[FIGCAPTION[
[139] [CITE@en[RFC 7986 - New Properties for iCalendar]]
([TIME[2016-10-28 18:04:40 +09:00]])
<https://tools.ietf.org/html/rfc7986>
]FIGCAPTION]

> 
>    Description:  This property specifies a color that clients MAY use
>       when presenting the relevant data to a user.  Typically, this
>       would appear as the "background" color of events or tasks.  The
>       value is a case-insensitive color name taken from the CSS3 set of
>       names, defined in Section 4.3 of '''['''W3C.REC-css3-color-20110607''']'''.
>    Format Definition:  This property is defined by the following
>       notation:
>    color          = "COLOR" colorparam ":" text CRLF
>                      ; Value is CSS3 color name
>    colorparam     = *(";" other-param)
>

]FIG]

[140] [CITE@en['''['''cssom''']''' Resolved value for <color> properties should be used value]]
([[zcorpan]]著, [TIME[2016-12-22 17:29:34 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/084bdfe23bddc50c80f9ac1e129d99f53cd1e581>

[142] [CITE@en[Allow <link rel=mask-icon color>]]
([[XhmikosR]]著, [TIME[2017-03-03 18:09:27 +09:00]])
<https://github.com/whatwg/html/commit/ca61254f5d9fe3e8af5566a095393203e3a99389>

[143] [CITE@en[Clarify the definition of addColorStop()]]
([[Ms2ger]]著, [TIME[2018-01-10 18:42:20 +09:00]])
<https://github.com/whatwg/html/commit/cc508ebd8427dd561ed2dc3d5d9a45a967fccf71>

[144] [CITE@en[Clarify the definition of addColorStop()]]
([[Ms2ger]]著, [TIME[2018-01-10 18:42:20 +09:00]])
<https://github.com/whatwg/html/commit/cc508ebd8427dd561ed2dc3d5d9a45a967fccf71>

[145] [CITE@en[Clarify the definition of addColorStop by Ms2ger · Pull Request #3308 · whatwg/html]]
([TIME[2018-02-12 13:14:11 +09:00]])
<https://github.com/whatwg/html/pull/3308>

[146] [CITE@en[New in Chrome 65  |  Web  |  Google Developers]]
([TIME[2018-03-08 23:09:17 +09:00]])
<https://developers.google.com/web/updates/2018/03/nic65>

[147] [CITE@en[Retiring Obsolete CSS Notes]]
([[Florian Rivoal]]著, [TIME[2018-09-07 00:49:09 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2018Sep/0003.html>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)