[CSS] セーフカラー一覧

以下の表にあるカラーコードはセーフカラーと呼ばれるコードで、ブラウザやマシンスペックが異なる環境でも常に同じに表示される色でWebデザインの基本色です。

カラーコードは"#"+6桁の16進数で表されます。
6桁の部分は先頭から2桁ずつR(赤)G(緑)B(青)を表します。
2桁の16進数は00~ffまでの値をとりますので、赤を表すには「#ff0000」となります。

セーフカラー一覧

R=ffのパターン (横軸:G /縦軸:B)

  00 33 66 99 cc ff
00 #ff0000 #ff3300 #ff6600 #ff9900 #ffcc00 #ffff00
33 #ff0033 #ff3333 #ff6633 #ff9933 #ffcc33 #ffff33
66 #ff0066 #ff3366 #ff6666 #ff9966 #ffcc66 #ffff66
99 #ff0099 #ff3399 #ff6699 #ff9999 #ffcc99 #ffff99
cc #ff00cc #ff33cc #ff66cc #ff99cc #ffcccc #ffffcc
ff #ff00ff #ff33ff #ff66ff #ff99ff #ffccff #ffffff

G=ffのパターン (横軸:R /縦軸:B)

  00 33 66 99 cc ff
00 #00ff00 #33ff00 #66ff00 #99ff00 #ccff00 #ffff00
33 #00ff33 #33ff33 #66ff33 #99ff33 #ccff33 #ffff33
66 #00ff66 #33ff66 #66ff66 #99ff66 #ccff66 #ffff66
99 #00ff99 #33ff99 #66ff99 #99ff99 #ccff99 #ffff99
cc #00ffcc #33ffcc #66ffcc #99ffcc #ccffcc #ffffcc
ff #00ffff #33ffff #66ffff #99ffff #ccffff #ffffff

B=ffのパターン (横軸:R /縦軸:G)

  00 33 66 99 cc ff
00 #0000ff #3300ff #6600ff #9900ff #cc00ff #ff00ff
33 #0033ff #3333ff #6633ff #9933ff #cc33ff #ff33ff
66 #0066ff #3366ff #6666ff #9966ff #cc66ff #ff66ff
99 #0099ff #3399ff #6699ff #9999ff #cc99ff #ff99ff
cc #00ccff #33ccff #66ccff #99ccff #ccccff #ffccff
ff #00ffff #33ffff #66ffff #99ffff #ccffff #ffffff

R=ccのパターン (横軸:G /縦軸:B)

  00 33 66 99 cc
00 #cc0000 #cc3300 #cc6600 #cc9900 #cccc00
33 #cc0033 #cc3333 #cc6633 #cc9933 #cccc33
66 #cc0066 #cc3366 #cc6666 #cc9966 #cccc66
99 #cc0099 #cc3399 #cc6699 #cc9999 #cccc99
cc #cc00cc #cc33cc #cc66cc #cc99cc #cccccc

G=ccのパターン (横軸:R /縦軸:B)

  00 33 66 99 cc
00 #00cc00 #33cc00 #66cc00 #99cc00 #cccc00
33 #00cc33 #33cc33 #66cc33 #99cc33 #cccc33
66 #00cc66 #33cc66 #66cc66 #99cc66 #cccc66
99 #00cc99 #33cc99 #66cc99 #99cc99 #cccc99
cc #00cccc #33cccc #66cccc #99cccc #cccccc

B=ccのパターン (横軸:R /縦軸:G)

  00 33 66 99 cc
00 #0000cc #3300cc #6600cc #9900cc #cc00cc
33 #0033cc #3333cc #6633cc #9933cc #cc33cc
66 #0066cc #3366cc #6666cc #9966cc #cc66cc
99 #0099cc #3399cc #6699cc #9999cc #cc99cc
cc #00cccc #33cccc #66cccc #99cccc #cccccc

R=99のパターン (横軸:G /縦軸:B)

  00 33 66 99
00 #990000 #993300 #996600 #999900
33 #990033 #993333 #996633 #999933
66 #990066 #993366 #996666 #999966
99 #990099 #993399 #996699 #999999

G=99のパターン (横軸:R /縦軸:B)

  00 33 66 99
00 #009900 #339900 #669900 #999900
33 #009933 #339933 #669933 #999933
66 #009966 #339966 #669966 #999966
99 #009999 #339999 #669999 #999999

B=99のパターン (横軸:R /縦軸:G)

  00 33 66 99
00 #000099 #330099 #660099 #990099
33 #003399 #333399 #663399 #993399
66 #006699 #336699 #666699 #996699
99 #009999 #339999 #669999 #999999

R=66のパターン (横軸:G /縦軸:B)

  00 33 66
00 #660000 #663300 #666600
33 #660033 #663333 #666633
66 #660066 #663366 #666666

G=66のパターン (横軸:R /縦軸:B)

  00 33 66
00 #006600 #336600 #666600
33 #006633 #336633 #666633
66 #006666 #336666 #666666

B=66のパターン (横軸:R /縦軸:G)

  00 33 66
00 #000066 #330066 #660066
33 #003366 #333366 #663366
66 #006666 #336666 #666666

R=33のパターン (横軸:G /縦軸:B)

  00 33
00 #330000 #333300
33 #330033 #333333

G=33のパターン (横軸:R /縦軸:B)

  00 33
00 #003300 #333300
33 #003333 #333333

B=33のパターン (横軸:R /縦軸:G)

  00 33
00 #000033 #330033
33 #003333 #333333

00のパターン (黒)

  00
00 #000000

備考

  • Webのデザインをする場合は、可能な限りセーフカラーコードの中から色を選ぶことをお勧めします。

コメント

タイトルとURLをコピーしました