スタイルシートのお勉強です。

カラーイメージ

 文字、背景等に使われる「色」は、

 ■beige のようにダイレクトにカラー指定する。

 ■#f5f5dc のように16進法で表示。

 等の方法があります。しかし、MAC、WINDOWS等、見る環境が違う場合、同じ色が表示されない場合があるようです。

 そこで、カラーパレット共通色(216色)が良く使われます。この場合は、16進法表示が良いようです。

 

下記にはその共通色より、相性の良い色を並べてみます。

色の持つイメージは、そのWEBの印象を左右します。色の組み合わせ等は、美術関連の「カラーイメージ」等を参考にするとちぐはぐな色を使わないですみます。

 

カラーイメージを記します。

ナチュラルで、アーシーなカラーの組み合わせ。

#ffffcc #cc6600 #ffff99 #99cc66 #999900

 

格式のある重厚な組み合わせ。

#990000 #993300 #996600 #003333 #330000

 

カジュアルな組み合わせ

#ffff00 #ff0000 #ffffff #006600 #000099

カラーパレット216色共通色

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

カラーイメージ(このページ)

田舎でのんびりパソコンライフ  by ヒカル         

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■