HSLとは？CSSカラーコード･HTMLでの色コードの使い方やHEX･RGBとの違いわかりやすく解説

Webサイトやアプリのコーディングでは、色の指定方法として「#ffffff」のような16進数（HEX）や「rgb(255, 255, 255)」が広く利用されています。

一方で、「同じ色相のまま少し明るくしたい」「彩度だけを下げて落ち着かせたい」といった微調整を行う場合、HEXやRGBでは数値の変更が直感的ではないため、わざわざカラーピッカーや変換ツールを開き直す場面も少なくありません。

こうした色の調整を、コード上でより簡単かつ直感的に行えるのが、CSSで利用できる「HSL」です。

HSLは「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」の3つの要素で色を表現するため、人がイメージする「色合い」「鮮やかさ」「明るさ」の感覚に沿って直感的に色を変更できます。

ここでは、HSLの基本的な仕組みからCSS・HTMLでの書き方、HEXやRGBとの具体的な使い分けの基準までを、コード例を交えながらわかりやすく解説します。
さらに、実務で役立つCSS変数との組み合わせや、HSLを活用するメリット・注意点についても紹介します。

色の調整を効率的に行えるようになり、CSSでのデザインやコーディングの作業効率を向上させてください。

HSLとは？直感的に色を指定できるカラーモデル

HSLとは、CSSで色を指定するためのカラーコードの一つです。
「Hue（色相）」「Saturation（彩度）」「Lightness（明度）」の3つの要素を組み合わせて色を表現するため、色味を直感的に調整できることが特徴です。

一般的によく使われるHEXカラー（#ff0000）やRGB（rgb(255, 0, 0)）は、赤・緑・青の数値を変更して色を作ります。そのため、「少し明るくしたい」「鮮やかさだけを変更したい」といった調整を行うには、3つの数値を意識する必要があります。

一方、HSLでは変更したい要素ごとに数値を調整できます。

・色を変えたい場合は「Hue（色相）」
・鮮やかさを変えたい場合は「Saturation（彩度）」
・明るさを変えたい場合は「Lightness（明度）」
というように役割が分かれているため、思いどおりの色を作りやすくなります。

HSLはCSS Color Moduleで定義されているカラー指定方法であり、現在の主要ブラウザでサポートされています。
そのため、HTMLのスタイル指定や外部CSS、インラインCSSなど、通常のカラーコードと同じように利用できます。

H（Hue：色相）の意味と具体例

・概念：0〜360度の「色相環（色の輪）」で表す色の種類。
・具体例：0＝赤、120＝緑、240＝青。この数値を動かすだけで、虹のように色が変わる。

H（Hue：色相）は、赤、黄、緑、青、紫といった「色の種類」を指します。色相はパーセンテージではなく、0度から360度までの「角度（数値のみ）」で指定するのが特徴です。

円形に並べた色相環（カラーホイール）をイメージしてください。
スタート地点である「0」は赤色で、そこから数値を増やしていくと、虹の並び順と同じように色が変化していきます。

・0（または360）：赤
・60：黄
・120：緑
・180：シアン（水色）
・240：青
・300：マゼンタ（紫）

たとえば、CSSで「色の種類だけを変えたい」と思ったら、他の数値を固定したまま、このH（色相）の数値だけを動かすだけで、簡単に別の色へと切り替えることができます。

S（Saturation：彩度）の意味と具体例

・概念：0%〜100%で表す色の「鮮やかさ」。
・具体例：0%＝完全にくすんだ灰色、50%＝落ち着いた色、100%＝混じり気のない最も鮮やかな色。

S（Saturation：彩度）は、色の「鮮やかさ（強さ）」をパーセンテージ（%）で表します。

数値が大きくなればなるほど、混じり気のないギラギラとした原色に近づきます。
逆に、数値を小さくしていくと、どんどん色がくすんでいき、最終的には灰色（無彩色）に変化します。

・100%：その色が持つ、最も鮮やかで純粋な色（ビビッド）
・50%：少しグレーが混ざった、目に優しい落ち着いた色（プレーン）
・0%：完全に色味が消えた、単なる「灰色」（グレースケール）

