color
CSS の color
プロパティは、要素のテキストやテキスト装飾における前景色の色の値を設定し、 currentcolor
の値を設定します。 currentcolor
は他のプロパティの間接的な値として使用される可能性があり、 border-color
のような他の色に関するプロパティの既定値にもなったりします。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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>ここで
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
ここで
<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>? )ここで
<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: #ff000080; }
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 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 の定義 |
勧告 | 初回定義 |
初期値 | ブラウザーによって異なる |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 半透明の値なら、計算値はそれに対応する rgba() 。さもなくばその値に対応する rgb() 。transparent キーワードは rgba(0,0,0,0) にマップされる。 |
アニメーションの種類 | 色 |
ブラウザーの互換性
BCD tables only load in the browser