とほほの色入門・色見本

HOME > とほほのWWW入門 > とほほの色入門・色見本
1998年7月19日版

色の指定

<FONT COLOR="..."> や <BODY BGCOLOR="..."> などの色を指定するタグ属性では、次のいずれかの方法で色を指定します。 RGB値は #FF0000 のように、光の三原色である赤(R)、緑(G)、青(B)の配分を00〜FFまでの16進数で記述します。 一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になります。 Windowsのペイントブラシのカラーパレットや、拙作の背景色エディタ(JavaScript使用)などを利用して、自分の好みの色をみつけるのもよいでしょう。

16色パレット

下記の16色の名前がHTML3.2で定義されています。これらの名前はまず、安心して使用することができます。

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色パレット

Netscape NavigatorやInternet Explorerにおいては、上記の16色および、下記の216色はWindowsの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

Netscape色パレット

Netscape Navigatorでは、次のような色の名前を定義しました。Internet Explorer でもこれらの色は解釈できるようです。しかし、古いバージョンや、他のブラウザでは、これらの色の名前は解釈できないかもしれませんので、注意が必要です。

 #000000 black
 #000080 navy
 #00008B darkblue
 #0000CD mediumblue
 #0000FF blue
 #006400 darkgreen
 #008000 green
 #008080 teal
 #008B8B darkcyan
 #00BFFF deepskyblue
 #00CED1 darkturquoise
 #00FA9A mediumspringgreen
 #00FF00 lime
 #00FF7F springgreen
 #00FFFF aqua
 #00FFFF cyan
 #191970 midnightblue
 #1E90FF dodgerblue
 #20B2AA lightseagreen
 #228B22 forestgreen
 #2E8B57 seagreen
 #2F4F4F darkslategray
 #32CD32 limegreen
 #3CB371 mediumseagreen
 #40E0D0 turquoise
 #4169E1 royalblue
 #4682B4 steelblue
 #483D8B darkslateblue
 #48D1CC mediumturquoise
 #4B0082 indigo
 #556B2F darkolivegreen
 #5F9EA0 cadetblue
 #6495ED cornflowerblue
 #66CDAA mediumaquamarine
 #696969 dimgray
 #6A5ACD slateblue
 #6B8E23 olivedrab
 #708090 slategray
 #778899 lightslategray
 #7B68EE mediumslateblue
 #7CFC00 lawngreen
 #7FFF00 chartreuse
 #7FFFD4 aquamarine
 #800000 maroon
 #800080 purple
 #808000 olive
 #808080 gray
 #87CEEB skyblue
 #87CEFA lightskyblue
 #8A2BE2 blueviolet
 #8B0000 darkred
 #8B008B darkmagenta
 #8B4513 saddlebrown
 #8FBC8F darkseagreen
 #90EE90 lightgreen
 #9370DB mediumpurple
 #9400D3 darkviolet
 #98FB98 palegreen
 #9932CC darkorchid
 #9ACD32 yellowgreen
 #A0522D sienna
 #A52A2A brown
 #A9A9A9 darkgray
 #ADD8E6 lightblue
 #ADFF2F greenyellow
 #AFEEEE paleturquoise
 #B0C4DE lightsteelblue
 #B0E0E6 powderblue
 #B22222 firebrick
 #B8860B darkgoldenrod
 #BA55D3 mediumorchid
 #BC8F8F rosybrown
 #BDB76B darkkhaki
 #C0C0C0 silver
 #C71585 mediumvioletred
 #CD5C5C indianred
 #CD853F peru
 #D2691E chocolate
 #D2B48C tan
 #D3D3D3 lightgrey
 #D8BFD8 thistle
 #DA70D6 orchid
 #DAA520 goldenrod
 #DB7093 palevioletred
 #DC143C crimson
 #DCDCDC gainsboro
 #DDA0DD plum
 #DEB887 burlywood
 #E0FFFF lightcyan
 #E6E6FA lavender
 #E9967A darksalmon
 #EE82EE violet
 #EEE8AA palegoldenrod
 #F08080 lightcoral
 #F0E68C khaki
 #F0F8FF aliceblue
 #F0FFF0 honeydew
 #F0FFFF azure
 #F4A460 sandybrown
 #F5DEB3 wheat
 #F5F5DC beige
 #F5F5F5 whitesmoke
 #F5FFFA mintcream
 #F8F8FF ghostwhite
 #FA8072 salmon
 #FAEBD7 antiquewhite
 #FAF0E6 linen
 #FAFAD2 lightgoldenrodyellow
 #FDF5E6 oldlace
 #FF0000 red
 #FF00FF fuchsia
 #FF00FF magenta
 #FF1493 deeppink
 #FF4500 orangered
 #FF6347 tomato
 #FF69B4 hotpink
 #FF7F50 coral
 #FF8C00 darkorange
 #FFA07A lightsalmon
 #FFA500 orange
 #FFB6C1 lightpink
 #FFC0CB pink
 #FFD700 gold
 #FFDAB9 peachpuff
 #FFDEAD navajowhite
 #FFE4B5 moccasin
 #FFE4C4 bisque
 #FFE4E1 mistyrose
 #FFEBCD blanchedalmond
 #FFEFD5 papayawhip
 #FFF0F5 lavenderblush
 #FFF5EE seashell
 #FFF8DC cornsilk
 #FFFACD lemonchiffon
 #FFFAF0 floralwhite
 #FFFAFA snow
 #FFFF00 yellow
 #FFFFE0 lightyellow
 #FFFFF0 ivory
 #FFFFFF white
Netscape Navigatorでは aliceblue の実装にバグがあり、COLOR=aliceblue と COLOR=#F0F8FF の色が異なっていたそうですが、4.03(4.02?)あたりで修正されたそうです。

補足

ブラウザが色を表示する時、フルカラーモードであれば問題ないのですが、256色モードの時などは、指定した色を、ブラウザの独自パレットの色に近似して表示します。そのため、自分の思っていた色ではない画像になってしまい、幻滅することがあります。

一度、256色モードで自分のホームページがどのように見えるのか、確認しておくことをオススメします。

Netscape Navigator も Internet Explorer も、16色パレット および 216色パレット を含む256色パレットに近似するので、この2つのパレットに含まれる色のみを用いて作成した画像は、256色モードでも、変化なく表示できます。

補足の補足

256色モードの場合、16色パレットと216色パレットでは合わせても232色にしかならない、残りの色はどうなるの? という疑問についてちょっと調べたり情報をいただいたりしました。 (ただし、Windows 95の場合だけです)

16色と216色のうち、重複する色が8色あります。 つまり、16色パレットと216色パレットを合わせても16+216−8=224色にしかなりません。 残りは256−224=32色となります。

このうち、4色はWindows 95では常に同じ色(#C0D0C0, #A6CAF0, #FFFBF0, #A0A0A4)を割り当てています。 (たまにこれを変更してしまうアプリケーションもあるそうですが)

残りの28色については、Netscape NavigatorとInternet Explorerで若干実装が異なります。 Netscape Navigatorでは、それまで他のアプリケーションが使用していた色の一部をそのまま残しています。 Internet Explorerでは、グレースケール(白〜灰〜黒)と、何色かの中途半端な値の色を固定的に割り当てているようです。


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )