<color>

ジャンプ先:

構文
補間
アクセシビリティの考慮事項
仕様書
ブラウザーの対応
関連情報

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

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

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

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

構文

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

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

色キーワード

色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば red, blue, black, 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 色

RGB 色モデルは赤、緑、青の成分によって指定された色を定義します。任意のアルファ成分は色の透過性を表します。

構文

RGB 色は16進表記 (# の接頭辞つき) と関数表記 (rgb(), rgba()) の両方で表すことができます。

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

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 構文

この例は、一つの色を 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)
rgb(255 0 153)

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

RGB の様々な透過性

/* 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() can be used as an alias here, with same behavior) */   
rgb(51 170 51 / .4)     /* 40%半透明の緑 */ 
rgb(51 170 51 / 40%)    /* 40%半透明の緑 */ 
/* 実数値の関数構文 */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

HSL 色

HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた色を定義します。任意のアルファ成分は色の透過性を表します。

多くのデザイナーは、 HSL は色相、彩度、明度をそれぞれ個別に調整できるので、 RGB より直感的であると考えています。 HSL は一連の合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。

構文

HSL 色は関数表記の hsl() および hsla() を通して説明されます。

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

関数表記: 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

HSL の様々な透過性

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: HTML の <select> における強調表示されたアイテムの背景色。前景色には -moz-html-CellHighlightText を使用します。 Gecko 1.9 以前では、 -moz-CellHighlight を使用してください。
-moz-html-CellHighlightText: HTML の <select> における強調表示されたアイテムのテキストの色。背景色には -moz-html-CellHighlight を使用します。 Gecko 1.9 以前では、 -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色のキーワードを含む。

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Edge Mobile	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`color`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応あり	Opera 完全対応あり	Safari 完全対応あり	WebView Android 完全対応 1	Chrome Android 完全対応 18	Edge Mobile 完全対応 12	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり
Keyword color values	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 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`).	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応あり	Chrome Android 完全対応あり	Edge Mobile 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 3	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応あり	Chrome Android 完全対応あり	Edge Mobile 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり
RGB functional notation (`rgb()`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 4	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応あり	Chrome Android 完全対応あり	Edge Mobile 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり
HSL color values (`hsl()`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 9	Opera 完全対応 9.5	Safari 完全対応 3.1	WebView Android 完全対応あり	Chrome Android 完全対応あり	Edge Mobile 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり
Alpha color values (`rgba()`, `hsla()`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 3	IE 完全対応 9	Opera 完全対応 10	Safari 完全対応 3.1	WebView Android 完全対応あり	Chrome Android 完全対応あり	Edge Mobile 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり
`currentcolor`	Chrome 完全対応 1	Edge ?	Firefox 完全対応 1.5	IE 完全対応 9	Opera 完全対応 9.5	Safari 完全対応 4	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`transparent`	Chrome 完全対応 1	Edge ?	Firefox 完全対応 3	IE 完全対応 9	Opera 完全対応 10	Safari 完全対応 3.1	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`rebeccapurple`	Chrome 完全対応 38	Edge ?	Firefox 完全対応 33	IE 完全対応 11	Opera 完全対応 25	Safari 完全対応あり	WebView Android 完全対応あり	Chrome Android ?	Edge Mobile ?	Firefox Android 完全対応 33	Opera Android ?	Safari iOS 完全対応 8	Samsung Internet Android ?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	Chrome 完全対応 62 完全対応 62 完全対応 52 無効無効 From version 52: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge 未対応なし	Firefox 完全対応 49	IE ?	Opera 完全対応 39 無効完全対応 39 無効無効 From version 39: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完全対応 9.1	WebView Android ?	Chrome Android ?	Edge Mobile 未対応なし	Firefox Android ?	Opera Android 未対応なし	Safari iOS ?	Samsung Internet Android ?
Space-separated functional color notations	Chrome 完全対応 65	Edge ?	Firefox 完全対応 52	IE ?	Opera 完全対応 52	Safari ?	WebView Android 完全対応 65	Chrome Android 完全対応 65	Edge Mobile ?	Firefox Android 完全対応 52	Opera Android 完全対応 52	Safari iOS ?	Samsung Internet Android ?
Allow floats in `rgb()` and `rgba()`	Chrome 完全対応 66	Edge ?	Firefox 完全対応 52	IE ?	Opera 完全対応 53	Safari ?	WebView Android 完全対応 66	Chrome Android 完全対応 66	Edge Mobile ?	Firefox Android 完全対応 52	Opera Android 完全対応 53	Safari iOS ?	Samsung Internet Android ?

凡例

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

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

タグ:

このページの貢献者: mdnwebdocs-bot, mfuji09, rigani, yyss, Sebastianz, Simplexible, fscholz, teoli, ethertank, Marsf, sosleepy, Level

最終更新者: mdnwebdocs-bot, 2019/03/23 20:01:39