RGBによるWebセーフカラー分類
RGBで色の球体を思い浮かべてください。赤道に均等にRGBを配置します。北極が白で南極が黒です。表示の都合上これを90度傾けます。北極南極を結ぶ地軸を水平にした感じです。その球の皮をむいたイメージが下の表になります。球体なので平面になりませんので極付近は引き伸ばしているつもりです。（Webセーフカラーのみを対象にしています)
赤道に並んでいるのが下の高彩度のff0000からの表の縦です。縦はトーンが同じです。左右は明度を表します。表毎に彩度が変わります。
RGBを機械的に配置しただけのものであり、色彩学的なものではありません。
高彩度
WebセーフカラーをRGBで機械的に配置しました。赤(#ff0000)を中心にしています。左に行くほど明るくなります（明度が上がる）。たてはトーンが同じです。
| #fffffff | #ffcccc | #ff9999 | #ff6666 | #ff3333 | #ff0000 | #cc0000 | #990000 | #660000 | #330000 | #000000 |
| #ffccff | #ff99cc | #ff6699 | #ff3366 | #ff0033 | ||||||
| #ff99ff | #ff66cc | #ff3399 | #ff0066 | #cc0033 | ||||||
| #ff66ff | #ff33cc | #ff0099 | #cc0066 | #990033 | ||||||
| #ff33ff | #ff00cc | #cc0099 | #990066 | #660033 | ||||||
| #ff00ff | #cc00cc | #990099 | #660066 | #330033 | ||||||
| #cc00ff | #9900cc | #660099 | #330066 | #000033 | ||||||
| #cc33ff | #9900ff | #6600cc | #330099 | #000066 | ||||||
| #cc66ff | #9933ff | #6600ff | #3300cc | #000099 | ||||||
| #cc99ff | #9966ff | #6633ff | #3300ff | #0000cc | ||||||
| #ccccff | #9999ff | #6666ff | #3333ff | #0000ff | ||||||
| #ccffff | #99ccff | #6699ff | #3366ff | #0033ff | ||||||
| #99ffff | #66ccff | #3399ff | #0066ff | #0033cc | ||||||
| #66ffff | #33ccff | #0099ff | #0066cc | #003399 | ||||||
| #33ffff | #00ccff | #0099cc | #006699 | #003366 | ||||||
| #00ffff | #00cccc | #009999 | #006666 | #003333 | ||||||
| #00ffcc | #00cc99 | #009966 | #006633 | #003300 | ||||||
| #33ffcc | #00ff99 | #00cc66 | #009933 | #006600 | ||||||
| #66ffcc | #33ff99 | #00ff66 | #00cc33 | #00990 | ||||||
| #99ffcc | #66ff99 | #33ff66 | #00ff33 | #00cc00 | ||||||
| #ccffcc | #99ff99 | #66ff66 | #33ff33 | #00ff00 | ||||||
| #ffffcc | #ccff99 | #99ff66 | #66ff33 | #33ff00 | ||||||
| #ffff99 | #ccff66 | #99ff33 | #66ff00 | #33cc00 | ||||||
| #ffff66 | #ccff33 | #99ff00 | #66cc00 | #339900 | ||||||
| #ffff33 | #ccff00 | #99cc00 | #669900 | #336600 | ||||||
| #ffff00 | #cccc00 | #999900 | #666600 | #333300 | ||||||
| #ffcc00 | #cc9900 | #996600 | #663300 | #330000 | ||||||
| #ffcc33 | #ff9900 | #cc6600 | #993300 | #660000 | ||||||
| #ffcc66 | #ff9933 | #ff6600 | #cc3300 | #990000 | ||||||
| #ffcc99 | #ff9966 | #ff6633 | #ff3300 | #cc0000 | ||||||
| #ffcccc | #ff9999 | #ff6666 | #ff3333 | #ff0000 |
使用したい色のところに16進表記でカラーコードがありますのでコピーして使用できます。
一番上と一番下の行はくるっと回って1周する事がわかるように同じものが配置してあります。
中彩度
赤(#ff0000)の彩度を下げたcc3333を中心に左が明度を上げたものです。
| #cccccc | #cc9999 | #cc6666 | #cc3333 | #993333 | #663333 | #333333 |
| #cc99cc | #cc6633 | #cc3366 | ||||
| #cc66cc | #cc3399 | #993366 | ||||
| #cc33cc | #993399 | #663366 | ||||
| #9933cc | #663399 | #333366 | ||||
| #9966cc | #6633cc | #333399 | ||||
| #9999cc | #6666cc | #3333cc | ||||
| #99cccc | #6699cc | #3366cc | ||||
| #66cccc | #3399cc | #336699 | ||||
| #33cccc | #339999 | #336666 | ||||
| #33cc99 | #339966 | #336633 | ||||
| #66cc99 | #33cc66 | #339933 | ||||
| #99cc99 | #66cc66 | #33cc33 | ||||
| #cccc99 | #99cc66 | #66cc33 | ||||
| #cccc66 | #99cc33 | #669933 | ||||
| #cccc33 | #999933 | #666633 | ||||
| #cc9933 | #996633 | #663333 | ||||
| #cc9966 | #cc6633 | #993333 | ||||
| #cccc66 | #99cc33 | #cc3333 |
使用したい色のところに16進表記でカラーコードがありますのでコピーして使用できます。
一番上と一番下の行はくるっと回って1周する事がわかるように同じものが配置してあります。
低彩度
赤(#ff0000)の彩度を下げたcc3333を更に彩度を下げた996666が中心です。
| #999999 | #996666 | #666666 |
| #996699 | ||
| #666699 | ||
| #669999 | ||
| #669966 | ||
| #999966 | ||
| #996666 |
使用したい色のところに16進表記でカラーコードがありますのでコピーして使用できます。
一番上と一番下の行はくるっと回って1周する事がわかるように同じものが配置してあります。
グレースケール
| #ffffff | #cccccc | #999999 | #666666 | #333333 | #000000 |
