<color>

CSS の <color> データ型は sRGB 色空間にある一つの色を表します。 <color> はアルファチャネル透過値を含むこともでき、背景とどのように合成するかを示すこともできます。

<color> は以下の何れかの方法で定義することができます。

キーワードの使用 (blue や transparent など)
RGB 立方体座標方式の使用 (#+16進数値や、rgb() や rgba() の関数記法によって)
HSL 円柱座標方式の使用 (hsl() や hsla() の関数記法によって)

メモ: この記事は <color> データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 CSS を使用した HTML 要素への色の適用を参照してください。

構文

<color> データ型は以下のいずれか1つの方法を使って指定されます。

メモ: <color> の色は詳細に定義されていますが、出力機器によって (時には著しく) 違って見えるかもしれません。出力機器の大半は色補正がされておらず、一部のブラウザーは出力機器の色プロファイルに対応していないからです。

色キーワード

色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば red、blue、brown、lightseagreen といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。

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

HTML は CSS1 に見られる基本16色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS 及び SVG のみで使用してください。
HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。
CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
同じ色を表すキーワードがいくつかあります。
- aqua / cyan
- fuchsia / magenta
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
キーワードは X11 の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。

メモ: 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。

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

仕様書	RGB	キーワード	RGB 16 進表記
CSS Level 1		`black`	`#000000`
		`silver`	`#c0c0c0`
		`gray`	`#808080`
		`white`	`#ffffff`
		`maroon`	`#800000`
		`red`	`#ff0000`
		`purple`	`#800080`
		`fuchsia`	`#ff00ff`
		`green`	`#008000`
		`lime`	`#00ff00`
		`olive`	`#808000`
		`yellow`	`#ffff00`
		`navy`	`#000080`
		`blue`	`#0000ff`
		`teal`	`#008080`
		`aqua`	`#00ffff`
CSS Level 2 (Revision 1)		`orange`	`#ffa500`
CSS Color Module Level 3		`aliceblue`	`#f0f8ff`
		`antiquewhite`	`#faebd7`
		`aquamarine`	`#7fffd4`
		`azure`	`#f0ffff`
		`beige`	`#f5f5dc`
		`bisque`	`#ffe4c4`
		`blanchedalmond`	`#ffebcd`
		`blueviolet`	`#8a2be2`
		`brown`	`#a52a2a`
		`burlywood`	`#deb887`
		`cadetblue`	`#5f9ea0`
		`chartreuse`	`#7fff00`
		`chocolate`	`#d2691e`
		`coral`	`#ff7f50`
		`cornflowerblue`	`#6495ed`
		`cornsilk`	`#fff8dc`
		`crimson`	`#dc143c`
		`cyan` (`aqua` の別名)	`#00ffff`
		`darkblue`	`#00008b`
		`darkcyan`	`#008b8b`
		`darkgoldenrod`	`#b8860b`
		`darkgray`	`#a9a9a9`
		`darkgreen`	`#006400`
		`darkgrey`	`#a9a9a9`
		`darkkhaki`	`#bdb76b`
		`darkmagenta`	`#8b008b`
		`darkolivegreen`	`#556b2f`
		`darkorange`	`#ff8c00`
		`darkorchid`	`#9932cc`
		`darkred`	`#8b0000`
		`darksalmon`	`#e9967a`
		`darkseagreen`	`#8fbc8f`
		`darkslateblue`	`#483d8b`
		`darkslategray`	`#2f4f4f`
		`darkslategrey`	`#2f4f4f`
		`darkturquoise`	`#00ced1`
		`darkviolet`	`#9400d3`
		`deeppink`	`#ff1493`
		`deepskyblue`	`#00bfff`
		`dimgray`	`#696969`
		`dimgrey`	`#696969`
		`dodgerblue`	`#1e90ff`
		`firebrick`	`#b22222`
		`floralwhite`	`#fffaf0`
		`forestgreen`	`#228b22`
		`gainsboro`	`#dcdcdc`
		`ghostwhite`	`#f8f8ff`
		`gold`	`#ffd700`
		`goldenrod`	`#daa520`
		`greenyellow`	`#adff2f`
		`grey`	`#808080`
		`honeydew`	`#f0fff0`
		`hotpink`	`#ff69b4`
		`indianred`	`#cd5c5c`
		`indigo`	`#4b0082`
		`ivory`	`#fffff0`
		`khaki`	`#f0e68c`
		`lavender`	`#e6e6fa`
		`lavenderblush`	`#fff0f5`
		`lawngreen`	`#7cfc00`
		`lemonchiffon`	`#fffacd`
		`lightblue`	`#add8e6`
		`lightcoral`	`#f08080`
		`lightcyan`	`#e0ffff`
	`lightgoldenrodyellow`	`#fafad2`
	`lightgray`	`#d3d3d3`
	`lightgreen`	`#90ee90`
	`lightgrey`	`#d3d3d3`
	`lightpink`	`#ffb6c1`
	`lightsalmon`	`#ffa07a`
	`lightseagreen`	`#20b2aa`
	`lightskyblue`	`#87cefa`
	`lightslategray`	`#778899`
	`lightslategrey`	`#778899`
	`lightsteelblue`	`#b0c4de`
	`lightyellow`	`#ffffe0`
	`limegreen`	`#32cd32`
	`linen`	`#faf0e6`
	`magenta` (`fuchsia` の別名)	`#ff00ff`
	`mediumaquamarine`	`#66cdaa`
	`mediumblue`	`#0000cd`
	`mediumorchid`	`#ba55d3`
	`mediumpurple`	`#9370db`
	`mediumseagreen`	`#3cb371`
	`mediumslateblue`	`#7b68ee`
	`mediumspringgreen`	`#00fa9a`
	`mediumturquoise`	`#48d1cc`
	`mediumvioletred`	`#c71585`
	`midnightblue`	`#191970`
	`mintcream`	`#f5fffa`
	`mistyrose`	`#ffe4e1`
	`moccasin`	`#ffe4b5`
	`navajowhite`	`#ffdead`
	`oldlace`	`#fdf5e6`
	`olivedrab`	`#6b8e23`
	`orangered`	`#ff4500`
	`orchid`	`#da70d6`
	`palegoldenrod`	`#eee8aa`
	`palegreen`	`#98fb98`
	`paleturquoise`	`#afeeee`
	`palevioletred`	`#db7093`
	`papayawhip`	`#ffefd5`
	`peachpuff`	`#ffdab9`
	`peru`	`#cd853f`
	`pink`	`#ffc0cb`
	`plum`	`#dda0dd`
	`powderblue`	`#b0e0e6`
	`rosybrown`	`#bc8f8f`
	`royalblue`	`#4169e1`
	`saddlebrown`	`#8b4513`
	`salmon`	`#fa8072`
	`sandybrown`	`#f4a460`
	`seagreen`	`#2e8b57`
	`seashell`	`#fff5ee`
	`sienna`	`#a0522d`
	`skyblue`	`#87ceeb`
	`slateblue`	`#6a5acd`
	`slategray`	`#708090`
	`slategrey`	`#708090`
	`snow`	`#fffafa`
	`springgreen`	`#00ff7f`
	`steelblue`	`#4682b4`
	`tan`	`#d2b48c`
	`thistle`	`#d8bfd8`
	`tomato`	`#ff6347`
	`turquoise`	`#40e0d0`
	`violet`	`#ee82ee`
	`wheat`	`#f5deb3`
	`whitesmoke`	`#f5f5f5`
	`yellowgreen`	`#9acd32`
CSS Color Module Level 4		`rebeccapurple`	`#663399`

`transparent` キーワード

transparent は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値 rgba(0,0,0,0) へのショートカットです。

互換性のメモ: グラデーションの場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は transparent をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファ―チャンネルが 0 の値である黒として扱うかもしれません。

歴史的なメモ: transparent キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは background プロパティと border プロパティの2つにおいて、通常の <color> の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 transparent は色として再定義されました。 <color> の値を使用することができる場所ならば、どこでも使用することができるようになりました。

`currentColor` キーワード

currentColor キーワードは、要素の color プロパティの値を表します。これで color の値をプロパティが既定で受け取らなくても利用することができます。

currentColor が color プロパティの値として使用された場合、 color プロパティが継承した値が使用されます。

currentColor の例

<div style="color:blue; border: 1px dashed currentColor;">
  この文字列の色は青です。
  <div style="background:currentColor; height:9px;"></div>
  このブロックは青い境界線で囲まれています。
</div>

`rgb()` と `rgba()`

メモ: CSS Colors Level 4 では、 rgba() は rgb() の別名です。 Level 4 標準を実装するブラウザ―では、同じ引数を受け取り同じ挙動をします。

色は赤 (red)、緑 (green)、青 (blue) の成分によって定義され (RGB モデル)、16進表記や関数表記を使用することができます。任意のアルファ成分は透過度を表します。

構文

16進表記: #RRGGBB[AA]: R (赤)、 G (緑)、 B (青) と A (アルファ) は16進数の文字 (0-9, A-F) です。 A は任意です。例えば、 #ff0000 は #ff0000ff と同等です。
16進表記: #RGB[A]: R (赤)、 G (緑)、 B (青) と A (アルファ) は16進数の文字 (0-9, A-F) です。 A は任意です。3桁表記 (#RGB) は6桁形式 (#RRGGBB) を短縮したものです。例えば、 #f09 は #ff0099 と同じ色です。同様に、4桁の RGB 表記 (#RGBA) は8桁形式 (#RRGGBBAA) を短縮したものです。例えば、 #0f38 は #00ff3388 と同じ色です。
関数表記: rgb(R, G, B[, A]) 又は rgba(R, G, B, A): R (赤)、 G (緑)、 B (青) は 整数またはパーセント表記のどちらかで、255が100%に対応します。 A (アルファ)は0と1の間の数値、またはパーセント表記で、数値1が100% (不透明) です。
関数表記: rgb(R G B[ A]) 又は rgba(R G B A): CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。

例

RGB の例

/* これらの例はすべて同じ色、ピンク色を指定します。 */

/* 16進表記 */
#f09
#F09
#ff0099
#FF0099

/* 関数表記 */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0) /* ERROR! 小数は使用しないでください */
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! 整数とパーセントを混ぜないでください */
rgb(255 0 153)

