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 通りの色が表せることになります。

ウェブセーフカラー

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

# #000000
#      
#
#
#
#

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

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


Last modified: