color

概要

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

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

構文

/* 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); }

仕様

ブラウザ実装状況

関連情報

• <color> データ型