今回は、「色相と彩度と明度の違い」についてまとめました。
全ての色は、色相と彩度と明度の3つの原則から成り立っています。
色の3原則を理解することで、色の配色を自由自在にすることが出来ます。
色の性質について知らないと色をうまく使い分けることが出来ないので、是非確認していきましょう。
【デザイン基本】色相と彩度と明度の違いについて
それでは色相と彩度と明度の違いについて見ていきましょう。
色相とは？
色相とは、「赤」「黄」「緑」といった色みの違いのこと。
色相を円状に配置したものを色相環といいます。
色相環には、補色と類似色があります。
◎補色とは？
色相環で正反対に位置する関係の色の組合せのこと。
例えば、黄色の正反対に位置するのは青紫なので、黄色と青紫は補色の関係です。
◎類似色とは？
色相環上で隣の位置にある色のこと。
色と色の差が小さいため、デザインで使用すると統一感のある配色にすることが出来ます。
彩度とは？
彩度とは、色の鮮やかさや度合いのこと。
最も鮮やかで混じりけのない純粋な色を純色、反対にグレー・白・黒と色味が全くない色を無彩色と言います。
純色に近ければ近いほど彩度が高く、無彩色に近づくと彩度が低くなります。
彩度が高ければ高いほど目を惹く効果があります。
明度とは？
明度とは、白を100で黒を0とした時の明るさを表す属性のこと。
白に近づくと明るく＝明度が高くなり、黒に近づくほど＝明度が低くなります。
色の中で最も明度が高いのが白で、最も低いのが黒です
明度の差が大きいと、色にメリハリをつけることができます
まとめ
以上が、「色相と彩度と明度の違い」でした。
Webデザイナーを目指す上で必ず色の知識は必要なので、是非理解しておきたいところです。
【おまけ】ブログのサムネイル画像の解説
作成時間20分。
「Webデザイン」といったカテゴリを左上に上下均等の余白に配置し、タイトルを下に配置。
（左にテキストを整列）
タイトルの中でも「色相」「彩度」「明度」は特に強調したい部分なので、他のテキストよりもコントラストを意識。
背景画像は色相環が書いてある画像自体はよかったが、背景が白色なので、サムネイルの境界線がわからなくなったのは良くない。
あとはテキストの背景に上下左右均等に余白を配置する方法もまだまだ出来てないなので、今後の課題。
作りながら、少しずつサムネイルの精度を上げていきたいと思います。
