HSL色モデル

定義

HSLは、ひとつの色を色相（hue）、彩度（saturation）、明度（lightness）という3つの 軸に分けて扱う方法です。色相は赤・青・緑のように色の種類を0度から360度までの角度で 表し、彩度は色がどれだけ鮮やかか、つまりグレーからどれだけ離れているかを表します。 明度はどれだけ明るいか暗いかを表します。コンピュータが色を保存する基本の方式であるRGBが、 赤・緑・青の光の量を混ぜる機械寄りの言葉だとすれば、HSLは人が色を思い浮かべるやり方に ずっと近づけて整理した言葉だと考えるとわかりやすいです。

なぜ重要か

HSLが大切なのは、色を「調整」するのが直感的だからです。RGBで青を少し落ち着いた色に したいときは3つの値を同時に計算する必要がありますが、HSLなら彩度をひとつ下げるだけで 済みます。逆に同じ色をもっと明るくしたいなら明度だけを上げればよく、まったく別の色に 変えたいなら色相の角度だけを回せば済みます。このように軸がそれぞれ独立して動くので、 ねらった変化をひとつの軸の操作で正確につくれます。この予測しやすさは色を扱う自信に つながり、デザインが怖い開発者でも勘ではなくルールで色を決められるようになります。 だからデザインシステムで色を規則的に広げたり、複数の色のトーンをそろえたりするとき、 HSLはとても頼もしい基準になり、コードの中でも値の意味がそのまま読み取れて保守が ぐっと楽になります。

よくある間違い

• 明度だけを変えれば自動できれいな色の段階ができると期待してしまうケースです。実際には 彩度がそのまま残るので、とても明るいトーンが蛍光色のように浮いたり、暗いトーンが濁って 沈んだりします。明るさを変えるときは彩度も一緒に少しずつ調整してこそ、段階が均等で 自然につながります。
• HSLの明度が、人が感じる実際の明るさとぴったり一致すると思い込むことです。同じ明度50でも 黄色はまぶしいほど明るく感じられ、青はずっと暗く感じられます。色どうしがどれだけ対比する かを判断するときは、明度の数字だけを信じず、必ず目でも確かめる必要があります。
• 彩度を目いっぱい上げてこそ鮮やかで良い色だと考えることです。彩度が高すぎる色が画面を 埋め尽くすと目がすぐ疲れてしまい、本当に強調したい要素が埋もれてしまいます。

実務のヒント

• RGBより人が調整しやすいという点を積極的に活かしましょう。「彩度だけ下げて落ち着かせる」 「明度だけ上げて明るくする」のように、ねらった変化を軸ひとつの動きで整理すると、色を 扱う作業がずっと予測しやすくなり、チームのメンバーと意図を言葉で共有するのも簡単に なります。
• ブランドカラーの色相の角度を固定しておき、彩度と明度だけを調整していくつかの段階を つくってみましょう。色相がぶれなければ、明るいトーンから濃いトーンまでがひとつの家族の ように見えてまとまります。
• より繊細な明るさの制御が必要なら、人の目に合わせた最新の色モデルもあわせて検討しましょう。 HSLの限界を理解していれば、いつ別の道具に乗り換えるかを判断しやすくなります。

関連概念