MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

color プロパティは要素のテキストコンテンツやその 装飾 の前景 を設定します。

/* キーワード値 */
color: currentcolor;

/* <named-color> 値 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> 値 */
color: #0f0;
color: #00ff00;
color: #0f0a;
color: #00ff0080;

/* <rgb()> 値 */
color: rgb(34, 12, 64, 0.3);
color: rgba(34, 12, 64, 0.3);
color: rgb(34 12 64 / 0.3);
color: rgba(34 12 64 / 0.3);

/* <hsl()> 値 */
color: hsl(30, 100%, 50%, 0.3);
color: hsla(30, 100%, 50%, 0.3);
color: hsl(30 100% 50% / 0.3);
color: hsla(30 100% 50% / 0.3);

/* グローバル値 */
color: inherit;
color: initial;
color: unset;

このプロパティは、他のプロパティで二次的な値として使用される <currentcolor> 値も設定します。この値は、border-color などの色に関するプロパティの既定値です。

注意すべきは、色の値は CSS3 以降の透明色値を含む均等色 (uniform color) でなければなりません。CSS の <image> である <gradient> にすることはできません。

初期値Varies from one browser to another
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
Animation typecolor
正規順序形式文法で定義される一意のあいまいでない順序

構文

color プロパティは、ひとつの <color> 値を指定します。

<color>
要素のテキスト部分の色を示す <color> 値です。

形式文法

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

以下の例はすべて、要素のテキストを赤色にします:

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% 透過 */
element { color: rgba(255, 0, 0, 0.5); } 
element { color: hsla(0, 100%, 50%, 0.5); }

仕様

仕様書 策定状況 コメント
CSS Color Module Level 4
color の定義
勧告改訂案 rgb()rgba()hsl()hsla() 関数記法のカンマがない構文を追加。rgb()hsl() にアルファ値を含めることを許可して、rgba() および hsla() をそれらの (非推奨な) 別名に変更。
rebeccapurple キーワードを追加。
最後の桁がアルファ値を表す、4 桁および 8 桁の 16 進数による色の値を追加。
hwb()device-cmyk()color() 関数を追加。
CSS Transitions
color の定義
草案 color をアニメーション可能として定義
CSS Color Module Level 3
color の定義
勧告 system-color を非推奨化;  SVG color を追加; rgba(), hsl(), hsla() 関数記法を追加
CSS Level 2 (Revision 1)
color の定義
勧告 orange color と system-color を追加
CSS Level 1
color の定義
勧告  

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
色キーワード 1.0 1.0 (1.0) 3.0[1] 3.5 1.0 (85)
#RRGGBB, #RGB 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
rgb() 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
hsl() 1.0 1.0 (1.5) 9.0 9.5 3.1 (525)
rgba(), hsla() 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[2] 10.0 3.1 (525)
rebeccapurple 38.0 33 (33) 11 25.0 7.1
#RRGGBBAA, #RGBA 未サポート[3] 49 (49) ? 未サポート[4] 9.1
rgb() および hsl() の別名である rgba() および hsla()
カンマではなく空白で区切る関数のパラメーター
アルファ値のパーセンテージ表記
hsl() 色の色相の角度表記
? 52 (52) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有)
rgba(), hsla() (有) (有) (有) (有) (有)
rebeccapurple (有) 33.0 (33) ? ? 8
#RRGGBBAA, #RGBA 未サポート[3] 49.0 (49) 未サポート 未サポート ?
rgb() および hsl() の別名である rgba() および hsla()
カンマではなく空白で区切る関数のパラメーター
アルファ値のパーセンテージ表記
hsl() 色の色相の角度表記
? 52.0 (52) ? ? ?

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

[2] IE 7-8 は transparent キーワードを backgroundborder でのみサポートしています。color: transparent; は IE では黒で表示されます。また、IE6 は transparent のボーダーを黒で表示します。

[3] この機能は Chrome 52.0 より、chrome://flags の "Experimental Web Platform features" フラグで制御する形でサポートしています。Chromium bug 76362 をご覧ください。

[4] この機能は Opera 39.0 より、chrome://flags の "Enable experimental Web Platform features" フラグで制御する形でサポートしています。

関連情報

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

 このページの貢献者: yyss, Sebastianz, wizAmit, slayslot, mitsuba-clover, ethertank, sosleepy, Level, Marsf
 最終更新者: yyss,