CSS の HSL で色を書こう！（そしてより良い方法）

CSS で色を書くとき、通常は hex か RGB で定義することが多い。

.gray {
  color: #fefefe;
}

.red {
  background-color: rgb(125, 125, 125);
}

こうした書き方は長年使われてきたし、僕がWeb開発を学び始めたときにもこの方法を教わった。しかし、この書き方にはいくつか問題がある。

16進数の形式は人間にとって読みやすくない。たとえば #27cc95 を見ても、この数字だけで色を想像するのは僕にはできない。16進数は機械には解釈しやすいが、人間にとっては三原色の量で色を表すのが直感的ではないのである。

次に、デザインシステムでは同じ系統の色を、さまざまな明るさで段階的に用意して、デザイナーが配色しやすいようにすることが多い。ところが、たった明るさだけを変えたつもりでも、HEX や RGB では見た目が大きく変わってしまうことがある。

• #BEDBFE と #1E40AF では、前者のほうが後者より明るいが、HEX や RGB の表現からはそれを見抜きにくい

CSS とブラウザが大きく進化したことで、もっと色を理解しやすい形式――HSL で色を書けるようになった。

HSL とは何か

僕は、Web開発者の中には色を書くときに自然に hsl を使っている人が多いことに気づいた。理解してみると、HSL で色を表すことがどれほど直感的かが分かる。

HSL は、人間にとって比較的理解しやすい方法で色を表現する。H は Hue（色相）、S は Saturation（彩度）、L は Lightness（明度）である。これら3つの言葉は、写真が好きな人なら画像編集ソフトでよく耳にするかもしれない。

色相環はこんなふうになっている。

真上を 0 度として、赤、橙、黄、緑、青、藍、紫、橘が並ぶ。

彩度は色の鮮やかさを指す。低いほど色はくすんで見え、低すぎると灰色がかって見える。彩度が高いほど、より鮮やかに見える。明度は色の明るさで、低いほど暗い色になる。

この点を理解すると、Tailwind や Material Design などでよく見かける色名が、明度を基準にしていることが分かる。たとえば color-indigo-100、color-indigo-200 などだ。ただしここでの命名は数字が小さいほど明るい。

実際の応用では、明度以外にもたいてい細かな調整が加えられる。

CSS では、hsl は次のように表せる。

.my-color {
  color: hsl(220deg, 30%, 20%);
}

実際の色を見る前でも、僕は次のことが分かる。

• 色相 220 度なので、青寄りの色だろう
• 彩度が低めで、少し暗い、あるいは暗めの青だろう

実際の色はこんな感じだ。

知覚される明るさは色相によって変わる

HSL は直感的に使える一方で、同じ HSL の明度でも、人の目にはより明るく見える色がある。最も分かりやすい例が黄色である。

どちらも明度 50% なのに、黄色のほうが明るく見える。これは色ごとに波長が異なるためで、たとえば同じ明度 60% でも、画面上ではかなりまぶしく見えることがある。

これはタグだ

これはタグだ

ここで白い文字をタグ UI として載せると、青い背景のほうはまだ許容できる対比だが、黄色い背景のほうは目も当てられない。

デザインシステムでは、同じ属性を持つデザイン要素を同じ明度で表現し、統一感のある調和した見た目を作ることが多い。だが、先ほど述べた制約があるため、実際には単純に同じ明度で揃えるだけでは不十分で、デザイナーはさらに色を細かく調整する必要がある。

これが HSL の大きな欠点のひとつだ。後で解決策についても触れるが、それでも HSL は色を表現するうえで非常に有効な道具であり、みんなにもぜひ学んで自分のデザインに取り入れてほしい。

設計ツールとしての HSL

ここから先は、デザイナーにとっては常識かもしれないが、開発者にとってはそうでもないかもしれない。

純色ではない背景で文字色を調整する

純色ではない背景に文字を載せるのは難しい。彩度や明度を調整することで、全体をより調和させることができる。たとえば僕のブログのトップページでは、背景色に hsl(230deg, 62%, 83%) を使い、文字色には hsl(230deg, 37%, 24%) を使っている。彩度も明度も下げることで、黒ではなく背景色を少しだけまとったような色になり、より調和して見える。

色相の調整で明るさをコントロールする

先ほど挙げたような操作は、HSL で表現しているからこそ、各色の役割や対比を自然に理解できる。HSL に慣れてくると、UI を設計するときにも自然と次のように考えるようになる。

• タグの背景色はあまり強く主張しなくてよいので、明るめで比較的彩度の低い色を使おう
• 文字色は背景に合わせて、明度や彩度を調整しよう

こうすれば、デザインは単に「なんとなく」で決めるものではなく、狙いを持って欲しい効果を調整するものになる。

HSL は sRGB 色空間しかサポートしない

sRGB は色空間の標準であり、すべてのディスプレイが sRGB をサポートしている。sRGB は長年使われてきており非常に一般的だが、Apple が提供する P3 のような色空間では、Apple のディスプレイ（Macbook や Studio Display）でより広い色域を表現できる。

sRGB と P3 の違い

• sRGB：最も広く使われている色空間で、ほとんどのディスプレイと Web アプリケーションの色範囲をカバーしている。色域は比較的小さく、一般的な日常用途に適している。
• P3：sRGB より約 50% 広い色範囲を持つ色空間で、特に緑と赤の領域が広い。高性能ディスプレイ（Apple の Retina ディスプレイなど）や専門的な画像処理でよく使われる。

HSL の次の一歩 – oklch

先ほど、HSL では知覚される明るさの問題が起きると述べた。明度が同じでも、人間の目は色によって明るさの変化により敏感で、その結果、HSL で定義された明度が同じでも、そのまま適用できないという問題が生じる。

さらに、HSL はどの色にも同じ彩度の値を与える。しかしそれは、HSL がモデルを単純化するために、色相・彩度・明度を完全な平面として扱っているからだ。だが、ディスプレイであれ人間の目であれ、色相ごとに表現できる彩度は異なる。

知覚される明るさの問題を解決するために、CSS 4 では新しい色定義方式である oklch() が導入された。これは P3 のようなより広い色空間にも対応しており、ブラウザは下位互換も持つ。現在の色空間でその色を描画できない場合でも、描画可能な最も近い色に自動で合わせてくれる。

次の記事では、OKLCH の使い方と実際の効果について見ていこう。

まとめ

Web開発において、従来の HEX や RGB の色表現は広く使われているものの、読みやすさや直感性に欠ける問題があり、P3 のような広色域では表現力にも限界がある。

HSL（色相、彩度、明度）は、より直感的に色を定義できる方法であり、開発者が色を理解し調整しやすくしてくれる。HSL は色相・彩度・明度の3つの軸で色を表すため、特にデザインシステムにおいて、カラーパレットの明度変化をより自然に扱える。

しかし HSL にも限界がある。たとえば色相によって知覚される明るさが異なるため、同じ明度の色でも人の目には異なる明暗で見えてしまう。

この問題を解決するため、CSS 4 では OKLCH カラーモデルが導入された。これは人間の明るさ知覚をより正確に反映できるだけでなく、P3 のような広い色空間にも対応し、最も近い色への自動マッチングも行えるため、Web の色表現力を高めてくれる。

HSL と OKLCH を使えば、開発者は Web の色をより精密に制御でき、デザインの一貫性と視覚効果を高められる。さらに、将来の色標準にも備えられるのである。