色の対比とは?配色を決める時に役立つ色の対比効果についてのまとめ。

色の対比効果とは?配色を決める時に役立つ色の対比についてのまとめ。
  • このエントリーをはてなブックマークに追加
  • 903

    follow us in feedly

色の対比というのは、2つの色もしくは複数の色がそれぞれに影響しあうことで、色が違ってみえる現象のことを言います。

違ってみえるというと、なんとなく色がおかしくなるようにも聞こえますが、うまく使いこなすと色をより良く見せることもできるので覚えておくと役立つと思います。

またWebデザインで配色をしている時に「あれ?なんか色の印象が違って見える…」と思った時は、この対比効果が影響しているかもしれません。

対比と一言でいっても、中には色々な種類の対比があるので代表的なものをいくつか紹介したいと思います。

スポンサーリンク

色相対比

色相対比は、周りにある色の影響を受けて色相にずれを感じる現象です。

色相対比

人の目は、ひとつの色を見た時に補色(色相環で反対にある色)の感覚を強めて刺激のバランスをとろうとする作用があります。

例のように緑と赤の背景があって、中央のに青い四角がある場合、緑のほうを見ると補色の「赤」の感度が強くなるので、中央の青い四角の赤みが強くなります。逆に言うと青みが弱くなる、ということです。

右側の赤の場合は、赤を見ると逆に「緑」の感度が強くなるので寒色に対する刺激に強くなり、中央の青い四角がより青みがあるように見えます。

それぞれ2つの青を見比べて見ると、右側のほうが青みをより強く感じると思います。

こんな風に色相対比では、周りの色に影響されて色相がずれて見えるんですね。

配色で逆の使い方をしていると、引き立てたい色がその色らしく見えないという原因にもなりますね。

明度対比

明度対比は、周りにある色の明度によって同じ色が違って見える現象です。

明度対比

どちらも同じ黄色を配置していますが、左側の黄色のほうがくすんで暗く見えますよね。

これは背景に置いた灰色のそれぞれの明度が影響しています。

左側の灰色は中央の黄色よりも明度が高いので、対比効果で黄色がくすんで見えます。逆に右側の灰色は中央の黄色よりも明度が低いので、黄色がより明るく見えます。

明度の高い色を目立たせたい時は、明度の低い色と組み合わせることで色を引き立てることができるということですね。

彩度対比

彩度対比は、彩度の違いによって彩度が高い色がより鮮やかに、彩度の低い色はくすんで見える現象です。

彩度対比

上の例では中央に同じピンクを配置していますが、右側のほうが色が鮮やかに見えると思います。全然違って見えますよね。

これは背景にある色の彩度の違いが影響しています。

左側の背景には中央のピンクよりも彩度の高いピンクを配置しているので、背景のほうがより鮮やかに見え、中央のピンクはくすんで見えます。

逆に右側の背景には中央のピンクよりも彩度の低いピンクを配置しているので、中央のピンクが鮮やかに見え、背景のピンクはよりくすんだ印象になります。

配色をしてみて、なぜか色がくすんで見える!となった時は、彩度の組み合わせをチェックしたほうが良いと思います。

補色対比

補色対比は、補色同士がそれぞれを引き立て、より鮮やかに見える現象です。

補色対比

補色は色相環で反対にある色のことです。この色同士の組み合わせをすると、それぞれの色が引き立てあうことでより鮮やかな印象になります。

ただし右側の例のように極端に明るい色同士の組み合わせだと、見づらく目に優しくない配色になりがちなので注意してください。( ;∀;)目がぁあーーー!ってなりそうですよね。

補色の組み合わせはそれだけで派手な印象になりがちなので、使い方をじっくり考えたほうが良いと思います。

Webデザインにも対比の知識を活かそう

というわけで4つの対比について説明してみました。

もちろんこの知識はWebデザインでも大きく活かせるので、何か目立たせたいものがあった時、引き立てたい色があった時、ちょっと色のバランスがおかしい、といった時などに思い出してみて違った目線で考えてみてはいかがでしょうか。

配色は千差万別あるので、色を決めるのってなかなかむずかしいですがひとつの参考になればと思います。

スポンサーリンク