概要

color プロパティは要素やその装飾のテキストコンテンツの前景を設定します。要素のそれ以外の特徴には影響しません。実際には text-color と呼ばれるべきで、これまでの経緯や CSS Level 1 での登場がなければ、そう命名されていたでしょう。

注意すべきは、色の値は 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) にマップされます。
アニメーションの可否可。 の値として補完しますcolor
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* A CSS Level 1 color */
color: red;

/* The only color added in CSS Level 2 (Revision 1) */
color: orange;

/* CSS Level 3 color, sometimes called a SVG or X11 color */
color: antiquewhite;

/* The color 'lime' with the 3-character dash notation */
color: #0f0;

/* The color 'lime' with the 6-character dash notation */
color: #00ff00;

/* A color using the available functional notations */
color: rgba( 34, 12, 64, 0.3);

/* Use the color of this element's direct ancestor */
color: currentcolor;

/* Global values */
color: inherit;
color: initial;
color: unset;

<color>
color 値はさまざまなキーワードや数値記述を利用できます。詳細は <color>を参照してください。

形式文法

<color>

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

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

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 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
基本サポート 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

関連情報

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

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