ホームページで表示される『色』にはある一定の決まりがあります。
例えば文字の『色』や背景の『色』これらは写真等（JPG・GIF・PIG等）でない限りこの一定の決まりを元に指定することが好ましいです。
それはなぜか！？
ホームページを作って誰かに見てもらう時、見る側のパソコンやモニターの性能や設定で見え方が変わってしまうのです。
『色』は特に違います。WindowsとMacintoshの違いだけでも違います。ここでは基本色とされる『WEBセーフカラー』の216色を紹介します。もちろんこれ以外の色を使うことは可能ですがその場合、制作者の意図する色の表現が閲覧者には伝わらない可能性もあります。
■はっきりした使い易い『色』
WEBセーフカラーをご紹介する前に、はっきりした使い易い『色』をご紹介します。
上の段は『白』から『黒』まで6段階の『色』の表現です。下の段は左からシアン・マゼンタ・イエロー・レッド・グリーン・ブルーという6色です。シアン・マゼンタ・イエローは印刷で用いる色（厳密には少し違いますが…）、そしてレッド・グリーン・ブルーは光の三原色です。
#FFFFFF |
#CCCCCC |
#999999 |
#666666 |
#333333 |
#000000 |
#00FFFF |
#FF00FF |
#FFFF00 |
#FF0000 |
#00FF00 |
#0000FF |
■WEBセーフカラー216色
はっきりした使い易い『色』だけでは通常足りません。そこで『WEBセーフカラー』を使用します。『WEBセーフカラー』とは光の三原色のRGBの各色をそれぞれ6段階に分けて、それらを組み合わせ216種類の『色』を表現します。
通常256色（8ビットカラー）と表現される『色』の中で、WindowsとMacintoshで違った表示となる40色を差し引いた216色がWEBセーフカラーとなります。
#FFFFFF |
#FFFFCC |
#FFFF99 |
#FFFF66 |
#FFFF33 |
#FFFF00 |
#FFCCFF |
#FFCCCC |
#FFCC99 |
#FFCC66 |
#FFCC33 |
#FFCC00 |
#FF99FF |
#FF99CC |
#FF9999 |
#FF9966 |
#FF9933 |
#FF9900 |
#FF66FF |
#FF66CC |
#FF6699 |
#FF6666 |
#FF6633 |
#FF6600 |
#FF33FF |
#FF33CC |
#FF3399 |
#FF3366 |
#FF3333 |
#FF3300 |
#FF00FF |
#FF00CC |
#FF0099 |
#FF0066 |
#FF0033 |
#FF0000 |
#CCFFFF |
#CCFFCC |
#CCFF99 |
#CCFF66 |
#CCFF33 |
#CCFF00 |
#CCCCFF |
#CCCCCC |
#CCCC99 |
#CCCC66 |
#CCCC33 |
#CCCC00 |
#CC99FF |
#CC99CC |
#CC9999 |
#CC9966 |
#CC9933 |
#CC9900 |
#CC66FF |
#CC66CC |
#CC6699 |
#CC6666 |
#CC6633 |
#CC6600 |
#CC33FF |
#CC33CC |
#CC3399 |
#CC3366 |
#CC3333 |
#CC3300 |
#CC00FF |
#CC00CC |
#CC0099 |
#CC0066 |
#CC0033 |
#CC0000 |
#99FFFF |
#99FFCC |
#99FF99 |
#99FF66 |
#99FF33 |
#99FF00 |
#99CCFF |
#99CCCC |
#99CC99 |
#99CC66 |
#99CC33 |
#99CC00 |
#9999FF |
#9999CC |
#999999 |
#999966 |
#999933 |
#999900 |
#9966FF |
#9966CC |
#996699 |
#996666 |
#996633 |
#996600 |
#9933FF |
#9933CC |
#993399 |
#993366 |
#993333 |
#993300 |
#9900FF |
#9900CC |
#990099 |
#990066 |
#990033 |
#990000 |
#66FFFF |
#66FFCC |
#66FF99 |
#66FF66 |
#66FF33 |
#66FF00 |
#66CCFF |
#66CCCC |
#66CC99 |
#66CC66 |
#66CC33 |
#66CC00 |
#6699FF |
#6699CC |
#669999 |
#669966 |
#669933 |
#669900 |
#6666FF |
#6666CC |
#666699 |
#666666 |
#666633 |
#666600 |
#6633FF |
#6633CC |
#663399 |
#663366 |
#663333 |
#663300 |
#6600FF |
#6600CC |
#660099 |
#660066 |
#660033 |
#660000 |
#33FFFF |
#33FFCC |
#33FF99 |
#33FF66 |
#33FF33 |
#33FF00 |
#33CCFF |
#33CCCC |
#33CC99 |
#33CC66 |
#33CC33 |
#33CC00 |
#3399FF |
#3399CC |
#339999 |
#339966 |
#339933 |
#339900 |
#3366FF |
#3366CC |
#336699 |
#336666 |
#336633 |
#336600 |
#3333FF |
#3333CC |
#333399 |
#333366 |
#333333 |
#333300 |
#3300FF |
#3300CC |
#330099 |
#330066 |
#330033 |
#330000 |
#00FFFF |
#00FFCC |
#00FF99 |
#00FF66 |
#00FF33 |
#00FF00 |
#00CCFF |
#00CCCC |
#00CC99 |
#00CC66 |
#00CC33 |
#00CC00 |
#0099FF |
#0099CC |
#009999 |
#009966 |
#009933 |
#009900 |
#0066FF |
#0066CC |
#006699 |
#006666 |
#006633 |
#006600 |
#0033FF |
#0033CC |
#003399 |
#003366 |
#003333 |
#003300 |
#0000FF |
#0000CC |
#000099 |
#000066 |
#000033 |
#000000 |
これだけあれば様々な表現が可能ではないでしょうか？
また、ここにある『色』以外のモノを使用すると閲覧者側のパソコンのモニターでは正しく表示されない可能性がありますので、色使いにこだわってホームページを制作しても伝わらない悲しい結果にならないように配色は出来れば『WEBセーフカラー』の216色を使う様にしましょう！
|
