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 type | 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 キーワードを background と border でのみサポートしています。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" フラグで制御する形でサポートしています。
関連情報
<color>データ型