<color>

概要

CSS の <color> データ型は sRGB 色空間にある一つの色を表します。色の記述にはキーワードを使うか、RGB 立方体座標方式を使うか（#-16進数値や rgb() と rgba() の関数記法を使います）、または HSL 円柱座標方式を使います（hsl() と hsla() 関数記法）。利用可能な色の値は、最新の CSS3 カラーに達するまでに、仕様書の発展にともない拡張されてきたことに注意してください。

sRGB 空間にある色と関連づけて、<color> 値はアルファチャンネル座標である透明度を持つこともできます。これはその色と背景色の合成方法を示します。

CSS の色は正確に定義されていますが、出力デバイスによって違って見えるかもしれません。出力デバイスの大半は色補正がされておらず、一部のブラウザは出力デバイスのカラープロファイルをサポートしていません。これらがないと、色の描画が大きく変化する可能性があります。

注記: W3C の WCAG 2.0 勧告はウェブ著者に、特定の情報、アクション、結果を伝えるためだけに色を使わないよう強くアドバイスしています。ユーザによっては色の識別に問題を抱えていて、伝達された内容が把握できないかもしれないからです。もちろん、控えるべきなのは色を使うことではなく、ある情報を表すためだけに使うことです。

補間

<color> CSS データ型の値はアニメーションや <gradient> 値の作成ができるように補間可能です。この場合色はその構成要素である赤、緑、青それぞれが実数、浮動小数点数として扱われ補間されます。予期しない灰色が現れるのを避けるため、色の補間はアルファ乗算済み sRGBA 色空間で行われることに注意してください。アニメーションでは補間の速度はアニメーションと関連づけられた timing function によって決められます。

値

複数の方法で <color> 値を記述できます。

色キーワード

色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば red、blue、brown、lightseagreen といったものです。名前に色を書きますが、ほとんどは人工的な定義です。仕様書が発展するたびに利用可能な値の一覧は大きく変化しました:

CSS Level 1 は基本的な 16 色だけを受け付けました。VGA グラフィックカードで表示可能な色の組み合わせという意味で、VGA カラーと命名されました。
CSS Level 2 は orange キーワードを追加しました。
当初から、ブラウザはその他の色を受け付けていました。初期のブラウザのいくつかは X11 アプリケーションであったため、ほとんどの色リストは X11 という名前でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく拡張色キーワード、X11 カラー、SVG カラーと呼ばれます。

キーワードを使うとき、考慮すべき点がいくつかあります:

HTML では、HTMLで一般的な基本 16 色以外は使用できません。HTML は未知の値を独自アルゴリズムを使って、完全に別な色に変換します。基本 16 色以外のキーワードは SVG と CSS でのみ使用すべきです。
CSS プロパティでは未知のキーワードは無効になります。無効なプロパティは無視され、その色は一切効果を持ちません。これは HTML と違った動作です。
CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
同じ色を表すキーワードがあります:
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategray
キーワードの名前は X11 の色名からとられたものですが、メーカーが特定のハードウェアに適応させたので、X11 システムのシステムカラーとは異なる可能性があります。

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

`transparent` キーワード

transparent は完全な透明色を表すキーワードです。設定された要素では背景色が見えるようになるでしょう。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値 rgba(0,0,0,0) へのショートカットです。

transparent の変遷
transparent キーワードは CSS Level 2 (Revision 1) では本当の色ではありませんでした。2 つの CSS プロパティ background と border で、通常 <color> 値を置く場所に使える特殊なキーワードでした。本来は、継承された不透明色を上書きできるように追加されました。

アルファチャンネルを通じて透明度がサポートされると、transparent は本当の色として CSS Colors Level 3 で再定義され、color プロパティ^[**]のような <color> 値が必要な場所ならどこでも使えるようになりました。

`currentColor` キーワード

要素の color プロパティの計算値です。プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。

currentColor キーワードを color プロパティそのものに使うと、color: inherit として扱われます。

実動例

色のついた線 (ベタ塗りされた div) の色は親要素から継承した color プロパティのものです：

<div style="color:darkred">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div>

このテキストの色は次の線の色と同じです:

テキストの続き。