/* アルファ値付き16進表記 */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* アルファ値付き関数表記 */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* 空白文字による表記 */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* 浮動小数点値による実数表記 */
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)

RGBa の例

/* 16進表記 */
#3a30                    /* 透明な緑 */ 
#3A3F                    /* 不透明な緑 */ 
#33aa3300                /* 透明な緑 */ 
#33AA3388                /* 50%半透明の緑 */ 

/* 実数表記 */
rgba(51, 170, 51, .1)    /* 10%半透明の緑 */ 
rgba(51, 170, 51, .4)    /* 40%半透明の緑 */ 
rgba(51, 170, 51, .7)    /* 70%半透明の緑 */ 
rgba(51, 170, 51,  1)    /* 不透明な緑 */ 

/* 空白文字による表記 */
rgba(51 170 51 / 0.4)    /* 40%半透明の緑 */ 
rgba(51 170 51 / 40%)    /* 40%半透明の緑 */ 

/* 浮動小数点値による実数表記 */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

`hsl()` と `hsla()`

メモ: CSS Colors Level 4 では、 hsla() は hsl() の別名です。 Level 4 標準を実装するブラウザ―では、同じ引数を受け取り同じ挙動をします。

色は色相(H)、彩度(S)、輝度(L) (HSL モデル) によって、 hsl() および hsla() 関数表記で指定することができます。 RGB に対する HSL の長所の一つは、より直感的であることです。欲しい色を推測したり、微調整したりすることができます。合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。

