CSS の color プロパティは、要素のテキストコンテンツやテキスト装飾における前景色の色の値を設定します。また、他のプロパティの間接的な値として使用される可能性がある currentcolor の値を設定したり、 border-color のような他の色に関するプロパティの既定値にもなったりします。

HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。

構文

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

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

/* <hex-color> 値 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> 値 */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> 値 */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

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

color プロパティは単一の <color> 値で指定します。

なお、値は color の形でなければなりません。 <gradient> は実際の型が <image> であるため使用できません。

<color>
要素のテキストや装飾部分の色を設定します。

形式文法

<color>

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

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

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

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

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

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

アクセシビリティの考慮事項

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。

色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

仕様書

仕様書 状態 備考
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 の定義
勧告 初回定義
初期値Varies from one browser to another
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
アニメーションの種類
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Keyword color valuesChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 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.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
RGB functional notation (rgb())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
HSL color values (hsl())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Alpha color values (rgba(), hsla())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
currentcolorChrome 完全対応 1Edge ? Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transparentChrome 完全対応 1Edge ? Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rebeccapurpleChrome 完全対応 38Edge ? Firefox 完全対応 33IE 完全対応 11Opera 完全対応 25Safari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android ? Safari iOS 完全対応 8Samsung 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 完全対応 49IE ? Opera 完全対応 39
無効
完全対応 39
無効
無効 From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
Space-separated functional color notationsChrome 完全対応 65Edge ? Firefox 完全対応 52IE ? Opera 完全対応 52Safari ? WebView Android 完全対応 65Chrome Android 完全対応 65Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 52Safari iOS ? Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome 完全対応 66Edge ? Firefox 完全対応 52IE ? Opera 完全対応 53Safari ? WebView Android 完全対応 66Chrome Android 完全対応 66Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 53Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

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

最終更新者: mfuji09,