HTMLの色指定

色指定のしかたの例

すでに style.css に

body {
  margin: 5%;
}

と書いてあるところで，背景色を銀色に指定したい場合は，

body {
  margin: 5%;
  background-color: silver;
}

のように付け加えます。

大見出し（<h1>...</h1>）の文字色を赤にするには

body {
  margin: 5%;
  background-color: silver;
}
h1 {
  color: red;
}

とします。

これらのスタイル指定は別ファイルで行うのが推奨ですが，次のようにHTMLファイルに直接書き込む簡便な方法もあります。

<h1 style="color:red">ほげほげ</h1>

タグの付いていないところの文字色を指定するには，無意味なタグ span を使って，例えば次のようにします。

<p>これは<span style="color:red">ほげほげ</span>です。</p>

色を多用するのは素人です。

色名による色指定

HTMLでの色指定は，次の色名または後述の16進RGB表記を使います。色名では大文字・小文字は区別されませんので，Red も red も RED も同じことです。

■ black = "#000000"
■ green = "#008000"
■ silver = "#C0C0C0"
■ lime = "#00FF00"
■ gray = "#808080"
■ olive = "#808000"
■ white = "#FFFFFF"
■ yellow = "#FFFF00"
■ maroon = "#800000"
■ navy = "#000080"
■ red = "#FF0000"
■ blue = "#0000FF"
■ purple = "#800080"
■ teal = "#008080"
■ fuchsia = "#FF00FF"
■ aqua = "#00FFFF"

16進RGB 6けた表記による色指定

色は赤（Red），緑（Green），青（Blue）の3原色に分けられます。これら3原色の各成分の強さを 0123456789ABCDEF の文字を二つ連ねて表すことがよくあります。これが16進RGB表記です。

各成分ごとに，最も暗い状態が 00 で，最も明るい状態が FF です。たとえば "#000000" は3原色とも最も暗い状態ですので，黒を表します。逆に "#FFFFFF" は3原色とも最も明るい状態ですので，白を表します。また "#FF0000" は赤だけが最も明るい状態ですので，純粋な赤を表します。

00 から FF までで 16×16 = 256 通りの状態が表せます。3成分が組み合わされば，256×256×256 通りの色が表せることになります。

モダンなブラウザなら次の左側をクリックすればカラーピッカーが現れるはずです：

ウェブセーフカラー

昔は多くの色を同時に扱うことができないパソコンがあったので，各成分を 00，33，66，99，CC，FF の6通りに限って，6×6×6 = 216 通りの色だけにするウェブセーフカラーがよく使われていました。今のパソコンでは216通りに制限する意味はありませんが，あまり選択肢が多いと選びにくいので，この216色がよく使われます。次のボタンをクリックすれば216通りの組合せを試すことができます。

赤緑青
# #000000
#      
#
#
#
#

16進RGB 3けた表記による色指定

たとえば #99CCFF は #9CF と略記することができます。

Last modified: