<color>

<color> は CSS のデータ型で、 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 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` (synonym of `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` (synonym of `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 の例

HTML

<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[a](R, G, B[, A]): R (赤)、 G (緑)、 B (青) は 数値またはパーセント表記のどちらかで、255が100%に対応します。 A (アルファ)は0と1の間の数値、またはパーセント表記で、数値1が100% (不透明) です。
関数表記: rgb[a](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)
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%)

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(51 170 51 / 0.4)    /*  40%半透明の緑 */ 
rgba(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[a](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[a](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%半透明の青 */

システム色

色強制モード (forced-colors メディアクエリで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。

以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。

なお、これらのキーワードは大文字小文字を区別しませんが、読みやすさのために大文字小文字を交ぜて表記しています。

ActiveText: アクティブなリンクのテキスト
ButtonFace: プッシュボタンの背景
ButtonText: プッシュボタンのテキスト
Canvas: アプリケーションのコンテンツや文書の背景
CanvasText: アプリケーションのコンテンツや文書のテキスト
Field: 入力フィールドの背景
FieldText: 入力フィールドのテキスト
GrayText: 無効なテキスト
Highlight: コントロールの中で選択されているアイテムの背景
HighlightText: コントロールの中で選択されているアイテムのテキスト
LinkText: アクティブではない、訪問していないリンクのテキスト
VisitedText: 訪問したリンクのテキスト

非推奨のシステム色のキーワード

以下のキーワードは、 CSS Color モジュールの早期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用はです。

ActiveBorder: アクティブウィンドウの境界線。
ActiveCaption: アクティブウィンドウのキャプション。 CaptionText を前景色として使用してください。
AppWorkspace: 複数文書インターフェイス (MDI) の背景色。
Background: デスクトップの背景です。
ButtonHighlight: 周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。
ButtonShadow: 周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。
CaptionText: キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 ActiveCaption を背景色として使用してください。
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: ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。
-moz-ButtonHoverFace: マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は ThreeDFace または ButtonFace)。 -moz-ButtonHoverText の前景色と一緒に使う必要があります。
-moz-ButtonHoverText: マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は ButtonText)。 -moz-ButtonHoverFace background の背景色と一緒に使う必要があります。
-moz-CellHighlight: ツリーウィジェットで選択された項目の背景色。 -moz-CellHighlightText の前景色と一緒に使用する必要があります。 -moz-html-CellHighlight も参照。
-moz-CellHighlightText: ツリー内で選択された項目のテキスト色。 -moz-CellHighlight background の背景色と一緒に使う必要があります。 -moz-html-CellHighlightText も参照。
-moz-Combobox: コンボボックスの背景色。 -moz-ComboboxText の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-Field を使用してください。
-moz-ComboboxText: コンボボックスのテキスト色。 -moz-Combobox の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-FieldText を使用してください。
-moz-Dialog: ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。
-moz-DialogText: ダイアログボックスのテキスト色。 -moz-DialogText の背景色と一緒に使う必要があります。
-moz-dragtargetzone
-moz-EvenTreeRow: ツリー内の偶数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-OddTreeRow も参照してください。
-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: ホバーされたメニュー項目の背景色。 Highlight によく似ています。 -moz-MenuHoverText や -moz-MenuBarHoverText の前景色と一緒に使う必要があります。
-moz-MenuHoverText: ホバーされたメニュー項目のテキスト色。 HighlightText によく似ています。 -moz-MenuHover の背景色と一緒に使う必要があります。
-moz-MenuBarText: メニューバーのテキスト色。 MenuText によく似ています。 Menu の背景の上に使用します。
-moz-MenuBarHoverText: メニューバーのホバーされたテキストの色。多くの場合、 -moz-MenuHoverText に似ています。 -moz-MenuHover 背景の上に使用する必要があります。
-moz-nativehyperlinktext: 既定のプラットフォームのハイパーリンク色
-moz-OddTreeRow: ツリー内の奇数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-EvenTreeRow も参照してください。
-moz-win-communicationstext: -moz-appearance: -moz-win-communications-toolbox; を持つオブジェクトのテキストに使用する必要があります。
-moz-win-mediatext: -moz-appearance: -moz-win-media-toolbox を持つオブj稀有とのテキストに使用する必要があります。
-moz-win-accentcolor: スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセントカラーにアクセスするために使用します。
-moz-win-accentcolortext: スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。

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	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
<color>	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 3	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応 1	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0
Alpha color values (`rgba()`, `hsla()`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 3	IE 完全対応 9	Opera 完全対応 10	Safari 完全対応 3.1	WebView Android 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 2	Samsung Internet Android 完全対応 1.0
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 完全対応 79	Firefox 完全対応 49	IE 未対応なし	Opera 完全対応 49 完全対応 49 完全対応 39 無効無効 From version 39: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完全対応 9.1	WebView Android 完全対応 62	Chrome Android 完全対応 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.	Firefox Android 完全対応 49	Opera Android 完全対応 47 完全対応 47 完全対応 41 無効無効 From version 41: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完全対応 9.3	Samsung Internet Android 完全対応 8.0
`currentcolor`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1.5	IE 完全対応 9	Opera 完全対応 9.5	Safari 完全対応 4	WebView Android 完全対応 37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 14	Safari iOS 完全対応 3.2	Samsung Internet Android 完全対応 1.0
Allow floats in `rgb()` and `rgba()`	Chrome 完全対応 66	Edge 完全対応 79	Firefox 完全対応 52	IE 未対応なし	Opera 完全対応 53	Safari 完全対応 12.1	WebView Android 完全対応 66	Chrome Android 完全対応 66	Firefox Android 完全対応 52	Opera Android 完全対応 47	Safari iOS 完全対応 12.2	Samsung Internet Android 完全対応 9.0
HSL color values (`hsl()`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 9	Opera 完全対応 9.5	Safari 完全対応 3.1	WebView Android 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 2	Samsung Internet Android 完全対応 1.0
`hsl()` can accept alpha values	Chrome 完全対応 65	Edge 完全対応 79	Firefox 完全対応 52	IE 未対応なし	Opera 完全対応 52	Safari 完全対応 12.1	WebView Android 完全対応 65	Chrome Android 完全対応 65	Firefox Android 完全対応 52	Opera Android 完全対応 47	Safari iOS 完全対応 12.2	Samsung Internet Android 完全対応 9.0
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 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0
`rebeccapurple`	Chrome 完全対応 38	Edge 完全対応 12	Firefox 完全対応 33	IE 完全対応 11	Opera 完全対応 25	Safari 完全対応 9	WebView Android 完全対応 38	Chrome Android 完全対応 38	Firefox Android 完全対応 33	Opera Android 完全対応 25	Safari iOS 完全対応 8	Samsung Internet Android 完全対応 3.0
`rgb()` can accept alpha values	Chrome 完全対応 65	Edge 完全対応 79	Firefox 完全対応 52	IE 未対応なし	Opera 完全対応 52	Safari 完全対応 12.1	WebView Android 完全対応 65	Chrome Android 完全対応 65	Firefox Android 完全対応 52	Opera Android 完全対応 47	Safari iOS 完全対応 12.2	Samsung Internet Android 完全対応 9.0
RGB functional notation (`rgb()`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 4	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 3	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0
Space-separated functional color notations	Chrome 完全対応 65	Edge 完全対応 79	Firefox 完全対応 52	IE 未対応なし	Opera 完全対応 52	Safari 完全対応 12.1	WebView Android 完全対応 65	Chrome Android 完全対応 65	Firefox Android 完全対応 52	Opera Android 完全対応 47	Safari iOS 完全対応 12.2	Samsung Internet Android 完全対応 9.0
`transparent`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 3	IE 完全対応 9	Opera 完全対応 10	Safari 完全対応 3.1	WebView Android 完全対応 37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 2	Samsung Internet Android 完全対応 1.0

凡例

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

構文