仕様書

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

構文

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

基本色キーワード

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

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

orange

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

拡張色キーワード

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

[93] 基本色キーワードと 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 では gray と grey の表記揺れをすべて含んでいますが、 歴史的には片方のみにしか対応していない実装もありました。

色名

[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] にあった magenta は [J4] で HTML 4 にあわせて 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 色も安全ですし、実際そういう事情を知らずに使っている人は沢山います。 (事情を知ってても、 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 では lightgray を除いて確認出来ません。

また、

• [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] は (本物の X11 の) rgb.txt に全て含まれます。
• [30] そして、 [X11] に [Mozilla] を加えたものはやはり rgb.txt の subset です。
• [31] [X11] + [Mozilla] は SVG 1.0 や CSS3 で定義された (システム色を除く) 色名と同じです。

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

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

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

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

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

gray & grey

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

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

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

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

rrggbb

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

<P><FONT COLOR="FFFFFF">ÌÀÉÅÄÇÈ ÎÈÐÅÄÊÈ</FONT>

HoneydewTab と HoneydewTad

[11] >>10 に詳しいですが、2つの幻の色名,

[12] Mozilla ではこの指定は無視されますが、 WinIE ではいずれも

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

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

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

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

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

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

端末でのレンダリング

[61] GNU `gettext' utilities (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.

実利用例

• [533] index.htm, Shridhar, 2025-11-03T10:26:43.000Z, 2005-09-13T23:11:27.971Z https://web.archive.org/web/20050913231103fw_/http://www.thinaboomi.com/nove30/index.htm

<hr width="100%" color="rgb(150,0,200)">

文脈

歴史

メモ

[148] Color Names for World Wide Web, 2024-08-18T02:52:45.000Z, 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色, # の16進数表記, CSS と同様の rgb 関数, rgb-icc 関数, system-color 関数が指定できます。
• [38] 色指定は正しく指定しましょう - Web標準普及プロジェクト http://www.mozilla.gr.jp/standards/webtips0008.html # 省略問題について。
• [41] html:body/@bgcolor 属性の値に不正な値を指定し場合について。 ] (SP) の場合、 Mozilla 1.3 では既定背景色、 WinIE 6.0 では黒になりました。 # や ; ではどちらの UA でも黒になりました。なお、利用者指定の既定値や前景色との関係は調べてません。
• [42] -moz-Field, -moz-FieldText, ...

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

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

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

(名無しさん [sage])

[47]

• -webkit-link
• -webkit-activelink
• -webkit-focus-ring-color
• -webkit-text

(名無しさん [sage])

[48] -moz-activehyperlinktext (名無しさん [sage])

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

[52]

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

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

[54] 奇癖モードの CSS <color> 特性値の解釈に関して:

• 1桁・2桁の16進数の場合
  • WinIE 6 と Opera 9 は宣言ごと無視します。
  • Firefox 2 は 先頭に # と4〜5個の 0 を補って 6桁の16進数として解釈します。
• 3桁の16進数 xyz の場合
  • WinIE 6 と Opera 9 では #xyz = #xxyyzz と解釈されます。
  • Firefox 2 では #000xyz と解釈されます。
  • 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 は先頭に # と1〜2個の 0 を補って6桁の16進数として解釈します。
  • Opera 9 は先頭に # を補い、 最初の3桁以外は除去し、3桁の16進数として解釈します。
• 6桁の16進数の場合
  • 3ブラウザとも、先頭に # を補って6桁の16進数として解釈します。
• 7桁以上の16進数の場合
  • WinIE 6 と Firefox 2 は宣言ごと無視します。
  • Opera 9 は先頭に # を補い、 最初の6桁以外は除去し、6桁の16進数として解釈します。

[55] SMIL 3.0 Media Object (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 blush 要素の color 属性の構文は background-color と同じになっています。ただし、 inherit は意味を成さないとして禁じられています。

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

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

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

[60] IRC logs: freenode / #whatwg / 20090210 (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

color (MathML)

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