スタイルシートにおける色の扱い
色を指定する方法は以下の通りです。
数値で指定
# に続いて6桁の16進数で指定。(#008000で緑）
- 色名で指定
Red、Blue、Green、White、Black等の16色パレットシステムカラーで指定
システムカラーとは、ユーザの環境でシステムの色として設定されているもので、Windowsでは「画面のプロパティのデザイン」に対応するものです。いずれも緑に設定
{color:#008000}
{color:green}
{color:rgb(0,128,0)}
{color:rgb(0%,50%,0%}色の指定は、上記の通りですが...、目安として以下のパレットがあります。
16色パレットと216色パレットは、Windowsの256色モードでも変わり無く表示すことができます。しかし、16色パレットと216色パレットのうち、重複する色が8色あり、16＋216−8＝224色にしかなりません。残りは256−224＝32色となり、どう指定するかは、不明です。
あと、216色パレット中、#0033FF、 #3300FF、#00FF33、#33FF00の４色が正しく表示されない場合があるみたいです。
尚、16色パレットとシステムカラーは、CSS2で定められた色名です。逆に言うとこれ以外の色名は保証がないってことです。注意してください。また、システムカラーに関しては、NN系では思わぬ色になります。これも注意してください。
CSS2 で色名として使えるキーワードは、以下の 16種です。
この16色は、Netscape NavigatorやInternet Explorer、Windowsの256色モードでも変わり無く表示することができます。
色 16進 色名 色 16進 色名 色 16進 色名 色 16進 色名 #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色は、Netscape NavigatorやInternet Explorerにおいて、Windowsの256色モードでも変わり無く表示することができます。
色 １６進 色 １６進 色 １６進 色 １６進 色 １６進 色 １６進 #000000 #330000 #660000 #990000 #cc0000 #ff0000 #003300 #333300 #663300 #993300 #cc3300 #ff3300 #006600 #336600 #666600 #996600 #cc6600 #ff6600 #009900 #339900 #669900 #999900 #cc9900 #ff9900 #00cc00 #33cc00 #66cc00 #99cc00 #cccc00 #ffcc00 #00ff00 #33ff00 #66ff00 #99ff00 #ccff00 #ffff00 #000033 #330033 #660033 #990033 #cc0033 #ff0033 #003333 #333333 #663333 #993333 #cc3333 #ff3333 #006633 #336633 #666633 #996633 #cc6633 #ff6633 #009933 #339933 #669933 #999933 #cc9933 #ff9933 #00cc33 #33cc33 #66cc33 #99cc33 #cccc33 #ffcc33 #00ff33 #33ff33 #66ff33 #99ff33 #ccff33 #ffff33 #000066 #330066 #660066 #990066 #cc0066 #ff0066 #003366 #333366 #663366 #993366 #cc3366 #ff3366 #006666 #336666 #666666 #996666 #cc6666 #ff6666 #009966 #339966 #669966 #999966 #cc9966 #ff9966 #00cc66 #33cc66 #66cc66 #99cc66 #cccc66 #ffcc66 #00ff66 #33ff66 #66ff66 #99ff66 #ccff66 #ffff66 #000099 #330099 #660099 #990099 #cc0099 #ff0099 #003399 #333399 #663399 #993399 #cc3399 #ff3399 #006699 #336699 #666699 #996699 #cc6699 #ff6699 #009999 #339999 #669999 #999999 #cc9999 #ff9999 #00cc99 #33cc99 #66cc99 #99cc99 #cccc99 #ffcc99 #00ff99 #33ff99 #66ff99 #99ff99 #ccff99 #ffff99 #0000cc #3300cc #6600cc #9900cc #cc00cc #ff00cc #0033cc #3333cc #6633cc #9933cc #cc33cc #ff33cc #0066cc #3366cc #6666cc #9966cc #cc66cc #ff66cc #0099cc #3399cc #6699cc #9999cc #cc99cc #ff99cc #00cccc #33cccc #66cccc #99cccc #cccccc #ffcccc #00ffcc #33ffcc #66ffcc #99ffcc #ccffcc #ffffcc #0000ff #3300ff #6600ff #9900ff #cc00ff #ff00ff #0033ff #3333ff #6633ff #9933ff #cc33ff #ff33ff #0066ff #3366ff #6666ff #9966ff #cc66ff #ff66ff #0099ff #3399ff #6699ff #9999ff #cc99ff #ff99ff #00ccff #33ccff #66ccff #99ccff #ccccff #ffccff #00ffff #33ffff #66ffff #99ffff #ccffff #ffffff システムカラーは、CSS2で定められた色名です。しかし、NN系は思わぬ色になります。注意してください。
システムカラーの利点は、ユーザの感覚にフィットしたページの作成ができることと、ユーザ設定が何らかの身体障害に関わりある場合、よりアクセシビリティの高いページを作成できることです。
システムカラー色名 補足説明 アクティブウィンドウの境界 アクティブウィンドウのタイトルバー アプリケーション内のウインドウの背景 デスクトップの背景 ボタンの表面 ボタンの光の当たっている面 ボタンの影 ボタンのテキスト タイトルバーのテキスト 選択不能テキスト 選択された項目 選択されたテキスト 非アクティブウィンドウの境界 非アクティブタイトルバーのタイトルバー 非アクティブタイトルバーのタイトルバーテキスト ツールチップの背景 ツールチップのテキスト メニューの背景 メニューのテキスト スクロールバー 立体の暗い影 立体の表面 立体の光の当たっている面 立体の明るい影 立体の影 ウィンドウの背景 ウィンドウのフレーム ウィンドウのテキスト カラーネームリストです。140色で、Netscapeで定義され、Microsoftでもサポートされましたが、両者では、同じ色名を指定しても、違う色になる場合が多いです。
また、WINDOWSカラーパレットによっても思わぬ色になることがあります。Netscape NavigatorやInternet Explorerにおいて保証されている色、２１６色パレットをおすすめします。
どうしても色名を使用したい場合は、16色パレットなら安全です。
色名 色 R G B 16進 white 255 255 255 #FFFFFF whitesmoke 245 245 245 #F5F5F5 gainsboro 220 220 220 #DCDCDC lightgrey 211 211 211 #D3D3D3 silver 192 192 192 #C0C0C0 darkgray 169 169 169 #A9A9A9 gray 128 128 128 #808080 dimgray 105 105 105 #696969 black 0 0 0 #000000 red 255 0 0 #FF0000 orangered 255 69 0 #FF4500 tomato 255 99 71 #FF6347 coral 255 127 80 #FF7F50 salmon 250 128 114 #FA8072 lightsalmon 255 160 122 #FFA07A darksalmon 233 150 122 #E9967A peru 205 133 63 #CD853F saddlebrown 139 69 19 #8B4513 sienna 160 82 45 #A0522D chocolate 210 105 30 #D2691E sandybrown 244 164 96 #F4A460 darkred 139 0 0 #8B0000 maroon 128 0 0 #800000 brown 165 42 42 #A52A2A firebrick 178 34 34 #B22222 crimson 220 20 60 #DC143C indianred 205 92 92 #CD5C5C lightcoral 240 128 128 #F08080 rosybrown 188 143 143 #BC8F8F palevioletred 219 112 147 #DB7093 deeppink 255 20 147 #FF1493 hotpink 255 105 180 #FF69B4 lightpink 255 182 193 #FFB6C1 pink 255 192 203 #FFC0CB mistyrose 255 228 225 #FFE4E1 linen 250 240 230 #FAF0E6 seashell 255 245 238 #FFF5EE lavenderblush 255 240 245 #FFF0F5 snow 255 250 250 #FFFAFA yellow 255 255 0 #FFFF00 gold 255 215 0 #FFD700 orange 255 165 0 #FFA500 darkorange 255 140 0 #FF8C00 goldenrod 218 165 32 #DAA520 darkgoldenrod 184 134 11 #B8860B darkkhaki 189 183 107 #BDB76B burlywood 222 184 135 #DEB887 tan 210 180 140 #D2B48C khaki 240 230 140 #F0E68C peachpuff 255 218 185 #FFDAB9 navajowhite 255 222 173 #FFDEAD palegoldenrod 238 232 170 #EEE8AA moccasin 255 228 181 #FFE4B5 wheat 245 222 179 #F5DEB3 bisque 255 228 196 #FFE4C4 blanchedalmond 255 235 205 #FFEBCD papayawhip 255 239 213 #FFEFD5 cornsilk 255 248 220 #FFF8DC lightyellow 255 255 224 #FFFFE0 lightgoldenrodyellow 250 250 210 #FAFAD2 lemonchiffon 255 250 205 #FFFACD antiquewhite 250 235 215 #FAEBD7 beige 245 245 220 #F5F5DC oldlace 253 245 230 #FDF5E6 ivory 255 255 240 #FFFFF0 floralwhite 255 250 240 #FFFAF0 greenyellow 173 255 47 #ADFF2F yellowgreen 154 205 50 #9ACD32 olive 128 128 0 #808000 darkolivegreen 85 107 47 #556B2F olivedrab 107 142 35 #6B8E23 chartreuse 127 255 0 #7FFF00 lawngreen 124 252 0 #7CFC00 lime 0 255 0 #00FF00 limegreen 50 205 50 #32CD32 forestgreen 34 139 34 #228B22 green 0 128 0 #008000 darkgreen 0 100 0 #006400 seagreen 46 139 87 #2E8B57 mediumseagreen 60 179 113 #3CB371 darkseagreen 143 188 143 #8FBC8F lightgreen 144 238 144 #90EE90 palegreen 152 251 152 #98FB98 springgreen 0 255 127 #00FF7F mediumspringgreen 0 250 154 #00FA9A honeydew 240 255 240 #F0FFF0 mintcream 245 255 250 #F5FFFA azure 240 255 255 #F0FFFF lightcyan 224 255 255 #E0FFFF aliceblue 240 248 255 #F0F8FF darkslategray 47 79 79 #2F4F4F steelblue 70 130 180 #4682B4 mediumaquamarine 102 205 170 #66CDAA aquamarine 127 255 212 #7FFFD4 mediumturquoise 72 209 204 #48D1CC turquoise 64 224 208 #40E0D0 lightseagreen 32 178 170 #20B2AA darkcyan 0 139 139 #008B8B teal 0 128 128 #008080 cadetblue 95 158 160 #5F9EA0 darkturquoise 0 206 209 #00CED1 aqua 0 255 255 #00FFFF cyan 0 255 255 #00FFFF lightblue 173 216 230 #ADD8E6 powderblue 176 224 230 #B0E0E6 paleturquoise 175 238 238 #AFEEEE skyblue 135 206 235 #87CEEB lightskyblue 135 206 250 #87CEFA deepskyblue 0 191 255 #00BFFF dodgerblue 30 144 255 #1E90FF ghostwhite 248 248 255 #F8F8FF lavender 230 230 250 #E6E6FA lightsteelblue 176 196 222 #B0C4DE slategray 112 128 144 #708090 lightslategray 119 136 153 #778899 indigo 75 0 130 #4B0082 darkslateblue 72 61 139 #483D8B midnightblue 25 25 112 #191970 navy 0 0 128 #000080 darkblue 0 0 139 #00008B slateblue 106 90 205 #6A5ACD mediumslateblue 123 104 238 #7B68EE cornflowerblue 100 149 237 #6495ED royalblue 65 105 225 #4169E1 mediumblue 0 0 205 #0000CD blue 0 0 255 #0000FF thistle 216 191 216 #D8BFD8 plum 221 160 221 #DDA0DD orchid 218 112 214 #DA70D6 violet 238 130 238 #EE82EE fuchsia 255 0 255 #FF00FF magenta 255 0 255 #FF00FF mediumpurple 147 112 219 #9370DB mediumorchid 186 85 211 #BA55D3 darkorchid 153 50 204 #9932CC blueviolet 138 43 226 #8A2BE2 darkviolet 148 0 211 #9400D3 purple 128 0 128 #800080 darkmagenta 139 0 139 #8B008B mediumvioletred 199 21 133 #C71585