色彩とは？デザインのための色の基本と視覚効果について

色彩とは色のことであり、そこから彩りや色合いのことを指しても使われます。

この記事では、色の基本である「色相」「明度」「彩度」の3つの属性と、それらの視覚効果について解説していきます。

色彩とは？

先ほども述べたとおり、色彩とは色のことであり、そこから彩りや色合いを指しても使われます。

色彩豊かな〜などと表現する場合は、色がいっぱい使ってあって彩りが上手であるという意味になります。

色の三属性

色には色相・明度・彩度という3つの属性があります。

3つの属性を掛け合わせることで、たくさんの色が表現できているわけですね。

色相

たくさんある色をグループ分けした時に、青系や赤系など基本となる色のことを『色相』と言います。

赤系のピンク、青みがかった黒などと表現することがありますが、これらの大元になる色ですね。

色相環

色相を輪っか状に繋いだものを色相環と言います。カラーパレットは馴染みがありますね。

色相環で向かい合う2色を補色と言い、アクセントカラーと呼ばれる強調色も補色を使うのが一般的です。

明度

「色の明るさ」のことを明度と言います。明るい色を高明度、中間を中明度、暗い色を低明度と言います。

例えば珊瑚色とワインレッドでは、色相は同じ赤色なのですがそれぞれ色の明るさが違います。

明るさを変えることで、同じ色相の色でも印象が変わってくるわけですね。

カラーパレットで見ると分かりやすいですが、色相を白に寄せていくと高明度に、黒に寄せていくと低明度になります。

グレイスケール

最も高い明度である白と最も低い明度である黒を両端に置き、その間に明度順に灰色を配置したものをグレイスケールと言います。

グレイスケールを参考に、赤や青といった色の明度を図ることができます。

自分でどんな配色にするか決めるときは、明度を調節しながらこのように並べてみると良いでしょう。

彩度

「色の鮮やかさ」のことを彩度と言います。

「鮮やかってどんな感じ？」という人は、色のクッキリ具合・色の主張の強さと言えばイメージしやすいかと思います。

彩度の最も低い色は無彩色（黒、白、灰色）と呼ばれます。そのため彩度とは、もとの色に無彩色を混ぜていくことで調整できる度合いとされています。

画像のようなカラーピッカーでは、左下に寄せていくことで彩度の低い色へ調整することができます。

反対に一番右上に持っていけば、彩度の高い色にすることができます。

色を三属性で表してみると？

それでは実際に、3つの属性を使って色を表現してみましょう。

明度を高く・彩度を低くすると、より薄らとふわっとした印象になります。明度を低く・彩度を高〜中にすると、少し重めで落ち着いた印象になります。

同じ色相でも、明度や彩度を調整することで印象を変えられるわけですね。

色の視覚効果

ここからは配色にまつわる視覚効果について解説していきます。

補色残像

実験画像の左側にある青い星の中心の黒い点を20秒程見続けます。その後、右側の黒い点に視線を移すと……

このように有彩色（鮮やかな色）を見つめ続けたあとに、白や灰色の空間に目を移すと残像が見えるようになります。

ブログなどで背景色に鮮やかな色を使ってしまうと、このように目の負担に繋がるわけですね。白や灰色（たまに黒）を基調にすることで、目に優しい記事になるのですね。

色の対比

時間や空間上近くに配置された2色の差が強調される現象を、色の対比と言います。

先ほど解説した三属性によって、色相対比・明度対比・彩度対比の3種類が見られます。

明度対比

同じ色の図でも、背景の明度によって見え方が変わってくることを明度対比と言います。

背景と図の明度（明るさ）に差がある場合、背景が明るいと図はより暗く、背景が暗いと図はより明るく見えてしまいます。

色相対比

明度と同じように、色相が異なる色を組み合わせた場合に、背景の色相によって図の見え方が変わる現象を色相対比と言います。

一般的に背景の上に乗る図の面積が大きいほど、対比の効果は高くなると言われています。

彩度対比

明度、色相と同じように、彩度が異なる色を組み合わせた場合に、背景の彩度によって図の見え方が変わる現象を彩度対比と言います。

背景の彩度が低いとより鮮やかに、背景の彩度が高い（鮮やかだ）とよりくすんで見えてしまいます。

補色による対比

背景と図が補色の関係にある場合、図はより鮮やかに見えます。

「鮮やかな赤」と「鮮やかな緑」という補色を鮮やか同士で組んでしまうと、境界がチカチカするハレーションが起こることがあります。これは見ている人の目の負担になってしまいます。

鮮やか×鮮やかで組ませるのは、できれば避けたいところですね。

まとめ

色の3つの属性を理解しておけば、配色の際にどこをどう調節すれば良いかが分かるようになるはずです。

視覚効果についてはあまり使う機会はないかもしれませんが、こういう風に見えるのだなと知っておくだけでもためになるのではと思います。