構文

関数表記: hsl(H, S, L[, A]) 又は hsla(H, S, L, A): H (色相) は色相環の角度を CSS Color Module Level 4 で定義されている deg、 rad、 grad、 turn の単位で与えます。単位のない数値の場合は、 CSS Color Module Level 3 で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、青=240deg、などのように色相環を回ります。 <angle> は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。; S (彩度) と L (明度) はパーセント表記です。彩度100%は完全に鮮やかな色で、彩度0%は完全に薄い色 (灰色) です。明度100%は白で、明度0%は黒で、明度50%は「普通」です。; A (アルファ)は0と1の間の数値、またはパーセント表記で、数値1が100% (不透明) です。
関数表記: hsl(H S L[ A]) 又は hsla(H S L A): CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。

例

HSL の例

/* これらの例はすべて同じ色、ラベンダーを指定します。 */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

彩度100%の色

表記	説明	例
`hsl(0, 100%, 50%)`	red
`hsl(30, 100%, 50%)`	orange
`hsl(60, 100%, 50%)`	yellow
`hsl(90, 100%, 50%)`	lime green
`hsl(120, 100%, 50%)`	green
`hsl(150, 100%, 50%)`	blue-green
`hsl(180, 100%, 50%)`	cyan
`hsl(210, 100%, 50%)`	sky blue
`hsl(240, 100%, 50%)`	blue
`hsl(270, 100%, 50%)`	purple
`hsl(300, 100%, 50%)`	magenta
`hsl(330, 100%, 50%)`	pink
`hsl(360, 100%, 50%)`	red

