問題は色の名前です。red green blue yellow などはともかく、teal palegreen などはどんな色なのかはっきりしないし、覚えたとしても全部のブラウザが対応しているとは限りません。そこでカラーコードによる色の表現方法があります。前のページにある色の一覧の右側に FF C0 CB などとかかれているのがそれです。
|
|
カラーコードを使用するには、#のあとに上記の値を続けて書きます。whiteの代わりに #ffffff と書くことができます。（小文字を使いましょう）
white → #ffffff blue → #0000ff gray → #808080 pink → #ffc0cb
例えばこのように書きます。
h1 { color : #0000ff }
h1 タグについては 色(color) を #0000ff にする
現在のおおかたのコンピュータの色は赤（Ｒ）緑（Ｇ）青（Ｂ）の三原色をそれぞれ２５６段階の強さに分けて組み合わせていろいろな色を表現します。従って２５６×２５６×２５６＝１６７７７２１６色となります。１６Ｍ色、fullcolorなどと呼ばれるのはこの色数のことです。２４bitカラーという言い方もあります。情報処理の単位１バイト＝８ビットで２５６段階を表現できます。（２の８乗＝２５６）赤緑青の三色で３バイト＝２４ビットで表現しているからです。
６桁カラーコードは赤緑青の各色の強さを１６進法２桁（２５６段階）で表します。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
６桁のうち最初の２桁が赤、次の２桁が緑、最後の２桁が青の強さを表します。カラーコードであることを表すために最初に # をつけます。たとえば、#ffcc33という具合です。
#ff0000は赤が最大レベルで他がなしですから純粋な赤を表します。#006600は暗い緑、#000033ではほとんど黒のような紺です。さらに赤と青を混ぜれば紫、赤と緑を混ぜると黄、青と緑で水色となりますが、各原色の強さを変えることでいろいろな色を作ることができます。
| #ff0000 | #006600 | #000033 | #0000ff | #ff00ff |
| #ffff00 | #00ffff | #cccc99 | #990033 | #ffcc99 |
| #03fdcd | #d3eff4 | #ff8800 | #b0dfa9 | #e0e0e0 |
| #991117 | #123456 | #cfd4f2 | #e7e3bd | #550313 |
必要な色を決めるときに色見本や、GIMPなどのグラフィックソフトを使うのは良い方法です。でも簡単なものなら次のようにして探り当てることが可能です。
まず、16進法２桁の256段階を、00 33 66 99 cc ff の６段階に等分して組み合わます。#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 |