Web Frontier

基本16色とは、HTMLなどでも定義されていますが、 どのような環境でも確実に色彩がズレずに見えるものです。これには以下の色があります。 今では1677万色など色数の多く表現できるＰＣがほとんどなので、 あまりこだわる人はいなくなってきています。 余談ですが、「fuchsia」というのは中南米原産の「フクシア」という赤紫色の花で、 また、色としても英語圏では使われ「ピンク」「明るい赤紫色｛あかむらさきいろ｝」を示すそうです。 基本16色のみで作るのが望ましいですが、バラエティ豊かなページにはかなり無理があるでしょう。

■ Black ■ Silver ■ Gray □ White

■ Maroon ■ Red ■ Purple ■ Fuchsia

■ Green ■ Lime ■ Olive ■ Yellow

■ Navy ■ Blue ■ Teal ■ Aqua

Webセーフカラーとは、256色環境でもハッキリと表示できるカラーコードの事を言います。 現在では大分コンピュータも発展してきたので、細かいカラーコードを記述している方も多いのですが、 どのような環境でも、また旧マシンで見ている方に取っても見れるようにするには、やはりこのセーフカラーを使った方がいいでしょう。 カラーコードは、基本的に「#39F04A」のようになっている訳ですが、「39」「F0」「4A」という値に分かれます。 RGB値というのを聞いた事があると思いますが、光の三原色である「赤」「緑」「青」の強度ですべての色を表現しています。 つまり、この場合は、R値が39、G値がF0、B値が4Aという事になります。また、強度は、0〜255まであります。 ちょうどこれを16進法に直してコンピュータは扱いますので、39→57、F0→240、4A→74、という風になります。 255は16進法では「FF」という値になりますが、人間は10進法の世界で生きていますので、16進法の世界は少し入りにくいかも知れません。 つまり、RGBでそれぞれ強度0〜255まであるので、全部で何色の色を表現できるか？と言いますと、

256(R) × 256(G) × 256(B) = 16,777,216 (Colors)

また、8ビットカラーとか、24ビットカラーとか良く素材を作ったりしている方は御存知だと思いますが、 どのように定義されているかという事は御存知でしょうか？ ただ、24ビットカラーは1677万色！というのでも構いませんが、先程の意味を考えると深い意味が分かるようになります。

1ビットとは、コンピュータの世界で「0」「1」の2パターンの事です。コンピュータはこの「0」「1」で物事を処理しています。 8ビットとは、「0」「1」のパターンが8個という事になります（例:10010111）。「00000000」〜「11111111」まで表現する事ができますので、 いくつの数が表現できるかと言いますと、

28 = 2×2×2×2×2×2×2×2×2 = 256

2進法で「00000000」は10進法では「0」、「11111111」は「255」になりますので、先程の強度も同じ考え方です。 つまり、R値、G値、B値それぞれ8ビットなので、全部で24ビット（8ビット+8ビット+8ビット）という事になります。 2の24乗は丁度「16777216」になりますので、そういう事になります。ですから、結論を言いますと、○○ビットカラーと言われたら、 2の○○乗（色）という事になるわけです。最近では、32ビットカラーが出てきていますが、これは先程の24ビットカラーに 更にα値というものを考慮したものです。α値は透明度を表す新たな規格です（アルファ値）。

さて、ちょっと数学的な余談が入ってしまいましたが、肝心の「Webセーフカラー」の話に入りましょう。 これは先程のRGB値の主要値のみを組み合わせて表現されます。 「00」「33」「66」「99」「CC」「FF」の強度を組み合わせて表現するのが「Webセーフカラー」と定義されます。 「#0033CC」「#FF99CC」「#996633」などです。これらは256色環境でもきっちりと表示されます。 それ以外のコードを使った場合には、256色環境では色を調整して近似するために、 背景がひどく濃くなって見えなくなってしまったりそういう弊害が起きかねませんので、 注意が必要です。6パターンの強度の組み合わせですので、全部で表現できる色は、

63 = 6×6×6 = 216 (Colors)

という事になります。216色は256色を全部使い切れていませんが、 256色環境をカバーしているといえば分かりやすいでしょうか。 例えば極端な話になりますが、もしひとつの原色に対して7パターンのカラーコードを使ったと仮定しますと、

73 = 7×7×7 = 343 (Colors)

つまり、256色環境では表現できない色が出てきてしまうワケですね。 それで、この6パターンの強度の根拠なのですが、 これは強度のそれぞれ、0%(00)・20%(33)・40%(66)・60%(99)・80%(CC)・100%(FF)、になっています。

255(10) × 20% = 51(10) → 33(16)

という計算方法になります。カッコ内の10と16という数値は10進法と、16進法を意味してます。 以上がWebセーフカラーです。色関係は数学的な事を考える必要性が出てきますが、 スタイルシートやHTMLなどで色を指定する時にはなるべくこれらのセーフカラーで指定するようにしましょう。 また、参考までにスタイルシートでは省略して次のようにしても指定できます。

*.navy { color: #36C; }

これは、「#3366CC」の意味になります。Webセーフカラーは、このように3ケタで省略もできます。

color

指定した箇所の色を指定します。

background-color

指定した箇所の背景色を指定します。

border-color

罫線の色を指定します。

これくらいではないでしょうか？本当に少ないと思いますので、 全部覚えてしまった方が早いかも知れませんね！