色相・彩度・明度とは？デザイン初心者向けに解説

色相・彩度・明度とは？三つに分けて見る

この3つは一般に「色の三属性」と呼ばれます。実際のツールにはHSB・HSV・HSLなど異なる表し方もあり、明るさの数値は同じとは限りません。数値を暗記するより、変更前後を見比べることから始めましょう。

色相：赤や青などの種類

赤からオレンジ、黄、緑、青、紫へと、色の種類が変わる方向です。色相を円状に並べた「色相環」では、近い色か、離れた色かを見比べられます。

たとえばカフェの見出しを茶色から青にすると、落ち着きは残っていても、あたたかい雰囲気からすっきりした雰囲気へ変わることがあります。印象は写真や言葉にも左右されるので、色だけで決めつけないことが大切です。

彩度：鮮やかさの違い

彩度が高い色は鮮やかで、低い色は灰色に近づきます。大きな面に鮮やかな色を置くと強く見えやすいので、初心者は背景の彩度を抑え、目印にする部分だけ鮮やかにすると調整しやすくなります。

「くすみカラー」は暗い色とは限らない

くすんだ色は、鮮やかさが抑えられた色を指すことが多い言葉です。薄いくすみピンクも、濃いくすみピンクもあります。「くすみ＝暗い」と考えず、彩度と明度を別々に見てみましょう。

明度：明るさの違い

明度が高い色は明るく、低い色は暗く見えます。白は明るい側、黒は暗い側です。色が違っていても明るさが近いと、文字と背景の境目が分かりづらくなることがあります。

Webの通常の文字では、背景とのコントラスト比4.5：1以上がWCAGの基準です。大きな文字には別の基準があります。色の名前や見た目の印象だけで合否は分からないので、コントラストチェックのツールで、実際の文字色と背景色の組み合わせを確認しましょう。

参考：W3C「Contrast (Minimum)」。色だけで意味を伝えない考え方はW3C「Use of Color」も参考にしています。

困ったときの調整順

全部を一度に変えると、何が効いたか分かりません。まず背景の鮮やかさだけ、次に文字の濃さだけ、と1項目ずつ試しましょう。色を使う場所から決めたい方は、配色の基本も参考になります。

落ち着かせようと全部くすませたら、何も目立たなくなりました。

PORT編集部

本文は読みやすい濃さを残し、ボタンなど1か所に差をつけましょう。全体を同じ調子にするより、大事な部分が分かりやすくなります。

1色でできる練習

好きな色を1つ選び、背景用の明るい色、見出し用の濃い色、飾り用の中間色を作ってみましょう。それぞれを同じカードに当てはめると、色の調整と使う場所を一緒に覚えられます。

参考：Adobeのカラーピッカー解説では、HSBによる色の指定方法を確認できます。