color

style.css

/* カラーネーム */
div.test { color: red;}

/* 16進数（6桁） */
div.test1 { color: #0000ff;}

/* 16進数（3桁省略形） */
div.test2 { color: #f00;}

/* RGB関数 */
div.test3 { color: rgb(255, 128, 0);}

/* RGBA（透明度付き） */
div.test4 { color: rgba(0, 0, 255, 0.5);}

/* HSL（色相・彩度・明度） */
div.test5 { color: hsl(120, 100%, 40%);}

/* inherit（親要素の色を継承） */
div.test6 { color: inherit;}

/* currentColor（同要素の color 値を参照） */
div.test7 { border: 2px solid currentColor; color: #3498db;}

<p style="color: #0000ff;">ここはp要素です。『color: #0000ff』と指定しています。</p>

<p style="color: red;">ここはp要素です。『color: red』と指定しています。</p>

<p style="color: rgba(0, 0, 0, 0.6);">ここはp要素です。『color: rgba(0, 0, 0, 0.6)』と指定しています。</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

文字色(フォントカラー)を指定できます。カラーコード、もしくはカラーネームが使用可能です。使用可能なカラーネーム一覧はW3C様の公式サイトをご参照ください。

RGBAカラーモデルはIE8以下のIEでは未対応となっていますのでご注意ください。

『color』プロパティはこちらの記事でも解説をしております。