「画面の印象が少し派手すぎるから、全体的に落ち着いたトーンにしたいな」というときは、このS（彩度）のパーセンテージを下げるだけで、上品なニュアンスカラーを作ることができます。

L（Lightness：明度）の意味と具体例

・概念：0%〜100%で表す色の「明るさ」。
・具体例：0%＝真っ黒、50%＝その色本来の明るさ、100%＝真っ白。

L（Lightness：明度）は、色の「明るさ」をパーセンテージ（%）で表します。

明度の基準は、中心である「50%」です。50%のときが、その色が最も綺麗に発色する「本来の明るさ」となります。
ここから数値を100%に近づけると「白」が混ざっていき、逆に0%に近づけると「黒」が混ざっていきます。

・100%：どんな色相・彩度を指定していても、完全に「真っ白」
・70%：白が多く混ざった、明るいパステルカラー
・50%：その色本来の、最もバランスが良い明るさ
・30%：黒が多く混ざった、暗いダークカラー
・0%：どんな色相・彩度を指定していても、完全に「真っ黒」

「ボタンの色を、通常時より少しだけ暗くしてホバー（マウスをのせたとき）の効果を出したい」という場面では、このL（明度）の数値を「50%から40%に下げる」だけで、完璧な同系色の暗い色を作り出すことができます。

💡hsl(0, 100%, 100%) に指定すると「真っ白」に

hsl(0, 100%, 100%) に指定すると「真っ白」になってしまいます!

最も鮮やかで純粋な赤色にするには、 50% が正解です。

「100%のほうが一番強くて鮮やかになりそう」と感じるかと思いますが、HSLの明度（L）は以下のような仕組みになっています。

・100%：光がMAXまで当たった状態 ＝ 真っ白
・]50%：光と影のバランスが完璧な状態 ＝ その色本来の最も鮮やかな色（純色）
・0%：光が一切ない状態 ＝ 真っ黒

絵の具でイメージすると分かりやすい！
・hsl(0, 100%, 50%)：チューブから出したばかりの、100%原色の「赤」
・hsl(0, 100%, 70%)：赤色の絵の具に、白い絵の具を混ぜて作った「ピンク」
・hsl(0, 100%, 100%)：白い絵の具を混ぜすぎて、完全に「白」になった状態

このように、HSLモデルでは「50%」のときが最も鮮やか（純色）になるというルールがあります。

HSLの書き方

CSSでHSLを使って色を指定するときは、hsl() 関数を使用します。

書き方のルールは以下の3点のみです。

・第1引数（色相）：単位をつけず、数値だけ（0〜360）を書く。
・第2・第3引数（彩度・明度）：必ず「%」の単位を付与する（0と書く場合も 0% が必須）。
・各引数の間：カンマ（,）で区切る。

たとえば、最も鮮やかな赤色を指定したい場合は hsl(0, 100%, 50%) と記述します。

Hue（色相）の色一覧

色相（H）の数値を変更したときに、具体的にどのような色になるのかを一覧でまとめました。
ベースとなる色を探す際の参考にしてください。
（※すべて彩度 100% / 明度 50% の、最も鮮やかな「純色」の状態の数値です）

色相（H）はこの12色を基準の「軸」として覚えておくと便利です。
たとえば「少し緑寄りの黄色にしたいな」と思ったら、黄色の 60 から数値を少し増やして 75 あたりに調整する、といった使い方が直感的に行えます。

HSLの使用例

実務のコーディングでHSLコードをどのように適用するのか、具体的なCSSコードの例をご紹介します。

・文字色を指定する

読みやすさを重視し、彩度を少し落として明度を低くした「濃いネイビー」の文字色を指定する例です。
CSS

HTML

ブラウザでの表示結果

・背景色を指定する

目に優しい、白に近い「薄いベージュ」の背景色を指定する例です。
CSS

HTML

ブラウザでの表示結果

・ボーダー色を指定する

ボックスの周囲の枠線（ボーダー）にHSLカラーを適用するコードです。
白い背景に鮮やかな青い枠線がくっきりと浮かび上がります。
CSS

HTML

ブラウザでの表示結果

・CSS変数と組み合わせる

