color：文字の色を指定する

colorプロパティの説明

colorは、文字の色やテキストの装飾に関わる前景色を指定します。ここで指定された値は、currentcolorの色として採用されます。例えば、他のプロパティの色の既定値がcurrentcolorだった場合に、その値を省略すると文字と同じ色で表示されます。

文字色を変更する場合は、文字の視認性が下がらないように、背景色とのコントラストに配慮しましょう。

colorに指定できる値

<color>

CSSで使用できる色を表すデータ型の値です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。

colorの使い方とサンプル

colorプロパティの構文は以下の通りです。

/* キーワード値 */
color: red;
color: green;
color: blue;

/* 16進数 */
color: #f00;
color: #ff0000;

/* RBG値 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* HSL値 */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

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

colorの実例

それでは実際にcolorプロパティの書き方を見ていきましょう。文字の色は子要素にも継承するので、一部の文字色だけを変更したい場合は、個別に範囲を定めましょう。

.color_samp1 {
	color: red;
}
.color_samp2 {
	color: #0066FF;
}
.color_samp2 span:first-child {
	color: rgb(99, 99, 99);
}

<div class="color_samp1">color: red;</div>
<div class="color_samp2"><span>color</span>: <span>#0066FF;</span></div>