| ブラウザセーフ２１６色のチャート |  |
| ブラウザセーフ２１６色のチャート | |
メニュー
まえがき
凡例（チャートの見方）
備考
ブラウザセーフ２１６色のチャート
参考資料
まえがき
ブラウザセーフ (browser-safe) の色とは、256色以上表示可能なディスプレイであれば、どのブラウザ（インターネットエクスプローラ、ネットスケープナビゲータ、... ）、どのオペレーティングシステム（Windows, Mac, ... ）でも表示できる色を意味します。すなわち、ブラウザやオペレーティングシステムに依存しない「安全な」色といえます。
ホームページのような HTML文書を作成する場合、背景や、ロゴや、イラストや、文字などにブラウザセーフの色を使用すれば、どのパソコンやブラウザでも、同じ色の調子で見ることができます。
ブラウザセーフの色は全部で 216色あり、次のチャートはこの 216色を明度 (luminance) すなわち色の明るさにより配列したものです。HTML文書作成の際、色の選択やデザインにご活用下さい。
| 凡例 （チャートの見方） |
||
 |
 … |
色見本 |
| #33FF99 | … |
該当する色の16進数による表記で、 R・G・B値を16進数に変換して並べたもの （先頭の # は HTML文書の色指定で使用） |
| R=051 | … |
赤の要素の値 (10進数) → 16進数で 33 に対応 |
| G=255 | … |
緑の要素の値 (10進数) → 16進数で FF に対応 |
| B=153 | … |
青の要素の値 (10進数) → 16進数で 99 に対応 |
備考
ネットスケープナビゲータ（およびネットスケープコミュニケータ）は Ver. 3.0 以上、インターネットエクスプローラは Ver. 2.0 以上で、次のチャートをご覧ください。
ディスプレイは256色以上で表示可です。
一行にそれぞれ8色ずつ並んでいます。ブラウザの左右からはみ出して見づらい場合は、表示フォントを小さくし、画面を更新してみてください。
| 1 | |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #FFFFFF R=255 G=255 B=255 |
#FFFFCC R=255 G=255 B=204 |
#FFFF99 R=255 G=255 B=153 |
#CCFFFF R=204 G=255 B=255 |
#FFFF66 R=255 G=255 B=102 |
#CCFFCC R=204 G=255 B=204 |
#FFFF33 R=255 G=255 B=051 |
#CCFF99 R=204 G=255 B=153 |
|||||||||
|
||||||||||||||||
| 2 | |
|
|
|
|
|
|
|
||||||||
| #FFFF00 R=255 G=255 B=000 |
#FFCCFF R=255 G=204 B=255 |
#99FFFF R=153 G=255 B=255 |
#CCFF66 R=204 G=255 B=102 |
#FFCCCC R=255 G=204 B=204 |
#99FFCC R=153 G=255 B=204 |
#CCFF33 R=204 G=255 B=051 |
#FFCC99 R=255 G=204 B=153 |
|||||||||
|
||||||||||||||||
| 3 | |
|
|
|
|
|
|
|
||||||||
| #99FF99 R=153 G=255 B=153 |
#CCFF00 R=204 G=255 B=000 |
#CCCCFF R=204 G=204 B=255 |
#66FFFF R=102 G=255 B=255 |
#FFCC66 R=255 G=204 B=102 |
#99FF66 R=153 G=255 B=102 |
#CCCCCC R=204 G=204 B=204 |
#66FFCC R=102 G=255 B=204 |
|
||||||||||||||||
| 4 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #FFCC33 R=255 G=204 B=051 |
#99FF33 R=153 G=255 B=051 |
#CCCC99 R=204 G=204 B=153 |
#66FF99 R=153 G=255 B=153 |
#FFCC00 R=255 G=204 B=000 |
#99FF00 R=153 G=255 B=000 |
#FF99FF R=255 G=153 B=255 |
#99CCFF R=153 G=204 B=255 |
|||||||||
|
||||||||||||||||
| 5 | |
|
|
|
|
|
|
|
||||||||
| #33FFFF R=051 G=255 B=255 |
#CCCC66 R=204 G=204 B=102 |
#66FF66 R=102 G=255 B=102 |
#FF99CC R=255 G=153 B=204 |
#99CCCC R=153 G=204 B=204 |
#33FFCC R=051 G=255 B=204 |
#CCCC33 R=204 G=204 B=051 |
#66FF33 R=102 G=255 B=051 |
|||||||||
|
||||||||||||||||
| 6 | |
|
|
|
|
|
|
|
||||||||
| #FF9999 R=255 G=153 B=153 |
#99CC99 R=153 G=204 B=153 |
#33FF99 R=051 G=255 B=153 |
#CCCC00 R=204 G=204 B=000 |
#66FF00 R=102 G=255 B=000 |
#CC99FF R=204 G=153 B=255 |
#66CCFF R=102 G=204 B=255 |
#00FFFF R=000 G=255 B=255 |
|
||||||||||||||||
| 7 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #FF9966 R=255 G=153 B=102 |
#99CC66 R=153 G=204 B=102 |
#33FF66 R=051 G=255 B=102 |
#CC99CC R=204 G=153 B=204 |
#66CCCC R=102 G=204 B=204 |
#00FFCC R=000 G=255 B=204 |
#FF9933 R=255 G=153 B=051 |
#99CC33 R=153 G=204 B=051 |
|||||||||
|
||||||||||||||||
| 8 | |
|
|
|
|
|
|
|
||||||||
| #33FF33 R=051 G=255 B=051 |
#CC9999 R=204 G=153 B=153 |
#66CC99 R=102 G=204 B=153 |
#00FF99 R=000 G=255 B=153 |
#FF9900 R=255 G=153 B=000 |
#99CC00 R=153 G=204 B=000 |
#33FF00 R=051 G=255 B=000 |
#FF66FF R=255 G=102 B=255 |
|||||||||
|
||||||||||||||||
| 9 | |
|
|
|
|
|
|
|
||||||||
| #9999FF R=153 G=153 B=255 |
#33CCFF R=051 G=204 B=255 |
#CC9966 R=204 G=153 B=102 |
#66CC66 R=102 G=204 B=102 |
#00FF66 R=000 G=255 B=102 |
#FF66CC R=255 G=102 B=204 |
#9999CC R=153 G=153 B=204 |
#33CCCC R=051 G=204 B=204 |
|
||||||||||||||||
| 10 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #CC9933 R=204 G=153 B=051 |
#66CC33 R=102 G=204 B=051 |
#00FF33 R=000 G=255 B=051 |
#FF6699 R=255 G=102 B=153 |
#999999 R=153 G=153 B=153 |
#33CC99 R=051 G=204 B=153 |
#CC9900 R=204 G=153 B=000 |
#66CC00 R=102 G=204 B=000 |
|||||||||
|
||||||||||||||||
| 11 | |
|
|
|
|
|
|
|
||||||||
| #00FF00 R=000 G=255 B=000 |
#CC66FF R=204 G=102 B=255 |
#6699FF R=102 G=153 B=255 |
#00CCFF R=000 G=204 B=255 |
#FF6666 R=255 G=102 B=102 |
#999966 R=153 G=153 B=102 |
#33CC66 R=051 G=204 B=102 |
#CC66CC R=204 G=102 B=204 |
|||||||||
|
||||||||||||||||
| 12 | |
|
|
|
|
|
|
|
||||||||
| #6699CC R=102 G=153 B=204 |
#00CCCC R=000 G=204 B=204 |
#FF6633 R=255 G=102 B=051 |
#999933 R=153 G=153 B=051 |
#33CC33 R=051 G=204 B=051 |
#CC6699 R=204 G=102 B=153 |
#669999 R=102 G=153 B=153 |
#00CC99 R=000 G=204 B=153 |
|
||||||||||||||||
| 13 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #FF6600 R=255 G=102 B=000 |
#999900 R=153 G=153 B=000 |
#33CC00 R=051 G=204 B=000 |
#FF33FF R=255 G=051 B=255 |
#9966FF R=153 G=102 B=255 |
#3399FF R=051 G=153 B=255 |
#CC6666 R=204 G=102 B=102 |
#669966 R=102 G=153 B=102 |
|||||||||
|
||||||||||||||||
| 14 | |
|
|
|
|
|
|
|
||||||||
| #00CC66 R=000 G=204 B=102 |
#FF33CC R=255 G=051 B=204 |
#9966CC R=153 G=102 B=204 |
#3399CC R=051 G=153 B=204 |
#CC6633 R=204 G=102 B=051 |
#669933 R=102 G=153 B=051 |
#00CC33 R=000 G=204 B=051 |
#FF3399 R=255 G=051 B=153 |
|||||||||
|
||||||||||||||||
| 15 | |
|
|
|
|
|
|
|
||||||||
| #996699 R=153 G=102 B=153 |
#339999 R=051 G=153 B=153 |
#CC6600 R=204 G=102 B=000 |
#669900 R=102 G=153 B=000 |
#00CC00 R=000 G=204 B=000 |
#CC33FF R=204 G=051 B=255 |
#6666FF R=102 G=102 B=255 |
#0099FF R=000 G=153 B=255 |
|
||||||||||||||||
| 16 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #FF3366 R=255 G=051 B=102 |
#996666 R=153 G=102 B=102 |
#339966 R=051 G=153 B=102 |
#CC33CC R=204 G=051 B=204 |
#6666CC R=102 G=102 B=204 |
#0099CC R=000 G=153 B=204 |
#FF3333 R=255 G=051 B=051 |
#996633 R=153 G=102 B=051 |
|||||||||
|
||||||||||||||||
| 17 | |
|
|
|
|
|
|
|
||||||||
| #339933 R=051 G=153 B=051 |
#CC3399 R=204 G=051 B=153 |
#666699 R=102 G=102 B=153 |
#009999 R=000 G=153 B=153 |
#FF3300 R=255 G=051 B=000 |
#996600 R=153 G=102 B=000 |
#339900 R=051 G=153 B=000 |
#FF00FF R=255 G=000 B=255 |
|||||||||
|
||||||||||||||||
| 18 | |
|
|
|
|
|
|
|
||||||||
| #9933FF R=153 G=051 B=255 |
#3366FF R=051 G=102 B=255 |
#CC3366 R=204 G=051 B=102 |
#666666 R=102 G=102 B=102 |
#009966 R=000 G=153 B=102 |
#FF00CC R=255 G=000 B=204 |
#9933CC R=153 G=051 B=204 |
#3366CC R=051 G=102 B=204 |
|
||||||||||||||||
| 19 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #CC3333 R=204 G=051 B=051 |
#666633 R=102 G=102 B=051 |
#009933 R=000 G=153 B=051 |
#FF0099 R=255 G=000 B=153 |
#993399 R=153 G=051 B=153 |
#336699 R=051 G=102 B=153 |
#CC3300 R=204 G=051 B=000 |
#666600 R=102 G=102 B=000 |
|||||||||
|
||||||||||||||||
| 20 | |
|
|
|
|
|
|
|
||||||||
| #009900 R=000 G=153 B=000 |
#CC00FF R=204 G=000 B=255 |
#6633FF R=102 G=051 B=255 |
#0066FF R=000 G=102 B=255 |
#FF0066 R=255 G=000 B=102 |
#993366 R=153 G=051 B=102 |
#336666 R=051 G=102 B=102 |
#CC00CC R=204 G=000 B=204 |
|||||||||
|
||||||||||||||||
| 21 | |
|
|
|
|
|
|
|
||||||||
| #6633CC R=102 G=051 B=204 |
#0066CC R=000 G=102 B=204 |
#FF0033 R=255 G=000 B=051 |
#993333 R=153 G=051 B=051 |
#336633 R=051 G=102 B=051 |
#CC0099 R=204 G=000 B=153 |
#663399 R=102 G=051 B=153 |
#006699 R=000 G=102 B=153 |
|
||||||||||||||||
| 22 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #FF0000 R=255 G=000 B=000 |
#993300 R=153 G=051 B=000 |
#336600 R=051 G=102 B=000 |
#9900FF R=153 G=000 B=255 |
#3333FF R=051 G=051 B=255 |
#CC0066 R=204 G=000 B=102 |
#663366 R=102 G=051 B=102 |
#006666 R=000 G=102 B=102 |
|||||||||
|
||||||||||||||||
| 23 | |
|
|
|
|
|
|
|
||||||||
| #9900CC R=153 G=000 B=204 |
#3333CC R=051 G=051 B=204 |
#CC0033 R=204 G=000 B=051 |
#663333 R=102 G=051 B=051 |
#006633 R=000 G=102 B=051 |
#990099 R=153 G=000 B=153 |
#333399 R=051 G=051 B=153 |
#CC0000 R=204 G=000 B=000 |
|||||||||
|
||||||||||||||||
| 24 | |
|
|
|
|
|
|
|
||||||||
| #663300 R=102 G=051 B=000 |
#006600 R=000 G=102 B=000 |
#6600FF R=102 G=000 B=255 |
#0033FF R=000 G=051 B=255 |
#990066 R=153 G=000 B=102 |
#333366 R=051 G=051 B=102 |
#6600CC R=102 G=000 B=204 |
#0033CC R=000 G=051 B=204 |
|
||||||||||||||||
| 25 | |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| #990033 R=153 G=000 B=051 |
#333333 R=051 G=051 B=051 |
#660099 R=102 G=000 B=153 |
#003399 R=000 G=051 B=153 |
#990000 R=153 G=000 B=000 |
#333300 R=051 G=051 B=000 |
#3300FF R=051 G=000 B=255 |
#660066 R=102 G=000 B=102 |
|||||||||
|
||||||||||||||||
| 26 | |
|
|
|
|
|
|
|
||||||||
| #003366 R=000 G=051 B=102 |
#3300CC R=051 G=000 B=204 |
#660033 R=102 G=000 B=051 |
#003333 R=000 G=051 B=051 |
#330099 R=051 G=000 B=153 |
#660000 R=102 G=000 B=000 |
#003300 R=000 G=051 B=000 |
#0000FF R=000 G=000 B=255 |
|||||||||
|
||||||||||||||||
| 27 | |
|
|
|
|
|
|
|
||||||||
| #330066 R=051 G=000 B=102 |
#0000CC R=000 G=000 B=204 |
#330033 R=051 G=000 B=051 |
#000099 R=000 G=000 B=153 |
#330000 R=051 G=000 B=000 |
#000066 R=000 G=000 B=102 |
#000033 R=000 G=000 B=051 |
#000000 R=000 G=000 B=000 |
このページのトップへ戻る
参考資料
ブラウザセーフ色に関連する文献・ソフトを次にあげておきます。
- Lynda Weinman & Bruce Heavin, "Coloring Web Graphics"(ウェブ・グラフィックスの色付け), New Riders Publishing, 1996.
ブラウザセーフ色にもとづいた、本格的なウェブ・グラフィックス・デザインのテキストで、評判の高い本です。
上述のブラウザセーフ色を明度により配列したチャートが収録されています。
同じ著者によるこの本の改訂版、"Coloring Web Graphics.2", New Riders Publishing, 1997, も発売されています。
- 画像処理ソフト Paint Shop Pro (Ver. 6.02) 付属の 256色パレット。
Paint Shop Pro を起動し、ファイルの新規作成で、イメージの種類を 256色 (8 Bit) とします。
[カラー] メニューで [パレットの編集ツール] を選択し、[256色パレットの編集] 画面を開きます。
ここでパレットの [並び順] を [明度] に指定すると、最初の 216色がブラウザセーフ色になっていて、上のチャートと対応しています。
パレットの残りの 40色 （＝256色−216色） はすべて黒色 (#000000) で、これは上のチャートの一番終わりの色に相当します。
したがって、 Paint Shop Pro 付属の 256色パレットは、ブラウザセーフ 216色のみで構成されていることがわかります。
- HTML文書の色の指定は 「私のホームページ事始め 制作ノート 5.」、また、ブラウザセーフ色は 「私のホームページ事始め 制作ノート 6.」 においてそれぞれ説明を加えました。合わせて参照下さい。
以上 (堀場康一 記)
(Ver. 1.11 2007/04/22)
Copyright (c) Koichi Horiba, 1998