HSLの最大の強みを発揮できるのが、CSS変数（カスタムプロパティ）との組み合わせです。
「色相・彩度・明度」をバラバラの変数として登録しておくことで、驚くほど効率的なカラー管理が可能になります。

CSS関数については「CSS変数とは？CSS変数の使い方、命名規則を解説」の記事で確認してください。
CSS

HTML

ブラウザでの表示結果

HSLを使うメリット

CSSにHSLを取り入れる最大のメリットは、「色相（色味）」「彩度（鮮やかさ）」「明度（明るさ）」の3つの要素が完全に独立している点にあります。

これにより、以下の強力な恩恵を受けられます。

・1つの数値を動かすだけで色調整ができる：ボタンのホバー時の色を作る際、カラーピッカーを開かなくても、明度（L）の数値を「50% → 40%」に減らすだけで綺麗な同系色の暗い色が作れます。

・トーンの統一が1秒でできる：彩度（S）と明度（L）を固定したまま、色相（H）の数値だけを変えれば、パステルの度合いや色の雰囲気が完全に統一された「赤・緑・青」のバリエーションを瞬時に量産できます。

・テーマ管理やダークモードと相性が良い：CSS変数（カスタムプロパティ）にHSLの数値を登録しておけば、明度（L）の数値を反転させるだけで、デザインを破綻させずに一瞬でダークモード用のカラーへ切り替えるロジックが組めます。

HSLを使う際の注意点

非常に便利なHSLですが、実務でトラブルを防ぐために以下の点だけは必ず押さえておきましょう。

・明度0%は黒、100%は白になる仕様：明度（L）を 0% にすると色相や彩度が何であっても必ず「真っ黒」になり、100% にすると必ず「真っ白」になります。「数値をいじったのに意図しない色（白や黒）になってしまう」という初心者の罠に注意してください。

・デザイナーとのルール統一が必要：FigmaやAdobe XDなどのデザインツールから色をコピーする際、初期状態は「HEX（#ffffffなど）」になっているケースがほとんどです。チーム内で「コーディング時はHSLに変換して記述する」といった事前合意が必要です。

・レガシー環境での記述方法：最新のCSS仕様ではカンマなしの記述（例: hsl(0 100% 50%)）が可能ですが、古いプロジェクトや特殊な環境を考慮する場合は、従来通りのカンマ区切り（例: hsl(0, 100%, 50%)）で記述するのが安全です。

よくある質問（FAQ）

HTMLでも使用できますか？

はい、HTMLの style 属性（インラインCSS）内であれば問題なく使用できます。
ただし、HTMLの古い属性（例： などの非推奨タグ）に直接HSLコードを書き込むことはできません。
現代のWeb制作では、HTML内に直接色を書くのではなく、外部CSSファイルに hsl() 関数を用いて記述するのが標準的なルールです。

HSLからRGBへ変換できますか？

はい、ブラウザのデベロッパーツール（検証機能）や、各種オンラインの変換ツールを使って一瞬で変換できます。

HSL・RGB・HEXどれを使うべき？

結論として、基本的には「使い慣れたHEX（16進数）をベースにしつつ、色の微調整やルールを持たせたい場所だけHSLを使う」というハイブリッドな運用がベストです。
すべてをどちらか一方に統一する必要はありません。

具体的な使い分けの基準は以下の通りです。

・HEX（#ffffff など） / RGBを使うべき場面
デザインカンプ（Figmaなど）から色コードをそのままコピーして貼り付けるだけの、一般的な背景色や文字色です。
静的な動かない要素や、今後変更の予定がない固定色には、最も広く普及しているHEXやRGBを使うのが手軽で効率的です。

・HSL（hsl(…) ）を使うべき場面
ボタンのホバーエフェクト（マウスをのせたときの色変化）や、コンポーネント（部品）ごとの色違いバリエーションです。
また、CSS変数を使ったサイト全体のテーマカラー管理など、色の微調整やロジカルな展開が必要な場所ではHSLが圧倒的に有利です。

静的な色は使い慣れたHEXやRGB、動きやルールを持たせたい場所にはHSL、とそれぞれの強みに合わせて使い分けるのが、現代のWeb制作におけるベストプラクティスです。