同じピンクなのに、かわいく見えるものと派手に見えるものがあります。何が違うんでしょう？
PORT編集部色の種類だけでなく、鮮やかさと明るさが違うからです。3つを分けて見ると「もう少し落ち着かせたい」ときに何を調整するか分かります。
「もう少しやさしい色にしたい」「写真と色が合わない」。そう感じても、どこを変えればよいか分からないことがあります。色相・彩度・明度は、そんなときに色の違いを整理するための言葉です。難しい計算を覚える必要はありません。まずは下の色を見比べながら、3つの役割をつかみましょう。
色相は「赤・青などの色の種類」、彩度は「鮮やかさ」、明度は「明るさ」です。どれか1つずつ変えて比較すると、欲しい印象に近づけやすくなります。
色の違いは3つに分けられる
| 言葉 | 何を表す？ | 調整する場面 |
|---|---|---|
| 色相 | 赤・黄・青などの種類 | ピンクを青系に変えたい |
| 彩度 | 鮮やかさの程度 | 派手さを抑えたい |
| 明度 | 明るさの程度 | 背景を明るくしたい |
この3つは一般に「色の三属性」と呼ばれます。実際のツールにはHSB・HSV・HSLなど異なる表し方もあり、明るさの数値は同じとは限りません。数値を暗記するより、変更前後を見比べることから始めましょう。
色相：赤や青などの種類
赤からオレンジ、黄、緑、青、紫へと、色の種類が変わる方向です。色相を円状に並べた「色相環」では、近い色か、離れた色かを見比べられます。
たとえばカフェの見出しを茶色から青にすると、落ち着きは残っていても、あたたかい雰囲気からすっきりした雰囲気へ変わることがあります。印象は写真や言葉にも左右されるので、色だけで決めつけないことが大切です。
彩度：鮮やかさの違い
彩度が高い色は鮮やかで、低い色は灰色に近づきます。大きな面に鮮やかな色を置くと強く見えやすいので、初心者は背景の彩度を抑え、目印にする部分だけ鮮やかにすると調整しやすくなります。
「くすみカラー」は暗い色とは限らない
くすんだ色は、鮮やかさが抑えられた色を指すことが多い言葉です。薄いくすみピンクも、濃いくすみピンクもあります。「くすみ＝暗い」と考えず、彩度と明度を別々に見てみましょう。
明度：明るさの違い
明度が高い色は明るく、低い色は暗く見えます。白は明るい側、黒は暗い側です。色が違っていても明るさが近いと、文字と背景の境目が分かりづらくなることがあります。
日程と会場をご確認ください。
日程と会場をご確認ください。
Webの通常の文字では、背景とのコントラスト比4.5：1以上がWCAGの基準です。大きな文字には別の基準があります。色の名前や見た目の印象だけで合否は分からないので、コントラストチェックのツールで、実際の文字色と背景色の組み合わせを確認しましょう。
参考：W3C「Contrast (Minimum)」。色だけで意味を伝えない考え方はW3C「Use of Color」も参考にしています。
困ったときの調整順
| 気になること | 最初に試すこと |
|---|---|
| 派手に感じる | 背景や広い面の彩度を下げる |
| 文字が埋もれる | 文字と背景の明るさの差を広げる |
| 雰囲気が合わない | 色相を変えて見比べる |
| 全体がぼんやりする | 重要な部分だけ濃く、または鮮やかにする |
全部を一度に変えると、何が効いたか分かりません。まず背景の鮮やかさだけ、次に文字の濃さだけ、と1項目ずつ試しましょう。色を使う場所から決めたい方は、配色の基本も参考になります。
落ち着かせようと全部くすませたら、何も目立たなくなりました。
PORT編集部本文は読みやすい濃さを残し、ボタンなど1か所に差をつけましょう。全体を同じ調子にするより、大事な部分が分かりやすくなります。
1色でできる練習
好きな色を1つ選び、背景用の明るい色、見出し用の濃い色、飾り用の中間色を作ってみましょう。それぞれを同じカードに当てはめると、色の調整と使う場所を一緒に覚えられます。
参考：Adobeのカラーピッカー解説では、HSBによる色の指定方法を確認できます。
