ホームページで使える色について
ホームページではたいていの色を指定することが出来ます。
基本的には#RRGGBBで記述します。この指定のRRは赤、GGは緑、BBは青を00〜FFの16進数で指定し、指定した色の混色が指定した色になります。
たとえば、赤を表現するときには、#FF0000となります。緑は#00FF00となり、青は#0000FFとなります。
黄色だったらどうしましょう。黄色は、赤と緑の混色となるので、#FFFF00となります。
それでは#000000だったらどうなるでしょう。答えは黒になります。
#FFFFFFだったら?答えは白になります。
理論上では(あくまでも理論上ですよ)
RRの赤、GGの緑、BBの青について、それぞれ0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,Fの162=256色ずつ色を設定し、さらにそれを混色するので、2563=16,777,216色の色が扱えることになります。
しかしながら、人間の目に判別できないほどの微妙な違いがあり、さらに見ている人のモニタ環境にも左右されるので、次に述べる224色の範囲内で色を指定すると、モニタ環境に左右されずに、自分の意図したとおりの色使いでホームページを見てもらうことが可能です。
基本16色パレット
HTML4.0という規格では下記の16色が定義されています。この色はわざわざ#RRGGBBを覚えなくても英語の色名を覚えれば使えるので、覚えておきましょう。この16色はほとんど全てのブラウザで表示させることが出来ます。
■black(#000000) | ■gray(#808080) | ■silver(#c0c0c0) | □white(#ffffff) |
■red(#ff0000) | ■yellow(#ffff00) | ■lime(#00ff00) | ■aqua(#00ffff) |
■blue(#0000ff) | ■fuchsia(#ff00ff) | ■maroon(#800000) | ■olive(#808000) |
■green(#008000) | ■teal(#008080) | ■navy(#000080) | ■purple(#800080) |
216色パレット(ウェブセーフカラー)
上記の16色だけではさびしいので、そのほかに以下の色を使うことが出来ます。これらの色はディスプレイが256色モードでも表示させることが出来るので、自分の意図したとおりの色使いでレイアウトなどを行うことが出来ます。
■#000000 | ■#000033 | ■#000066 | ■#000099 |
■#0000CC | ■#0000FF | ■#003300 | ■#003333 |
■#003366 | ■#003399 | ■#0033CC | ■#0033FF |
■#006600 | ■#006633 | ■#006666 | ■#006699 |
■#0066CC | ■#0066FF | ■#009900 | ■#009933 |
■#009966 | ■#009999 | ■#0099CC | ■#0099FF |
■#00CC00 | ■#00CC33 | ■#00CC66 | ■#00CC99 |
■#00CCCC | ■#00CCFF | ■#00FF00 | ■#00FF33 |
■#00FF66 | ■#00FF99 | ■#00FFCC | ■#00FFFF |
■#330000 | ■#330033 | ■#330066 | ■#330099 |
■#3300CC | ■#3300FF | ■#333300 | ■#333333 |
■#333366 | ■#333399 | ■#3333CC | ■#3333FF |
■#336600 | ■#336633 | ■#336666 | ■#336699 |
■#3366CC | ■#3366FF | ■#339900 | ■#339933 |
■#339966 | ■#339999 | ■#3399CC | ■#3399FF |
■#33CC00 | ■#33CC33 | ■#33CC66 | ■#33CC99 |
■#33CCCC | ■#33CCFF | ■#33FF00 | ■#33FF33 |
■#33FF66 | ■#33FF99 | ■#33FFCC | ■#33FFFF |
■#660000 | ■#660033 | ■#660066 | ■#660099 |
■#6600CC | ■#6600FF | ■#663300 | ■#663333 |
■#663366 | ■#663399 | ■#6633CC | ■#6633FF |
■#666600 | ■#666633 | ■#666666 | ■#666699 |
■#6666CC | ■#6666FF | ■#669900 | ■#669933 |
■#669966 | ■#669999 | ■#6699CC | ■#6699FF |
■#66CC00 | ■#66CC33 | ■#66CC66 | ■#66CC99 |
■#66CCCC | ■#66CCFF | ■#66FF00 | ■#66FF33 |
■#66FF66 | ■#66FF99 | ■#66FFCC | ■#66FFFF |
■#990000 | ■#990033 | ■#990066 | ■#990099 |
■#9900CC | ■#9900FF | ■#993300 | ■#993333 |
■#993366 | ■#993399 | ■#9933CC | ■#9933FF |
■#996600 | ■#996633 | ■#996666 | ■#996699 |
■#9966CC | ■#9966FF | ■#999900 | ■#999933 |
■#999966 | ■#999999 | ■#9999CC | ■#9999FF |
■#99CC00 | ■#99CC33 | ■#99CC66 | ■#99CC99 |
■#99CCCC | ■#99CCFF | ■#99FF00 | ■#99FF33 |
■#99FF66 | ■#99FF99 | ■#99FFCC | ■#99FFFF |
■#CC0000 | ■#CC0033 | ■#CC0066 | ■#CC0099 |
■#CC00CC | ■#CC00FF | ■#CC3300 | ■#CC3333 |
■#CC3366 | ■#CC3399 | ■#CC33CC | ■#CC33FF |
■#CC6600 | ■#CC6633 | ■#CC6666 | ■#CC6699 |
■#CC66CC | ■#CC66FF | ■#CC9900 | ■#CC9933 |
■#CC9966 | ■#CC9999 | ■#CC99CC | ■#CC99FF |
■#CCCC00 | ■#CCCC33 | ■#CCCC66 | ■#CCCC99 |
■#CCCCCC | ■#CCCCFF | ■#CCFF00 | ■#CCFF33 |
■#CCFF66 | ■#CCFF99 | ■#CCFFCC | ■#CCFFFF |
■#FF0000 | ■#FF0033 | ■#FF0066 | ■#FF0099 |
■#FF00CC | ■#FF00FF | ■#FF3300 | ■#FF3333 |
■#FF3366 | ■#FF3399 | ■#FF33CC | ■#FF33FF |
■#FF6600 | ■#FF6633 | ■#FF6666 | ■#FF6699 |
■#FF66CC | ■#FF66FF | ■#FF9900 | ■#FF9933 |
■#FF9966 | ■#FF9999 | ■#FF99CC | ■#FF99FF |
■#FFCC00 | ■#FFCC33 | ■#FFCC66 | ■#FFCC99 |
■#FFCCCC | ■#FFCCFF | ■#FFFF00 | ■#FFFF33 |
■#FFFF66 | ■#FFFF99 | ■#FFFFCC | ■#FFFFFF |
赤色による256色全てを並べてみる実験
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #000000〜#0F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #100000〜#1F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #200000〜#2F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #300000〜#3F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #400000〜#4F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #500000〜#5F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #600000〜#6F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #700000〜#7F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #800000〜#8F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #900000〜#9F0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #A00000〜#AF0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #B00000〜#BF0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #C00000〜#CF0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #D00000〜#DF0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #E00000〜#EF0000 |
■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | ■ | #F00000〜#FF0000 |