CSSでHSL・HSLaカラーを使う方法 ― RGBやHexとの違いを解説

CSSでHSLとHSLaカラーを使用する方法と、RGB/RGBaやHexとの違いについて詳しく解説します。

HSLとHSLaは、CSSにおける色の指定方法のひとつです。Hex（16進数）やRGB/RGBaの代わりに使うことで、より実世界の感覚に近い形でウェブサイトに色を適用できます。

HSLとHSLaはCSSの世界では比較的新しい存在ですが、色彩の分野自体では1970年代から存在してきた歴史ある仕組みです。

HSLとHSLaの違い

• HSL：Hue（色相）、Saturation（彩度）、Lightness（輝度）の略
• HSLa：Hue、Saturation、Lightness、Alpha（アルファ）の略

HSLaはHSLを拡張したもので、透明度（不透明度）を指定できるアルファチャンネルが追加されています。この関係は、RGBとRGBaの関係とまったく同じです。

HSL/HSLaの基本的な使い方

CSSでは、HSLとHSLaを使うために hsl() と hsla() という2つのカラーファンクションが用意されています。

HSLの基本構文

div {
    background-color: hsl(0, 100%, 50%); /* 赤 */
}

HSLaの基本構文

div {
    background-color: hsla(0, 100%, 50%, 0.6);
}

4番目の値（0〜1）で透明度を指定でき、0に近いほど透明、1に近いほど不透明になります。

HSLはHexやRGBより優れているのか？

「HSLはRGBやHexよりも優れているのか？」と疑問に思う方も多いでしょう。CSSにHSLが導入されたのには、それなりの理由があるはずですよね。

結論から言えば、HSLがHexやRGBより優れているとは一概には言えません（そう主張する人もいますが）。どちらが適しているかは、何を実現したいかによって変わります。

HSLの背景にある考え方は、「実世界を模倣した直感的な色形式を提供する」というものです。HSLでは、色そのものを変えずに、明るさ（Lightness）を調整するだけで色の見え方を変えることができます。

HexやRGBでは、これは不可能です。

身近な例で考える「明るさ」と「色」の関係

例えば、今いる部屋の色を見てみてください。あなたが知覚している色は、次のような光源から届く光の影響を受けた結果です。

• 窓から入る光
• ランプや照明
• ろうそくの炎
• 複数の光源の組み合わせ

今、窓から自然光だけが差し込んでいるとしましょう。そこでカーテンを閉めると、部屋から明るさが失われ、部屋中のすべての色の見え方が変化します。

カーテンを閉めた後は、部屋のあらゆる物の色が、閉める前よりも暗いトーンに見えるはずです。

しかし、ここが最も重要なポイントです。

明るさを取り除いても、部屋の中の物の「実際の色」は変わりません。変わるのは、その色の知覚が「明るいバージョン」から「暗いバージョン」へと移るということです。

RGB/HexとHSLの決定的な違い

カーテンを開けた状態と閉じた状態で部屋の写真を撮り、それぞれの色の値をRGB形式で取得してみてください。撮影前後で、まったく別の2つの色の値が得られます。Hexの場合も同様です。

ところがHSLでは、2つの異なる色として記録されるのではなく、「同じ色・異なるLightness（輝度）値」として表現されます。

具体例を挙げましょう。部屋にブラウン系のウォールナット材のテーブルがあるとします。カーテンを開けた状態と閉じた状態で1枚ずつ写真を撮ると、

• 前後の写真のHex値・RGB値は、それぞれ異なる色の値になります。
• 前後の写真のHSL値は、同じ色でありながら、Lightnessの値だけが異なります。

可読性に関する議論

次のような意見をよく耳にします。

• HexとRGBはマシンにとって読みやすい
• HSLは人間にとって読みやすい

3つの色指定方法すべてを理解し、実務経験がある人にとっては、この主張はおそらく正しいでしょう。ただし、人によって体験は異なるかもしれません。

「人は最も多く行っていることを最もうまくこなせる」とよく言われます。HexやRGBを長年使ってきてHSLの経験がゼロであれば、最初はHSLの方がかえって読みにくいと感じることもあるでしょう。

まとめ：HSLがもたらす違い

• HSLは、色そのものを変えずに、色の明るさ・暗さだけを調整できます。
• RGBとHexは、明るさ・暗さを変えると同時に色そのものも変わってしまいます。

デザインシステムやテーマカラーのバリエーション（ホバー時の暗色、押下時の淡色など）を作りたい場合、HSLは特に強力な選択肢となります。ぜひ自分のプロジェクトで試してみてください。