【webデザイン】色の三属性とは？？

2023.05.31

福岡に拠点を置いているホームページ制作・SEO対策の株式会社スゴヨクです。

ホームページを制作やデザイン制作をするときに・想像していた色ではない・色と色の組み合わせ方がわからない・どのような色を使えばいいか分からない …etc
上記のように思った経験はないでしょうか？
色を使うときに、大切なのが「色相」・「彩度」・「明度」です。
これらを上手に考え色を組み合わせることで、効果的な配色を実現できます。

今回は、そんな「彩度」・「明度」についてご紹介していきます。
初心者の方にとっては理解しやすいようにご説明していきます。
色について知りたい方は、参考にしてください。「色相」については前回の記事をご覧ください。
色相(カラーホイール)についてはこちら

彩度とは？

彩度とは、色の鮮やかさを示す色度合いのことです。
彩度が高い色は、原色に近い色となり、一般的にビビットカラーと呼ばれたりもします。
明るく、力強い印象を与えます。

反対に、彩度が低い色とは、くすんでいて色味が感じにくい色のことです。
落ち着きや鈍さを表現するデザインに向いています。
後、白・黒・グレーは無彩色と呼ばれており、彩度が存在しません。
覚えておきましょう。

明度とは？

続いて、明度についてご説明していきます。
明度とは、色の明るさを表す度合いのことです。
明るさが違ってくれば、色そのものが与える印象は大きく違ってきます。

高明度の色は明るくて柔らかい印象を与えます。また、明度が高くなればなるほど、白色になっていきます。
例えば、赤色の明度が高くなっていくと、ピンク色になります。
反対に、明度が低くなると、暗くて重たい印象を与えます。
先程とは逆に、明度が低くなると黒色になっていきます。
赤色で例えますと、ボルドーなどの暗めの赤色になっていくでしょう。