カラーチャート（色見本）｜Webセーフカラー

カラーチャート

カラーチャート（色見本）

Webセーフカラー

パソコンの画面上の色は、RGB（Red, Green, Blue）の色をそれぞれ0～255までの256段階に調節して色を表現しています。ですから、フルカラーでは256×256×256（R×G×B）の16,777,216色が表現されます。

Webセーフカラーとは、この各256段階あるRGB値を６段階にしたものです。

６段階の値とは、0・51・102・153・204・255と、0から51ずつ増やしていった数になっています。51は16進数で言うと「33」、割合で言うと「20%」にあたる数です。

以上のことから、Webセーフカラーは、RGBの各値（画面上では光の強さ）を0%から20%ずつ上げていった値の組合せで作られているということになります。

10進数051102153204255
16進数0336699ccff
％0％20%40%60%80%100%
Webセーフカラー RGBの各値

これらを組み合わせると、RGBの３色がそれぞれ６段階あるので、6×6×6の216色がWebセーフカラーになります。

たとえば、各色の値は16進数だと00, 33, 66, 99, cc, ffとなるので、どの色でも「#fc0」のように３桁で指定することができます。

ただし、印刷された色は、実際に画面に表示されている色とは多少異なる場合があります。印刷された色の場合、大体の色の感じを掴む程度に利用しましょう。

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

Recommended books

ひと目でわかる配色デザインの基本。
created by Rinker
見てわかる、迷わず決まる配色アイデア ３色だけでセンスのいい色
created by Rinker
はじめてでもわかる！ イラストでお金を生み出す秘訣 神技作画シリーズ
created by Rinker

関連記事

カラーチャートセーフカラー

Posted by kiri