homeホームHTMLに役立つヒント> 配色

配色 ver.0.1/2000/8/11


 画面の印象を同じにするには、配色を整えるのが簡単。で、配色を決める際には、おおざっぱに言ってトーンをそろえる方法と、同系色でそろえる方法があります。

 下の組み合わせ例を縦に見ると同系色(4色ずつ)の組み合わせに、横に見ると同トーンの組み合わせになります。ま、トーンの方はそろっているとは言い難いですが。使っている色はすべてweb共通のセーフカラーです(この制限のためにトーンがそろわない)。

 同系色でまとめる場合、各組み合わせの、下二つの薄い色は面積の大きな背景色上二つの濃い色はアイキャッチとして狭い面積の背景色やテキストカラーとして使う、というのが正しいと思います。

 なお、液晶ディスプレイでは一般に発色が良くなりますから、ディスプレイで見ていい色だなと思っても、液晶で見ると恐ろしく目に痛い、ということままあります。
 また、背景色が変わると印象も変わります。ボタンで背景色を変えてみるといいと思います。

 もっと配色の組み合わせがほしい方は「Mariのいろえんぴつ」がすごいです。超お勧め。しょぼいTOOLがお好きな方はこんなのもあります。

 ちなみに、HTMLでサポートしている色の名前はこれらしい。でも、こんな資料も見つけてしまって、わけわからん。
 ちなみにちなみにcssで指定できる色の名前はこれだそうです。
 ちなみにちなみにちなみにJavaScriptで指定できる色の名前はこっちにおきました。


#000099

#6666ff

#9999ff

#ccccff

#ffcc33

#ffff66

#ffff99

#ffffcc

#663300

#cc6600

#ff9933

#ffcc99

#ff6699

#ff66cc

#ff99ff

#ffccff

#cc0000

#ff6666

#ff9999

#ffcccc

#33cc33

#66ff66

#99ff99

#ccffcc

#006666

#339999

#66cccc

#99cccc

#333333

#666666

#999999

#cccccc

#330000

#990000

#cc6666

#ff9999