色相・彩度・明度の違い｜色選びを三つに分ける

リオ色相も彩度も動かしてたら、さっきの色に戻れなくなった。落ち着かせたかっただけなのに。

アキラ元の色を一つ残しましょう。何を変えたか、並べて見られるように。

色を変える基準は、何を直したいか

「赤は強いから青にする」と決める前に、何が気になったかを分けてみます。色の種類が内容に合わないのか、鮮やかな面が大きすぎるのか、文字と背景が似ていて読みにくいのか。三つは同じ調整では直りません。

たとえるなら、音の高さと音量を別のつまみで調整するようなものです。高い音が気になるときに音量だけを下げても、求めた音色にはならないことがあります。色も、変えたい性質に合わせて動かす軸を選ぶと、試した結果を説明しやすくなります。

ここでの言葉は入口です。色を正確に表す方式には違いがあり、アプリのつまみが同じ名前でも同じ計算とは限りません。別のツールへ数値を移すときは、HSLなのかHSBなのか、RGBなのかを確認します。「明るさ50」という値だけでは条件が足りません。

同じ色から、一項目ずつ動かす例

下の見本は、Webで使えるCSSのHSLという方式で色を作っています。Hが色相、Sが彩度、Lが明るさの成分です。横一列の中では一項目だけを変え、残り二項目を固定しています。

一段目ではオレンジ系・緑系・青系へ色みが変わります。二段目ではオレンジ系を保ちながら鮮やかさを変え、三段目では暗い色から明るい色へ動かしています。最初は用語を暗記するより、どの変化が今ほしい変化に近いかを見てください。

HSLでは、Sが0%になると色みのない灰色になり、Lが0%なら黒、100%なら白になります。これはHSLという方式の定義です。細かな数値の意味はMDNのHSLの説明で確認できます。

一段目の三色はLが同じですが、同じ明るさに見えるとは限りません。Lの値をそろえたことと、知覚上の明るさや背景とのコントラストがそろったことは別です。色の見本を作るときも、設定値と見た目の両方を記録しておくと、何をそろえた比較なのかが明確になります。

落ち着かせたいときは、色みを残して比べる

例えば、案内のオレンジ色が内容より前に出てしまうと感じたとします。オレンジという色み自体は残したいなら、まず彩度を少し下げた候補を作れます。元の色と並べて、主役の文字や写真が見つけやすくなったかを見ます。

彩度を下げても、色の面積が大きければ強く感じることがあります。その場合は、色そのものをさらに変える前に、色を使う面積を小さくした版も比べます。色み、鮮やかさ、面積を同時に変えると、どの変更が役立ったか分からなくなるので、一つずつ試します。

反対に、彩度を下げたことで文字と背景が近い色になり、読みにくくなる場合もあります。落ち着いた印象と読みやすさは、別々に確認する必要があります。印象だけを整えて、必要な文が埋もれないようにします。

「落ち着いた青」「元気な赤」といった固定の対応を探すより、実際の文言や写真と一緒に見てください。同じ色でも面積や隣の色が変わると感じ方は変わります。鮮やかな色の面積を比べる例では、色を替えずに使う場所だけを変えています。

明度をそろえれば読める、という思い込み

文字を読むために必要なのは、文字と背景の関係です。HSLのLを何十ポイント離したから読みやすい、という判断にはできません。色相や彩度が違う色の組では、同じLの差でもコントラスト比が同じにはならないためです。

明るい背景に暗い文字を置くと候補を作りやすくなりますが、最後は文字の大きさや太さ、背景とのコントラストを確認します。白黒へ変換した画面も、差の小さい場所を探す補助になります。ただし、それだけで基準を満たしたと判定することはできません。

また、透過を使った色は背後の色と重なります。色見本の中では読めても、写真や模様の上へ置くと、場所によって文字の見え方が変わります。検査するときは、実際に表示される背景との組を見ます。

文字色を検討しているなら、白い背景に薄い文字と濃い文字を置いた比較を使えます。色相・彩度・明度は候補を作るための言葉、コントラストの確認は文字を読む条件の検査、と役割を分けておきましょう。

あえて色を変えない方がよい場面

色が強すぎるように見えても、実際には同じ色の囲みが多すぎるだけかもしれません。予約の案内、タイトル、補足、日付を全部同じ鮮やかな色で囲んでいたら、必要な一か所だけへ色を残した版を作れます。色の属性を変える前に、使い方を見直す選択です。

決められたブランド色や、状態を示す色がある場合も、思いつきで置き換えると一貫性が崩れることがあります。既存のルールを確認し、背景色、面積、余白、文字の太さなど、別の要素で調整できるかを考えます。変更が必要なら、どの媒体へ影響するかも確かめます。

商品や作品の写真を使う場合は、背景の配色を整えるために実物の色まで変えてしまうと、見る人が受け取る情報が変わります。商品の色を正確に見せる仕事と、案内全体の雰囲気を整える仕事は分けてください。写真以外の要素で調和を作れることもあります。

色数が少なければよい、と一律に考える必要もありません。色で複数の種類を区別する目的があるなら、その区別を残す理由があります。まずベース・メイン・アクセントの役割を分けてから、一色ずつ調整すると全体を追いやすくなります。

自分の一色を、三つの軸で記録する

「何となくきれいになった」だけなら、元の案と変更案でどこを見たかを言葉にしてみます。「背景の鮮やかさを下げたら、商品名の黒い文字へ注意を向けやすく感じた」のように、自分の観察として書けます。まだ他の人に試していなければ、全員に同じ効果があるとは決めません。

色名の次に、変えた軸を言える

色選びに迷ったとき、候補を増やし続けるより「青へ替えたい」「青のまま鮮やかさを抑えたい」と分けると、次の操作が決まります。選べなかった候補も、どの軸が目的と違ったかを知る材料です。

まずは一色だけでかまいません。元の色へ戻せる状態を作って、一つ動かし、実物に置いて比べる。その往復を、言葉と一緒に残してください。