緑の明度の変化

表記	説明	例
`hsl(120, 100%, 0%)`	black
`hsl(120, 100%, 20%)`
`hsl(120, 100%, 40%)`
`hsl(120, 100%, 60%)`
`hsl(120, 100%, 80%)`
`hsl(120, 100%, 100%)`	white

緑の彩度の変化

表記	説明	例
`hsl(120, 100%, 50%)`	green
`hsl(120, 80%, 50%)`
`hsl(120, 60%, 50%)`
`hsl(120, 40%, 50%)`
`hsl(120, 20%, 50%)`
`hsl(120, 0%, 50%)`	gray

HSLa の例

hsla(240, 100%, 50%, .05)     /*  5%半透明の青 */ 
hsla(240, 100%, 50%, .4)      /*  40%半透明の青 */ 
hsla(240, 100%, 50%, .7)      /*  70%半透明の青 */ 
hsla(240, 100%, 50%, 1)       /* 不透明な青 */ 

/* 空白表記 */
hsla(240 100% 50% / .05)      /*   5%半透明の青 */ 

/* アルファのパーセント表記 */
hsla(240 100% 50% / 5%)       /*   5%半透明の青 */

システム色

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

ActiveBorder: アクティブウィンドウの境界線。
ActiveCaption: アクティブウィンドウのキャプション。 CaptionText を前景色として使用してください。
AppWorkspace: 複数文書インターフェイス (MDI) の背景色。
Background: デスクトップの背景です。
ButtonFace: 周囲の境界線で1つの平面を作って3Dになっている3D要素の表面の背景色です。　ButtonText を前景色として使用してください。
ButtonHighlight: 周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。
ButtonShadow: 周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。
ButtonText: プッシュボタンの文字列です。 ButtonFace または ThreeDFace を背景色として使用してください。
CaptionText: キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 ActiveCaption を背景色として使用してください。
GrayText: 灰色の (無効な) 文字列です。
Highlight: 選択され制御可能な項目です。 HighlightText を前景色に使用してください。
HighlightText: 選択され制御可能な項目の文字列です。 Highlight を背景色に使用してください。
InactiveBorder: 非アクティブウィンドウの境界線です。
InactiveCaption: 非アクティブウィンドウのキャプションです。 InactiveCaptionText を前景色に使用してください。
InactiveCaptionText: 非アクティブなキャプションの文字列の色です。 InactiveCaption を背景色に使用してください。
InfoBackground: ツールチップコントロールの背景色です。 InfoText を前景色に使用してください。
InfoText: ツールチップコントロールの文字色です。 InfoBackground を背景色に使用してください。
Menu: メニューの背景。 MenuText または -moz-MenuBarText を前景色に使用してください。
MenuText: メニュー内の文字列。 Menu を背景色に使用してください。
Scrollbar: スクロールバーの背景色。
ThreeDDarkShadow: 囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の暗い方 (ふつうは外側) の色。
ThreeDFace: 囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の表面の色。前景色には ButtonText を使用してください。
ThreeDHighlight: 囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺の明るい方 (ふつうは外側) の色。
ThreeDLightShadow: 囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺のっ暗い方 (ふつうは内側) の色。
ThreeDShadow: 囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の明るい方 (ふつうは内側) の色。
Window: ウィンドウの背景。 WindowText を前景色に使用してください。
WindowFrame: ウィンドウの枠。
WindowText: ウィンドウ内の文字列。 Window を背景色に使用してください。

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 the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-moz-CellHighlightText: Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-moz-Combobox: Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText: Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog: Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.
-moz-DialogText: Text color for dialog boxes. Should be used with the -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow: Background color for even-numbered rows in a tree. Should be used with the -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 the -moz-FieldText foreground color.
-moz-FieldText: 既定の mozilla のテキストフィールドの前景色。Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
-moz-html-CellHighlight: Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText: Text color for highlighted items in HTML <select>s. Should be used with the -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 items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText: Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.
-moz-MenuBarText: Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-moz-MenuBarHoverText: 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 the -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 -moz-appearance: -moz-win-communications-toolbox;.
-moz-win-mediatext: Should be used for text in objects with -moz-appearance: -moz-win-media-toolbox.
-moz-win-accentcolor: Gecko 56 が必要
Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.
-moz-win-accentcolortext: Gecko 56 が必要
Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

