shin's PSYCHOMMUNITY -ＨＰ作成実録 18-

ＨＰ作成実録 No.18

色見本

最初に断っておきますが、shinは美術の教師ではないので、
どこか間違っている表現等があるかもしれません。ご容赦を!! m(__)m

HTMLで色を指定する場合、R(赤),G(緑),B(青)の３色の割合で指定します。
実際には[#0369cF]の様に、0～Fまでの16段階を6個並べて表現します。
03がR(赤)の割合、69がG(緑)の割合、cFがB(青)の割合となり、
この様な指定の仕方で表される24bitの色数は約1677万色となります。
bit数と色数の関係は下の通りです。

1bit	=2^1=	2色
2bit	=2^2=	4色
4bit	=2^4=	16色
6bit	=2^6=	64色
8bit	=2^8=	256色
12bit	=2^12=	4096色
16bit	=2^16=	65536色	(High Color)
24bit	=2^24=	16777216色	(True Color)
32bit	=2^32=	4294967296色

つまり0～Fまでの16段階=4bitが6個並ぶので24bitとなります。
しかし、見ている方のディスプレイ（パソコン）がこれだけの色数を出せない場合、
色が化けて表示される事になります。
またブラウザ(IEやNN等)やWindowsとMacintosh等の違いによっても、
色が違う事があります。
その為、どの環境で見ても同じに見える色があり、
セーフカラーとかWeb Colorとかブラウザ共通色等と呼ばれます。
厳密には全く同じではない場合もあるそうですが。
RGBの指定に00,33,66,99,CC,FFの組み合わせのみで表現した色で、
6X6X6=216色があります。
これ以外に（8色は重複していますが）基本となる16色があります。
これらはCOLOR="#000000"と記述してもCOLOR="black"と記述しても、
同じ色が表示されます。

#000000 Black	#808080 Gray	#C0C0C0 Silver	#FFFFFF White
#FF0000 Red	#FFFF00 Yellow	#00FF00 Lime	#00FFFF Aqua	#0000FF Blue	#FF00FF Fuchsia
#800000 Maroon	#808000 Olive	#008000 Green	#008080 Teal	#000080 Navy	#800080 Purple

この他の216色は以下の色です。

#000000

#003300

#006600

#009900

#00cc00

#00ff00

#990000

#993300

#996600

#999900

#99cc00

#99ff00

#000033

#003333

#006633

#009933

#00cc33

#00ff33

#990033

#993333

#996633

#999933

#99cc33

#99ff33

#000066

#003366

#006666

#009966

#00cc66

#00ff66

#990066

#993366

#996666

#999966

#99cc66

#99ff66

#000099

#003399

#006699

#009999

#00cc99

#00ff99

#990099

#993399

#996699

#999999

#99cc99

#99ff99

#0000cc

#0033cc

#0066cc

#0099cc

#00cccc

#00ffcc

#9900cc

#9933cc

#9966cc

#9999cc

#99cccc

#99ffcc

#0000ff

#0033ff

#0066ff

#0099ff

#00ccff

#00ffff

#9900ff

#9933ff

#9966ff

#9999ff

#99ccff

#99ffff

#330000

#333300

#336600

#339900

#33cc00

#33ff00

#cc0000

#cc3300

#cc6600

#cc9900

#cccc00

#ccff00

#330033

#333333

#336633

#339933

#33cc33

#33ff33

#cc0033

#cc3333

#cc6633

#cc9933

#cccc33

#ccff33

#330066

#333366

#336666

#339966

#33cc66

#33ff66

#cc0066

#cc3366

#cc6666

#cc9966

#cccc66

#ccff66

#330099

#333399

#336699

#339999

#33cc99

#33ff99

#cc0099

#cc3399

#cc6699

#cc9999

#cccc99

#ccff99

#3300cc

#3333cc

#3366cc

#3399cc

#33cccc

#33ffcc

#cc00cc

#cc33cc

#cc66cc

#cc99cc

#cccccc

#ccffcc

#3300ff

#3333ff

#3366ff

#3399ff

#33ccff

#33ffff

#cc00ff

#cc33ff

#cc66ff

#cc99ff

#ccccff

#ccffff

#660000

#663300

#666600

#669900

#66cc00

#66ff00

#ff0000

#ff3300

#ff6600

#ff9900

#ffcc00

#ffff00

#660033

#663333

#666633

#669933

#66cc33

#66ff33

#ff0033

#ff3333

#ff6633

#ff9933

#ffcc33

#ffff33

#660066

#663366

#666666

#669966

#66cc66

#66ff66

#ff0066

#ff3366

#ff6666

#ff9966

#ffcc66

#ffff66

#660099

#663399

#666699

#669999

#66cc99

#66ff99

#ff0099

#ff3399

#ff6699

#ff9999

#ffcc99

#ffff99

#6600cc

#6633cc

#6666cc

#6699cc

#66cccc

#66ffcc

#ff00cc

#ff33cc

#ff66cc

#ff99cc

#ffcccc

#ffffcc

#6600ff

#6633ff

#6666ff

#6699ff

#66ccff

#66ffff

#ff00ff

#ff33ff

#ff66ff

#ff99ff

#ffccff

#ffffff

この表示の仕方は実際に色を参考にしようとした時、あまり使いやすくないと思ったので、
違う色見本を作ってみました。こちらの方が参考にしやすいと思います。
もっといい方法があるかもしれませんが、思いつきませんでした (^^;)
こちらの色見本も216色です。

2001.05.01 追記
J-SKY用の色見本も作ってみました。興味のある方はドウゾ!!
ただ合っているかどうか、ハッキリ確認できないのが困った。

2001.05.04 追記
色の指定に使う16進数とペイントソフト等で使う10進数の対応表です。
Windows付属の電卓を「関数電卓」に切り替えると簡単に変換できます。

16進数	⇔	10進数	例：Ｒだけ変化させた時
00	⇔	0	#000000 R:　0 G:0 B:0
20	⇔	32	#200000 R: 32 G:0 B:0
33	⇔	51	#330000 R: 51 G:0 B:0
40	⇔	64	#400000 R: 64 G:0 B:0
60	⇔	96	#600000 R: 96 G:0 B:0
66	⇔	102	#660000 R:102 G:0 B:0
80	⇔	128	#800000 R:128 G:0 B:0
99	⇔	153	#990000 R:153 G:0 B:0
A0	⇔	160	#A00000 R:160 G:0 B:0
C0	⇔	192	#C00000 R:192 G:0 B:0
CC	⇔	204	#CC0000 R:204 G:0 B:0
FF	⇔	255	#FF0000 R:255 G:0 B:0

▲MENUに戻る