問題は色の名前です。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 |
色数を多く表現できないコンピュータのために、色数を少なくしたものがあります。いまでも色見本を出すときに全部を出すのは無理なのでこれに従って少ない色数にすることがあります。16進法２桁の256段階を、00 33 66 99 cc ff の６段階に等分して組み合わます。#990033などがそれです。こうすると９０３と覚えられるのでわかりやすくなります。
慣れてくるとカラーコードからだいたいの色がわかります。たとえば、#03fdcd は、６段階では #00ffcc に近いでしょう。青がかなり入った緑ですから青緑の明るいものということになります。
６桁のカラーコードの色見本から拾った色がいまいちで、もう少し明るくしたいとかもう少し緑を強くとかというときにこの知識は役に立ちます。
ｒｇｂが同じなら白～灰色～黒になります。
| #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 |