Mozilla 色設定拡張

-moz-activehyperlinktext: アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
-moz-default-background-color: 文書の背景色のユーザー設定です。
-moz-default-color: 文字色のユーザー設定です。
-moz-hyperlinktext: 未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
-moz-visitedhyperlinktext: 訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

補間

アニメーションやグラデーションにおいて、 <color> の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間はアルファ乗算済み sRGBA 色空間で行われます。アニメーションでは補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

アクセシビリティへの配慮

色を見分けることが難しい人がいます。 WCAG 2.0 勧告は、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは Color and color contrast をご覧ください。

仕様書

仕様書	状態	備考
CSS Color Module Level 4 <color> の定義	草案	`rebeccapurple`、4 桁 (`#RGBA`) および 8 桁 (`#RRGGBBAA`) の 16 進記法、`rgb()` および `hsl()` の別名である `rgba()` および `hsla()` (どちらも引数の構文が同じ)、関数の引数をコンマの代わりに空白で区切るこおｔ、アルファ値のパーセント値表記、`hsl()` 色の色相の角度表記を追加。
CSS Color Module Level 3 <color> の定義	勧告	システム色を非推奨化。 SVG 色を追加。`rgba()`, `hsl()`, `hsla()` 関数記法を追加
CSS Level 2 (Revision 1) <color> の定義	勧告	`orange` キーワードとシステム色を追加
CSS Level 1 <color> の定義	勧告	初回定義。基本16色のキーワードを含む。

機能	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本対応	1	12	1	あり	あり	あり
Keyword color values	1	12	1	3¹	3.5	1
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	1	12	1	3	3.5	1
RGB functional notation (`rgb()`)	1	12	1	4	3.5	1
HSL color values (`hsl()`)	1	12	1	9	9.5	3.1
Alpha color values (`rgba()`, `hsla()`)	1	12	3	9	10	3.1
`currentcolor`	1	?	1.5	9	9.5	4
`transparent`	1	?	3	9	10	3.1
`rebeccapurple`	38	?	33	11	25	あり
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	63 52²	なし	49	?	39³	9.1
Space-separated functional color notations	65	?	52	?	52	?
Allow floats in `rgb()` and `rgba()`	66	?	52	?	53	?

機能	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
基本対応	1	1	12	4	あり	あり	あり
Keyword color values	あり	あり	あり	あり	あり	あり	あり
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	あり	あり	あり	あり	あり	あり	あり
RGB functional notation (`rgb()`)	あり	あり	あり	あり	あり	あり	あり
HSL color values (`hsl()`)	あり	あり	あり	あり	あり	あり	あり
Alpha color values (`rgba()`, `hsla()`)	あり	あり	あり	4	あり	あり	あり
`currentcolor`	?	?	?	?	?	?	?
`transparent`	?	?	?	?	?	?	?
`rebeccapurple`	あり	?	?	33	?	8	?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	?	?	なし	?	なし	?	?
Space-separated functional color notations	65	65	?	52	52	?	?
Allow floats in `rgb()` and `rgba()`	66	66	?	52	53	?	?

1. Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).

