webセーフカラー216色

webセーフカラーとは、表示色256色(8bit)以上の色深度をもつ環境でブラウザ上の色を正確に表示するために定義されたカラーパレットのこと。

最近のパソコンやモニタは性能が向上、普及しているのでこのカラーパレットによる色にこだわらなくても意図した色で表示できるようになっていますので、あまり神経質になる必要はないように思います。

しかしながら、コーポレートカラーなど特別に色を指定したい場合などを除いてはどのような環境であっても正しく表示されるようにwebセーフカラーを用いるのがよいでしょう。特に、ユーザビリティに配慮したWebサイトを作成したい場合などはセーフカラーを用いるのが一般的なようです。

下表は上段がタグで指定するカラーコード、下段がRGB表示となっています。またセル内をクリックすると背景色が変更されますので配色の参考にご利用下さい。

16進数(カラーコード)
10進数(RGB)
背景を白に戻す

#ffffff
255 255 255
#ffffcc
255 255 204
#ffff99
255 255 153
#ffff66
255 255 102
#ffff33
255 255 51
#ffff00
255 255 0
#ffccff
255 204 255
#ffcccc
255 204 204
#ffcc99
255 204 153
#ffcc66
255 204 102
#ffcc33
255 204 51
#ffcc00
255 204 0
#ff99ff
255 153 255
#ff99cc
255 153 204
#ff9999
255 153 153
#ff9966
255 153 102
#ff9933
255 153 51
#ff9900
255 153 0
#ff66ff
255 102 255
#ff66cc
255 102 204
#ff6699
255 102 153
#ff6666
255 102 102
#ff6633
255 102 51
#ff6600
255 102 0
#ff33ff
255 51 255
#ff33cc
255 51 204
#ff3399
255 51 153
#ff3366
255 51 102
#ff3333
255 51 51
#ff3300
255 51 0
#ff00ff
255 0 255
#ff00cc
255 0 204
#ff0099
255 0 153
#ff0066
255 0 102
#ff0033
255 0 51
#ff0000
255 0 0
#ccffff
204 255 255
#ccffcc
204 255 204
#ccff99
204 255 153
#ccff66
204 255 102
#ccff33
204 255 51
#ccff00
204 255 0
#99ffff
153 255 255
#99ffcc
153 255 204
#99ff99
153 255 153
#99ff66
153 255 102
#99ff33
153 255 51
#99ff00
153 255 0
#66ffff
102 255 255
#66ffcc
102 255 204
#66ff99
102 255 153
#66ff66
102 255 102
#66ff33
102 255 51
#66ff00
102 255 0
#33ffff
51 255 255
#33ffcc
51 255 204
#33ff99
51 255 153
#33ff66
51 255 102
#33ff33
51 255 51
#33ff00
51 255 0
#00ffff
0 255 255
#00ffcc
0 255 204
#00ff99
0 255 153
#00ff66
0 255 102
#00ff33
0 255 51
#00ff00
0 255 0
#ccccff
204 204 255
#99ccff
153 204 255
#66ccff
102 204 255
#33ccff
51 204 255
#00ccff
0 204 255
#cc99ff
204 153 255
#9999ff
153 153 255
#6699ff
102 153 255
#3399ff
51 153 255
#0099ff
0 153 255
白に戻す
#cc66ff
204 102 255
#9966ff
153 102 255
#6666ff
102 102 255
#3366ff
51 102 255
#0066ff
0 102 255
▲ページ上へ
#cc33ff
204 51 255
#9933ff
153 51 255
#6633ff
102 51 255
#3333ff
51 51 255
#0033ff
0 51 255
#cc00ff
204 0 255
#9900ff
153 0 255
#6600ff
102 0 255
#3300ff
51 0 255
#0000ff
0 0 255
#cccccc
204 204 204
#99cccc
153 204 204
#66cccc
102 204 204
#33cccc
51 204 204
#00cccc
0 204 204
#cc99cc
204 153 204
#9999cc
153 153 204
#6699cc
102 153 204
#3399cc
51 153 204
#0099cc
0 153 204
#cc66cc
204 102 204
#9966cc
153 102 204
#6666cc
102 102 204
#3366cc
51 102 204
#0066cc
0 102 204
#cc33cc
204 51 204
#9933cc
153 51 204
#6633cc
102 51 204
#3333cc
51 51 204
#0033cc
0 51 204
#cc00cc
204 0 204
#9900cc
153 0 204
#6600cc
102 0 204
#3300cc
51 0 204
#0000cc
0 0 204
#cccc99
204 204 153
#99cc99
153 204 153
#66cc99
102 204 153
#33cc99
51 204 153
#00cc99
0 204 153
#cccc66
204 204 102
#99cc66
153 204 153
#66cc66
153 204 153
#33cc66
51 204 102
#00cc66
0 204 102
#cccc33
204 204 51
#99cc33
153 204 51
#66cc33
102 204 51
#33cc33
51 204 51
#00cc33
0 204 51
#cccc00
204 204 0
#99cc00
153 204 0
#66cc00
102 204 0
#33cc00
51 204 0
#00cc00
0 204 0
#cc9999
204 153 153
#cc9966
204 153 102
#cc9933
204 153 51
#cc9900
204 153 0
#cc6699
204 102 153
#cc6666
204 102 102
#cc6633
204 102 51
#cc6600
204 102 0
白に戻す
#cc3399
204 51 153
#cc3366
204 51 102
#cc3333
204 51 51
#cc3300
204 51 0
▲ページ上へ
#cc0099
204 0 153
#cc0066
204 0 102
#cc0033
204 0 51
#cc0000
204 0 0
#999999
153 153 153
#999966
153 153 102
#999933
153 153 51
#999900
153 153 0
#669999
102 153 153
#669966
102 153 102
#669933
102 153 51
#669900
102 153 0
#339999
51 153 153
#339966
51 153 102
#339933
51 153 51
#339900
51 153 0
#009999
0 153 153
#009966
0 153 102
#009933
0 153 51
#009900
0 153 0
#996699
153 102 153
#996666
153 102 102
#996633
153 102 51
#996600
153 102 0
#993399
153 51 153
#993366
153 51 102
#993333
153 51 51
#993300
153 51 0
#990099
153 0 153
#990066
153 0 102
#990033
153 0 51
#990000
153 0 0
#666699
102 102 153
#663399
102 51 153
#660099
102 0 153
#336699
51 102 153
#333399
51 51 153
#330099
51 0 153
#006699
0 102 153
#003399
0 51 153
#000099
0 0 153
#666666
102 102 102
#663366
102 51 102
#660066
102 0 102
#336666
51 102 102
#333366
51 51 102
#330066
51 0 102
#006666
0 102 102
#003366
0 51 102
#000066
0 0 102
白に戻す
#666633
102 102 51
#663333
102 51 51
#660033
102 0 51
▲ページ上へ
#666600
102 102 0
#663300
102 51 0
#660000
102 0 0
#336633
51 102 51
#006633
0 102 51
#336600
51 102 0
#006600
0 102 0
#333333
51 51 51
#333300
51 0 0
#330033
51 0 51
#330000
51 0 0
#003333
0 51 51
#000033
0 0 51
#003300
0 5 10
#000000
0 0 0
(100%)
#000000
0 0 0
(80%)
#333333
51 51 51  
(60%)
#66666
102 102 102
(40%)
#999999
153 153 153
(20%)
#cccccc
204 204 204
(0%)
#ffffff
255 255 255

▲このページ上へ