色の対比について

 

mamohoのホームページ配色講座

明るめの色を選んだつもりなのに ページに載せてみるとなんだかくすんで見えたり、
イラストをページに貼り付けると なんだか違った色にみえた。。。
なんて経験はありませんか?

色は、隣り合う色がある場合 その色に影響を受けて、違って見えることがあります。
これを 「色の対比」 といいます。

この現象を上手に使えば ホームページの配色に幅がでてきます。
ここでは 配色の基本となる 色の対比についてお話しします。

 

● 同時対比

ふたつ以上の色を同時に見るとき、お互いの色が影響して違った色に
見える現象を 同時対比といいます。

下の図を見てください。

 

同時対比

 

上の図は 2つの色しか使っていません。
でも 見栄えはずいぶん違って見えますね。

この同時対比に 色の3属性 が絡んでくると、
さらに3種類の対比に分けることができます。

 

● 明度対比

明度に差がある色を 同時に見たとき、
明度の高い色はより明るく、明度が低い色はより暗く見えたりする現象を
明度対比といいます。

下の図をみてください。

明度対比 真ん中の灰色は 同じ色ですが 、
左側のほうが 黒っぽく見えて
右側のほうが 白っぽくみえませんか?
真ん中のピンク色は同じ色ですが、
左側のピンクが濃いピンク色、
右側のピンクがうすめのピンク色に
見えませんか?

いかがですか?

これをしっかり理解しておくと、文字の読みやすさという点で、
とても役に立ちます。

 

● 彩度対比

彩度に差がある色を同時に見たとき、
彩度の高い色は よりあざやかに、彩度の低い色は より濁って見える現象を
彩度対比といいます。

では 下の図をみてください。

真ん中の濁った赤を グレーの上に置くと
なんとなく鮮やかに見えるのに、
鮮やかな赤の上に置くと より濁った感じ
に見えますね。
真ん中の緑は 同じ色ですが、
鮮やかな緑の背景の方は 濁って見えて、
濃い緑のほうでは 鮮やかに見えますね。

 

● 色相対比

色合いの違う色を同時に見たとき お互いの色に影響されて、
本来の色とは違った色に見える現象を色相対比といいます。

では、下の図をみてください。

真ん中の橙色は 同じ色ですが、
赤い背景では黄色っぽく見えて、
黄色い背景では、赤っぽくみえますね。

 

真ん中の紫は同じいろですが、
青い背景のほうは赤っぽく見えて、
赤い背景のほうは青っぽく見えますね。

 

 

 

上手な配色のコツ


 

mamohoのホームページ配色講座

 

当ホームページは リンクフリーです! 
Copyright (C) 2007. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。