もくじ

カラーコードで色指定

名前ではわかりにくい色指定

問題は色の名前です。red green blue yellow などはともかく、teal palegreen などはどんな色なのかはっきりしないし、覚えたとしても全部のブラウザが対応しているとは限りません。そこでカラーコードによる色の表現方法があります。前のページにある色の一覧の右側に FF C0 CB などとかかれているのがそれです。

HTML 4.0 で定められた色
色名 R G B
white ffffff
silver c0c0c0
gray 808080
black 000000
red ff0000
maroon 800000
yellow ffff00
olive 808000
lime 00ff00
green 008000
aqua 00ffff
teal 008080
blue 0000ff
navy 000080
fuchsia ff00ff
purple 800080
その他の色
色名 R G B
pink ffc0cb
orange ffa500
ivory fffff0
palegreen 98fb98

カラーコードを使用するには、#のあとに上記の値を続けて書きます。whiteの代わりに #ffffff と書くことができます。(小文字を使いましょう)

white → #ffffff
blue  → #0000ff
gray  → #808080
pink  → #ffc0cb

例えばこのように書きます。

h1 { color : #0000ff }
h1 タグについては 色(color) を #0000ff にする

カラーコードの仕組み

現在のおおかたのコンピュータの色は赤(R)緑(G)青(B)の三原色をそれぞれ256段階の強さに分けて組み合わせていろいろな色を表現します。従って256×256×256=16777216色となります。16M色、fullcolorなどと呼ばれるのはこの色数のことです。24bitカラーという言い方もあります。情報処理の単位1バイト=8ビットで256段階を表現できます。(2の8乗=256)赤緑青の三色で3バイト=24ビットで表現しているからです。

6桁カラーコードは赤緑青の各色の強さを16進法2桁(256段階)で表します。0 ~ 255 の各数字は 00 01 02 ~ 09 0a 0b ~ 0f 10 11 12 13 ~ ff と表されます。

00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f
10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f
20 21 22 23 24 25 26 27 28 29 2a 2b 2c 2d 2e 2f
30 31 32 33 34 35 36 37 38 39 3a 3b 3c 3d 3e 3f
40 41 42 43 44 45 46 47 48 49 4a 4b 4c 4d 4e 4f
50 51 52 53 54 55 56 57 58 59 5a 5b 5c 5d 5e 5f
60 61 62 63 64 65 66 67 68 69 6a 6b 6c 6d 6e 6f
70 71 72 73 74 75 76 77 78 79 7a 7b 7c 7d 7e 7f
80 81 82 83 84 85 86 87 88 89 8a 8b 8c 8d 8e 8f
90 91 92 93 94 95 96 97 98 99 9a 9b 9c 9d 9e 9f
a0 a1 a2 a3 a4 a5 a6 a7 a8 a9 aa ab ac ad ae af
b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf
c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 ca cb cc cd ce cf
d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df
e0 e1 e2 e3 e4 e5 e6 e7 e8 e9 ea eb ec ed ee ef
f0 f1 f2 f3 f4 f5 f6 f7 f8 f9 fa fb fc fd fe ff

6桁のうち最初の2桁が赤、次の2桁が緑、最後の2桁が青の強さを表します。カラーコードであることを表すために最初に # をつけます。たとえば、#ffcc33という具合です。

#ff0000は赤が最大レベルで他がなしですから純粋な赤を表します。#006600は暗い緑、#000033ではほとんど黒のような紺です。さらに赤と青を混ぜれば紫、赤と緑を混ぜると黄、青と緑で水色となりますが、各原色の強さを変えることでいろいろな色を作ることができます。

#ff0000 #006600 #000033 #0000ff #ff00ff
#ffff00 #00ffff #cccc99 #990033 #ffcc99
#03fdcd #d3eff4 #ff8800 #b0dfa9 #e0e0e0
#991117 #123456 #cfd4f2 #e7e3bd #550313

各色6段階⇨16段階⇨256段階

必要な色を決めるときに色見本や、GIMPなどのグラフィックソフトを使うのは良い方法です。でも簡単なものなら次のようにして探り当てることが可能です。

まず、16進法2桁の256段階を、00 33 66 99 cc ff の6段階に等分して組み合わます。#990033などがそれです。こうすると903と覚えられるのでわかりやすくなります。

例として少し暗めで青っぽい紫を出してみます。

紫は#ff00ffですが、少し暗めで青っぽいということなので#ff00ffから始めて赤を暗くしてゆきます。ここで6段階です。33ずつ減らします。

#ff00ff #cc00ff #9900ff #6600ff #3300ff #0000ff 33ずつ

#9900ffが近かったら、赤の99を固定して青を暗くしていきます。これも33ずつにします。

#9900ff #9900cc #990099 #990066 #990033 #990000 33ずつ

#9900cc と #990099 あたりで満足できるならどちらかにします。もう少し細かく決めたいなら16段階にして11ずつ減らしてみます。

#9900cc #9900bb #9900aa #990099 11ずつ

ここでほぼ満足できると思いますが、今度は#9900bbを中心に赤をもう少し変化させたくなるかもしれません。

#bb00bb #aa00bb #9900bb #8800bb #7700bb 11ずつ

もっと追求したければ、より細かく256段階にして bb ba b9 b8 と1ずつ変化させて最適な色を求めることもできます。

#9900bb #9900ba #9900b9 #9900b8 #9900b7 #9900b6 #9900b5 1ずつ

灰色

RGBの成分が同じなら白~灰色~黒になります。

#ffffff #cccccc #999999 #666666 #333333 #000000

薄い色

背景色などに使用する薄い色です。

赤系

#ffffff #fff8ff #fff0ff
#fffff8 #fff8f8 #fff0f8
#fffff0 #fff8f0 #fff0f0

緑系

#ffffff #fffff8 #fffff0
#f8ffff #f8fff8 #f8fff0
#f0ffff #f0fff8 #f0fff0

青系

#ffffff #f8ffff #f0ffff
#fff8ff #f8f8ff #f0f8ff
#fff0ff #f8f0ff #f0f0ff

ウェブページ(Mar.2008)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2005 改訂