<div style="color:blue">
 The color of this text is the same as the one of the line:
  <div style="background:currentcolor; height:1px"></div>
 Some more text.
</div>

このテキストの色は次の線の色と同じです:

テキストの続き。

rgb()

色は red-green-blue (RGB) モデルを使って二つの方法で定義できます:

16進記法 #RRGGBB と #RGB

"#" に続く6個の１６進文字 (0-9, A-F).
"#" に続く3個の１６進文字 (0-9, A-F).

3文字 RGB 記法 (#RGB) と6文字記法 (#RRGGBB) は等価です。
例えば、#f03 と #ff0033 同じ色を表します。

関数記法 rgb(R,G,B)

"rgb" に続く3個の <integer> または3個の <percentage> 値。
整数値 255 および16進の F または FF は 100% に対応します。

/* これらの例はすべて同じ RGB color を指定します: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERROR! 小数ではなく整数を使用してください */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERROR! 整数と割合を混在しないでください */

`hsl()`

色は hsl() 関数記法で定義できます。RGB に対する HSL の利点は、より直感的であることです: ほしい色を推測可能であり、微調整できます。同一色相配色を作るのも容易です（色相（hue）を同じにして輝度（lightness/darkness）と彩度（saturation）を変化させる）。

色相（Hue） はカラーサークル（虹を円で表現したもの）の角度として表されます。角度は単位の無い <number> として与えられます。定義により red=0=360 であり、他の色は円の周りに広がります： green=120, blue=240 など。角度であるため、-120=240 や 480=120 のように暗黙のうちに変換されます。

彩度と輝度は割合で表現されます。
100% は完全彩度で、0% は灰色の色合いです。
100% の輝度は白、0% の輝度は黒、50% の輝度は "普通" です。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */

`rgba()`

Red-green-blue-alpha モデル (RGBa) の色を rgba() 関数記法で定義できます。RGB 色モデルに "alpha" を追加して色の透明度を指定できるように拡張します。

a は透明度を意味します: 0=透明（transparent）; 1=不透明（opaque）;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */

`hsla()`

Hue-saturation-lightness-alpha モデル (HSLa) の色は hsla() 関数記法で定義できます。HSLa は、HSL 色モデルに "alpha" を追加して色の透明度を指定できるように拡張します。
a は透明度を意味します: 0=透明（transparent）; 1=不透明（opaque）;

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */

システムカラー

すべてのシステムカラーがすべてのシステムでサポートされているわけではありません。一般公開されるウェブページでの利用はです。

ActiveBorder: Active window border.
ActiveCaption: Active window caption. Should be used with CaptionText foreground color.
AppWorkspace: Background color of multiple document interface.
Background: Desktop background.
ButtonFace: Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with ButtonText foreground color.
ButtonHighlight: The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow: The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText: Text on push buttons. Should be used with ButtonFace or ThreeDFace background color.
CaptionText: Text in caption, size box, and scrollbar arrow box. Should be used with ActiveCaption background color.
GrayText: Grayed (disabled) text.
Highlight: Item(s) selected in a control. Should be used with HighlightText foreground color.
HighlightText: Text of item(s) selected in a control. Should be used with Highlight background color.
InactiveBorder: Inactive window border.
InactiveCaption: Inactive window caption. Should be used with InactiveCaptionText foreground color.
InactiveCaptionText: Color of text in an inactive caption. Should be used with InactiveCaption background color.
InfoBackground: Background color for tooltip controls. Should be used with InfoText foreground color.
InfoText: Text color for tooltip controls. Should be used with InfoBackground background color.
Menu: Menu background. Should be used with MenuText or -moz-MenuBarText foreground color.
MenuText: Text in menus. Should be used with Menu background color.
Scrollbar: Scroll bar gray area.
ThreeDDarkShadow: The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDFace: The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with ButtonText foreground color.
ThreeDHighlight: The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDLightShadow: The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDShadow: The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
Window: Window background. Should be used with WindowText foreground color.
WindowFrame: Window frame.
WindowText: Text in windows. Should be used with Window background color.

Mozilla システムカラー拡張

-moz-ButtonDefault: The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace: The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText: The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight: Background color for selected item in a tree widget. Should be used with -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-moz-CellHighlightText: Text color for a selected item in a tree. Should be used with -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-moz-Combobox: Background color for comboboxes. Should be used with -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText: Background Text color for comboboxes. Should be used with -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog: Background color for dialog boxes. Should be used with -moz-DialogText foreground color.
-moz-DialogText: Text color for dialog boxes. Should be used with -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow: Background color for even-numbered rows in a tree. Should be used with -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.
-moz-Field: デフォルトの mozilla のテキストフィールドの背景色。Should be used with -moz-FieldText foreground color.
-moz-FieldText: デフォルトの mozilla のテキストフィールドの前景色. Should be used with -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background colors.
-moz-html-CellHighlight: Background color for highlighted item in HTML select. Should be used with -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText: Background color for highlighted item in HTML select. Should be used with -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
-moz-mac-chrome-inactive
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover: Background color for hovered menu item. Often similar to Highlight. Should be used with -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText: Foreground color for hovered menu item. Often similar to HighlightText. Should be used with -moz-MenuHover background color.
-moz-MenuBarText: Foreground color for text in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-moz-MenuBarHoverText: Foreground color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext: デフォルトのプラットフォームのハイパーリンク色
-moz-OddTreeRow: Background color for odd-numbered rows in a tree. Should be used with -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
-moz-win-communicationstext: Should be used for text in objects with appearance:-moz-win-communications-toolbox.
-moz-win-mediatext: Should be used for text in objects with appearance:-moz-win-media-toolbox.

Mozilla カラー設定拡張

-moz-activehyperlinktext: User's preference for text color of active links. Should be used against default document background.

-moz-default-background-color: User's preference for document background-color.

-moz-default-color: User's preference for text color.
-moz-hyperlinktext: User's preference for text color of unvisited links. Should be used against default document background.
-moz-visitedhyperlinktext: User's preference for text color of visited links. Should be used against default document background.

仕様

仕様書	策定状況	コメント
CSS Color Module Level 3 <color> の定義	勧告	システムカラーを非推奨化。SVGカラーを追加。`rgba()`, `hsl()`, `hsla()` 関数記法を追加
CSS Level 2 (Revision 1) <color> の定義	勧告	orange 色とシステムカラーを追加
CSS Level 1 <color> の定義	勧告

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
色キーワード	1.0	1.0 (1.0)	3.0 ^[*]	3.5	1.0 (85)
#RRGGBB \| #RGB	1.0	1.0 (1.0)	3.0	3.5	1.0 (85)
rgb (R,G,B)	1.0	1.0 (1.0)	4.0	3.5	1.0 (85)
hsl (H,S,L)	1.0	1.0 (1.5)	9.0	9.5	3.1 (525)
rgba (R,G,B,a)	1.0	3.0 (1.9)	9.0 #	10.0	3.1 (525)
hsla (H,S,L,a)	1.0	3.0 (1.9)	9.0 #	10.0	3.1 (525)
currentColor	1.0	1.5 (1.8)	9.0	9.5	4.0 (528)
transparent	1.0	3.0 (1.9)	9.0 ^[**]	10.0	3.1 (525)

機能	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本サポート	?	?	?	?	?

[*] 'e'の綴りのgrey (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) がサポートされたのは IE 8.0 からです。IE 3 から IE 6 は 'a' の綴りの別形だけをサポートします: gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[**] IE 7-8 は透明度を background と border でのみサポートしています。color:transparent は IE では黒で表示されます。

<color>

概要

補間

値

色キーワード

`transparent` キーワード

`currentColor` キーワード

実動例

rgb()

`hsl()`

`rgba()`

`hsla()`

システムカラー

Mozilla システムカラー拡張

Mozilla カラー設定拡張

仕様

ブラウザ実装状況

関連情報

ドキュメントのタグと貢献者

<color>

概要

補間

値

色キーワード

transparent キーワード

currentColor キーワード

実動例

rgb()

hsl()

rgba()

hsla()

システムカラー

Mozilla システムカラー拡張

Mozilla カラー設定拡張

仕様

ブラウザ実装状況

関連情報

ドキュメントのタグと貢献者

`transparent` キーワード

`currentColor` キーワード

`hsl()`

`rgba()`

`hsla()`