HTMLで色を指定するには、色名(redなど)・16進数のカラーコード(#FF0000など)・rgb()の3通りの書き方があり、現在はCSSのcolorやbackground-colorプロパティで指定するのが基本です。
HTMLの色指定とは
HTMLの色指定とは、文字や背景などページ上の要素に付ける色を、CSSの値として書き表すことです。HTML自体は文書の構造を表す言語のため、色のような見た目はCSS(見た目を設定する言語)側で指定します。
色指定の3つの方法(カラーコード・RGB・色名)
色の書き表し方には、次の3つの方法があります。いずれもCSSで<color>値として定義されている書き方です。
| 方法 | 書き方の例 | 特徴 |
|---|---|---|
| 色名(カラーネーム) | red | 覚えやすいが140種類以上の定義済みの色のみ |
| 16進カラーコード | #FF0000 | 約1677万色を表せる。実務で最もよく使われる |
| rgb() | rgb(255, 0, 0) | 赤・緑・青の量を0〜255の10進数で指定 |
この例の赤のように、基本的な色は3方式のどれでも表現できます。ただし、色名は約140種の定義済みの色に限られます。
使える色名は色名(カラーネーム)一覧で、コピペで使える色ごとのコード表はカラーコード一覧と色見本で紹介しています。
今はstyle/CSSで指定する(旧color属性は非推奨)
以前のHTMLでは<font color="red">のように、fontタグのcolor属性で色を指定していました。しかし現在のHTML Living Standardではfontタグ自体が廃止されており、新しく書くページでは使いません。
現在の色指定は、タグに直接書けるstyle属性か、CSSファイル(スタイルシート)で行います。このページでは、1行だけで動作を試せるstyle属性を使って解説します。
色を指定する書き方 - カラーコードの基本
色を指定する基本の書き方は、style="color: #FF0000;"のようにstyle属性へCSSのプロパティ名と値をセットで書く形です。カラーコードは「#+6桁の16進数」で1つの色を表します。
16進数カラーコードの読み方(#RRGGBB)
カラーコードの6桁は、2桁ずつ「赤(RR)・緑(GG)・青(BB)」の光の強さを表しています。16進数とは0〜9とA〜Fの16種類の文字で数を表す方法で、各成分は00(最小)からFF(最大)までの256段階です。
たとえば#FF0000は赤だけが最大なので純粋な赤に、#000000は全成分が最小なので黒に、#FFFFFFは全成分が最大なので白になります。3成分の混ぜ方の組み合わせで、約1677万色を表現できる仕組みです。
style属性で色を付ける最小サンプル
次のコードは、同じ赤色を3通りの書き方で文字に色付けするサンプルです。
<p style="color: red;">色名で指定した赤い文字</p>
<p style="color: #FF0000;">カラーコードで指定した赤い文字</p>
<p style="color: rgb(255, 0, 0);">rgb()で指定した赤い文字</p>3行とも同じ赤色で表示されます。Try itで#FF0000を#0000FFに書き換えたり、rgb(255, 0, 0)の数値を変えたりして、色が変わることを試してみてください。
色指定の使い分け - 文字色・背景色・枠線
どこの色を変更するかは、CSSのプロパティ名で使い分けます。文字色はcolor、背景色はbackground-color、枠線はborderで指定します。
それぞれの書き方の対応は、次の表の通りです。
| プロパティ | 変わる場所 | 書き方の例 |
|---|---|---|
| color | 文字色 | color: #FF0000; |
| background-color | 背景色 | background-color: #FFFF99; |
| border | 枠線 | border: 2px solid #2196F3; |
複数のプロパティを同時に使うときは、セミコロン(;)で区切って並べます。次のコードで、組み合わせの動作を確認できます。
<p style="color: #FFFFFF; background-color: #2196F3;">白い文字と青い背景</p>
<p style="border: 2px solid #FF0000; color: #FF0000;">赤い枠線と赤い文字</p>1つ目は文字色と背景色、2つ目は枠線と文字色を組み合わせた例です。背景だけにカラーを指定したい場合は、background-colorのみを書けば文字色は既定のまま(通常は黒)背景に色が付きます。
HTMLの色指定とカラーコードの基本に関するよくある質問
カラーコードの3桁記法(#f00)と6桁(#ff0000)は何が違いますか?
3桁記法は、各桁を2回ずつ繰り返した6桁記法の短縮形で、#f00は#ff0000と同じ赤を表します。表せる色の数は6桁より少なくなりますが、書き方としてはどちらも有効です。
色が反映されない・変わらないときの原因は?
カラーコード先頭の#の書き忘れ、colorなどプロパティ名のつづりミス、コロン(:)とセミコロン(;)の混同が主な原因です。style="color: #FF0000;"の形と1文字ずつ見比べると特定しやすくなります。
色を付ける専用のHTMLタグはありますか?
現在のHTMLに色付け専用のタグはなく、pやspanなど任意のタグにstyle属性やCSSで色を指定します。文中の一部だけ色を変更したいときは、その範囲をspanタグで囲んで色を付けるのが定番です。
