色相・明度・クロマ

「もっと青く」「色が重すぎる」「もう少し柔らかく」はよく使う言葉ですが、意味が曖昧です。暗くしたいのに、相手は鮮やかさを上げるかもしれません。

色を変える前に、色相、明度、クロマを分けて考えます。 三つの方向を別々に観察し、二色の違いを具体的に説明するのが目標です。色相環を暗記するための篇ではありません。

四つの青の違いは？

淡い青のシャツ、濃い青の表紙、鮮やかな青のプラスチック、灰みの青い壁を想像してください。どれも青の周辺に属していても、同じには見えません。

四つの色見本は同じ背景で比べています。A と B は主に明暗、C と D は主に灰みから鮮明さへの変化です。「違う青」と呼ぶだけでなく、もう少し具体的に言えます。

用語は特定の色彩体系に沿って使います。クロマは彩度に関わる量ですが、すべての体系で saturation と同一ではありません。

一度に一つの方向を変える

実験では OKLCH を使い、L が明度、C がクロマ、H が色相です。色を記述し計算するための表現方法で、ここでは青の周辺の表示可能な範囲に限定します。

まず L だけを上げ、元に戻して C だけを上げます。違いを比べた後、H を動かして隣の色相へ近づけます。

「同じ L の無彩色」は L を保って C をゼロにします。この体系の明度を理解する比較であり、⁠画面が発する物理的な輝度の測定でも、誰にでも完全に同じ明るさに見えるという証明でもありません。 C がゼロなら、H を変えても無彩色の表示は変わりません。

調色ツールの「明るさ」とは違う？

ツールによって HSL、HSV、その他の表現を使います。HSL の L、HSV の V、OKLCH の L は異なる座標であり、似た名称でも数値を交換できません。

例えば異なる色相を HSL の L = 50% にしても、同じ明るさに見える保証はありません。数値の意味を説明する前に、どの体系かを確認します。ここで変換式を覚える必要はありません。実験が OKLCH から表示用の sRGB へ変換します。

手順で学ぶ：「この青は重い」と言われたら何を変える？

カップの色を選んでいるとします。「重い」は暗すぎる、鮮やかすぎる、あるいは画面で大きすぎるという意味かもしれません。三つのスライダーを同時に動かす前に、意味を分けます。

胴と持ち手の色だけを変え、背景、葉、形、位置は固定しています。同じ OKLCH 変換を使い、A は L=0.53、C=0.07、H=240°。B は L だけを 0.75、C は C だけを 0.018、D は H だけを 185°に変更しています。方向を分けるための数値で、暗記は不要です。

A → B：暗さが問題なら、まず明度を上げます。 カップは淡くなり、淡い背景との明暗差は小さくなります。軽く感じられる一方、輪郭が読みにくくなる可能性もあります。色選択画面の一色だけでなく、全体へ戻って確認します。

A → C：強く主張しすぎるなら、クロマを下げて試します。 明度座標を上げずに灰色へ近づけます。灰みの青と淡い青は同じではありません。すべての色のクロマを下げれば階層ができるわけでもありません。

A → D：「もう少し緑寄り」は色相の変更です。 色の家族の方向を変えています。もし本当の問題が文字の読みにくさなら、明暗を近いまま色相を回しても直らないかもしれません。

四つに共通の美しさの順位はありません。淡い商品画像なら B、控えめな挿絵なら C、植物との関係をつくるなら D を試せます。各判断に用途と周囲の条件を添えてください。

暖色、寒色、中性色を具体的に使う

赤、橙、黄は暖かい系統、青や一部の青緑は冷たい系統としてまとめられます。ただし局所的な比較も大切です。紫寄りの青と緑寄りの青を並べれば、冷暖の判断は変わり得ます。「青」という名前だけで画面全体の印象は説明できません。

厳密なモデルの中性色は無彩色軸を指すことがあります。一方、デザインの会話では低彩度のベージュ、灰褐色、青灰色も中性色と呼びます。完全に色相がないとは限りません。クリーム色は冷たい白の隣で暖かく、青灰色はクリーム色の隣で青く感じられることがあります。淡い背景の偏色も周囲に関わります。

まず暖かめか冷ための低彩度の地を選び、その隣に対象色の候補を置いて比べてみましょう。「白は全部同じ」「中性色は配色に影響しない」と仮定するより確かです。

三原色に違う組み合わせがある理由

画面は主に赤、緑、青の光を加えて色をつくります。カラー印刷ではシアン、マゼンタ、黄に黒のインクを組み合わせることが一般的です。伝統的な絵画教育では赤・黄・青の色相環も使います。色の系統を比べるには便利ですが、すべての画面や顔料に対する厳密な混合式ではありません。

したがって「青の補色は何か」には、まずどの色相環や混合系かが必要です。デザインでの青と橙の対比は伝統的な色相環の向かい合う系統を指すことが多く、RGB の各値を反転する操作とは別です。同じ「補色」という言葉でも結果の一致は保証されません。

顔料は具体的な色料、透明度、下地でも混ざり方が変わります。画面の色見本を並べても、絵具の混合を再現していません。実物の絵具では小さく試し混ぜをします。

繰り返し使う選色の手順

「青らしさを保ち、葉より明るいカップにする」のように変更目標を具体化します。関係する座標だけを動かし、同じ背景で新旧を比較し、輪郭と主従を確認します。直らなければ、面積、位置、周囲の色が問題なのかを考え直します。

実物の商品色を合わせるには、表示機器、照明、色管理、現物の校正も関わります。この色見本は判断方法の練習で、生産時の色校正に代わるものではありません。次の篇で完成した配色案に使います。

包装に応用：色相を変えれば境界は直る？

穏やかな色を保ち、淡い背景から包装の外縁を見分けやすくします。A が現状。B は OKLCH の明度とクロマを固定して青を緑方向へ、C は色相とクロマを固定して明度を下げました。最初の修正と、その代償を選んでください。

二つの短い確認

状況一： ボタンを鮮やかにしたいが、明暗は意図的に変えたくありません。どの方向から試しますか。

状況二： 灰色の C はゼロです。H を動かしても変わりません。操作が壊れているのでしょうか。

分かりやすい説明に戻る

二色を比べるときは、「より明るい」「紫寄り」「より鮮明」と、一つの属性をまず言ってみましょう。その後で、複数の属性が一緒に変わる場合を考えます。

任意の実践：同じ色相の周辺の衣類や包装を、明暗で並べ、次に落ち着いた色から鮮やかな色へ並べます。二つの順番は一致しなくても構いません。

参考：Colour Literacy：色の属性、CSS Color 4：Oklab と OkLCh。光を足すことと絵の具を混ぜることは異なる過程で、この画面の色見本は絵の具の配合を教えるものではありません。