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