2. From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. From version 39: this feature is behind the Enable experimental Web Platform features preference.

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOS 版 Safari	Samsung Internet
基本対応	完全対応 1	完全対応 12	完全対応 1	完全対応あり	完全対応あり	完全対応あり	完全対応 1	完全対応 1	完全対応 12	完全対応 4	完全対応あり	完全対応あり	完全対応あり
Keyword color values	完全対応 1	完全対応 12	完全対応 1	完全対応 3 補足完全対応 3 補足補足 Internet Explorer 8 and later support gray color keywords spelled with an e (`grey`, `darkgrey`, `darkslategrey`, `dimgrey`, `lightgrey`, and `lightslategrey`). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (`gray`, `darkgray`, `darkslategray`, `dimgray`, `lightgray`, and `lightslategray`).	完全対応 3.5	完全対応 1	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	完全対応 1	完全対応 12	完全対応 1	完全対応 3	完全対応 3.5	完全対応 1	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり
RGB functional notation (`rgb()`)	完全対応 1	完全対応 12	完全対応 1	完全対応 4	完全対応 3.5	完全対応 1	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり
HSL color values (`hsl()`)	完全対応 1	完全対応 12	完全対応 1	完全対応 9	完全対応 9.5	完全対応 3.1	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり	完全対応あり
Alpha color values (`rgba()`, `hsla()`)	完全対応 1	完全対応 12	完全対応 3	完全対応 9	完全対応 10	完全対応 3.1	完全対応あり	完全対応あり	完全対応あり	完全対応 4	完全対応あり	完全対応あり	完全対応あり
`currentcolor`	完全対応 1	?	完全対応 1.5	完全対応 9	完全対応 9.5	完全対応 4	?	?	?	?	?	?	?
`transparent`	完全対応 1	?	完全対応 3	完全対応 9	完全対応 10	完全対応 3.1	?	?	?	?	?	?	?
`rebeccapurple`	完全対応 38	?	完全対応 33	完全対応 11	完全対応 25	完全対応あり	完全対応あり	?	?	完全対応 33	?	完全対応 8	?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	完全対応 63 完全対応 63 完全対応 52 無効無効 From version 52: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	未対応なし	完全対応 49	?	完全対応 39 無効完全対応 39 無効無効 From version 39: this feature is behind the `Enable experimental Web Platform features` preference.	完全対応 9.1	?	?	未対応なし	?	未対応なし	?	?
Space-separated functional color notations	完全対応 65	?	完全対応 52	?	完全対応 52	?	完全対応 65	完全対応 65	?	完全対応 52	完全対応 52	?	?
Allow floats in `rgb()` and `rgba()`	完全対応 66	?	完全対応 52	?	完全対応 53	?	完全対応 66	完全対応 66	?	完全対応 52	完全対応 53	?	?

凡例

完全対応: 完全対応
未対応: 未対応
実装状況不明: 実装状況不明
実装ノートを参照してください。: 実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。

<color>

構文

色キーワード

`transparent` キーワード

`currentColor` キーワード

currentColor の例

`rgb()` と `rgba()`

構文

例

RGB の例

RGBa の例

`hsl()` と `hsla()`

構文

例

HSL の例

彩度100%の色

緑の明度の変化

緑の彩度の変化

HSLa の例

システム色

Mozilla システム色拡張

Mozilla 色設定拡張

補間

アクセシビリティへの配慮

仕様書

ブラウザーの対応

凡例

関連情報

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

<color>

構文

色キーワード

transparent キーワード

currentColor キーワード

currentColor の例

rgb() と rgba()

構文

例

RGB の例

RGBa の例

hsl() と hsla()

構文

例

HSL の例

彩度100%の色

緑の明度の変化

緑の彩度の変化

HSLa の例

システム色

Mozilla システム色拡張

Mozilla 色設定拡張

補間

アクセシビリティへの配慮

仕様書

ブラウザーの対応

凡例

関連情報

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

最高のウェブ開発を学びましょう

ありがとうございます！ 購読確認用の新着メールを探してください。

`transparent` キーワード

`currentColor` キーワード

`rgb()` と `rgba()`

`hsl()` と `hsla()`

ありがとうございます！購読確認用の新着メールを探してください。