HSLは、色を「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」の3つの要素で表現するカラー表現方式です。 RGBのように赤・緑・青の強さを指定する方法とは異なり、「どんな色なのか」「どれくらい鮮やかなのか」「どれくらい明るいのか」という、人が色を調整するときに理解しやすい形で色を表現できます。
HSLはWebデザインやCSSで広く利用されており、色のバリエーションを作ったり、明るさや鮮やかさを調整したりするときに便利です。 たとえば、同じ青色をベースにして、少し明るい色や暗い色、淡い色などを作る場合にもHSLは直感的に扱えます。
- HSLとはどんな色の表現方法なのか
- 色相・彩度・明度の意味
- HSLの数値の読み方
- RGB・HEXとの違い
- HSLとHSV・HSBの違い
- CSSでHSLを使う方法
- HSLのメリット・デメリット
- Webデザインでの活用方法
- HSLの色を調整する方法
HSLとは？
HSLは、色を3つの要素に分けて表現するカラー表現方式です。 HSLという名前は、次の3つの英単語の頭文字から付けられています。
- H = Hue（色相）
- S = Saturation（彩度）
- L = Lightness（明度）
RGBでは「赤を何％、緑を何％、青を何％」というように色を表現します。 一方、HSLでは「色相を何度、彩度を何％、明度を何％」という形で色を指定します。
そのため、HSLは「青色をもう少し明るくしたい」「この赤色を少し薄くしたい」といった色の調整を行いやすいことが特徴です。
HSLを構成する3つの要素
HSLでは、すべての色を「色相」「彩度」「明度」の3つの値によって表現します。
| 要素 | 英語 | 表すもの | 主な範囲 |
|---|---|---|---|
| 色相 | Hue | 色の種類 | 0〜360度 |
| 彩度 | Saturation | 色の鮮やかさ | 0〜100% |
| 明度 | Lightness | 色の明るさ | 0〜100% |
この3つの値を組み合わせることで、さまざまな色を表現できます。 たとえば、
hsl(210, 100%, 50%)
という指定では、色相210度、彩度100％、明度50％の色を表します。
色相（Hue）とは？
色相（Hue）は、赤・黄・緑・青・紫など、「色の種類」を表す値です。 HSLでは色相を角度で指定し、色相環の周囲を0〜360度で表現します。
| 色相の目安 | 代表的な色 |
|---|---|
| 0° | 赤 |
| 60° | 黄色 |
| 120° | 緑 |
| 180° | シアン |
| 240° | 青 |
| 300° | マゼンタ |
| 360° | 赤 |
0度と360度は同じ位置になるため、どちらも赤系の色を表します。
色相の数値だけを変更すると、彩度と明度を維持したまま、赤・黄色・緑・青など別の色へ変更できます。
色相を変更するとどうなる？
たとえば、
hsl(0, 100%, 50%)
は鮮やかな赤色です。 これに対して色相だけを変更して、
hsl(120, 100%, 50%)
とすると、緑色になります。
このようにHSLでは、色相の値を変更することで色の種類を簡単に変更できます。
彩度（Saturation）とは？
彩度（Saturation）は、色がどれくらい鮮やかなのかを表します。 HSLでは0〜100％で指定します。
- 0% → 無彩色（グレー）
- 50% → 中間的な彩度
- 100% → 最も鮮やかな状態
たとえば、色相と明度を固定したまま彩度だけを変更すると、同じ色味を保ちながら、鮮やかな色から落ち着いた色へ変化させることができます。
彩度0％では色がなくなる
HSLでは彩度を0％にすると色相の値に関係なく、明度に応じたグレーになります。 たとえば、
hsl(0, 0%, 50%)
hsl(200, 0%, 50%)
hsl(300, 0%, 50%)
はいずれも同じ中間的なグレーになります。
これは彩度が0％になると色味がなくなり、色相の違いが見えなくなるためです。
明度（Lightness）とは？
明度（Lightness）は、色がどれくらい明るい状態なのかを表します。 HSLでは0〜100％で指定します。
- 0% → 黒
- 50% → 基本となる色
- 100% → 白
HSLでは明度0％にすると、色相や彩度に関係なく黒になります。 明度100％では白になります。
そのため、同じ色を少し暗くしたり明るくしたりする場合には、明度の値を変更するだけで簡単に調整できます。
明度50％が基準になる
HSLの明度50％は、色相と彩度によって決まる基本的な色を表すときに利用されます。 たとえば、
hsl(0, 100%, 50%)
は鮮やかな赤色です。 明度を30％にすると暗い赤色になり、
hsl(0, 100%, 30%)
明度70％では明るい赤色になります。
hsl(0, 100%, 70%)
このように、明度を変更することで同じ色相をベースにした明暗のバリエーションを作成できます。
HSLの表記方法
HSLは一般的に次のような形式で表記します。
hsl(H, S%, L%)
それぞれの値には次の意味があります。
| 値 | 意味 | 範囲 |
|---|---|---|
| H | 色相 | 0〜360度 |
| S | 彩度 | 0〜100% |
| L | 明度 | 0〜100% |
具体例
たとえば、
hsl(120, 100%, 50%)
の場合、
- 色相：120度
- 彩度：100％
- 明度：50％
となります。
色相120度は緑系の色なので、この指定では鮮やかな緑色になります。
HSLは「色の設計図」として考えるとわかりやすい
HSLは、色そのものを直接指定するというより、「どんな色で、どれくらい鮮やかで、どれくらい明るいか」を数値化したものと考えると理解しやすくなります。
たとえば、
hsl(210, 100%, 50%)
を基準色として、
hsl(210, 100%, 40%)
のように明度だけを変更すれば、同じ色相の暗いバリエーションを作ることができます。
HSLとRGB・HEXの違い
HSLとRGB、HEXは、いずれもデジタル画面上の色を表現するために利用されますが、色を指定する方法が異なります。
RGBとは？
RGBは、赤（Red）、緑（Green）、青（Blue）の3つの光の強さを組み合わせて色を表現する方式です。
たとえば、
rgb(255, 0, 0)
は赤色を表します。
RGBはコンピューターが色を扱う仕組みと相性がよく、画像データやディスプレイなど幅広い場所で利用されています。
HEXとは？
HEXカラーコードは、RGBの各値を16進数で表現したものです。
たとえば赤色は、
#FF0000
と表現できます。
WebサイトのCSSではHEXカラーコードが非常によく利用されています。
HSLとの違い
RGBやHEXは「赤・緑・青の量」を基準に色を指定します。 一方、HSLは「色相・彩度・明度」を基準に色を指定します。
そのため、Webデザインで色の明るさや鮮やかさを調整する場合は、HSLのほうが直感的に操作しやすいことがあります。
HSLとHSV・HSBの違い
HSLと似たカラー表現方式として、HSVやHSBがあります。 どちらも「色相」と「色の鮮やかさ・明るさ」を分けて考える方式ですが、最後の値の意味が異なります。
| 方式 | 1つ目 | 2つ目 | 3つ目 |
|---|---|---|---|
| HSL | 色相 | 彩度 | 明度 |
| HSV | 色相 | 彩度 | 明度（Value） |
| HSB | 色相 | 彩度 | 明るさ（Brightness） |
HSLの「Lightness」とHSVの「Value」は同じものではありません。 そのため、同じ数値を入力してもHSLとHSVでは異なる色になる場合があります。
HSLとHSVはどちらがいい？
どちらが優れているというものではなく、用途によって使い分けられています。
Web制作やCSSではHSLが利用しやすく、画像編集ソフトやデザインツールではHSV・HSBを採用している場合があります。
CSSでHSLを使う方法
HSLはCSSのカラー指定にも利用できます。 基本的な書き方は次のとおりです。
color: hsl(210, 100%, 50%);この例では、文字色をHSLで指定しています。
背景色に使う
HSLは背景色の指定にも利用できます。
background-color: hsl(210, 100%, 50%);文字色に使う
color: hsl(210, 100%, 50%);ボーダーに使う
border: 2px solid hsl(210, 100%, 50%);透明度を指定する
CSSではHSLに透明度を組み合わせて指定することもできます。 現在のCSSでは、たとえば次のような記述ができます。
background-color: hsl(210 100% 50% / 50%);スラッシュの後ろに透明度を指定すると、色の透明度を設定できます。
なお、古い書式として、
hsla(210, 100%, 50%, 0.5);という記法もあります。
- 色相は0〜360度で指定する
- 彩度は0〜100％で指定する
- 明度は0〜100％で指定する
- HSLは色のバリエーションを作りやすい
- 透明度を組み合わせることもできる
HSLのメリット・デメリット
HSLのメリット
- 色の種類を色相として直感的に指定できる
- 色の鮮やかさを彩度で調整できる
- 色の明るさを明度で調整できる
- 同じ色をベースにしたカラーバリエーションを作りやすい
- CSSで直接利用できる
- テーマカラーの調整に利用しやすい
HSLのデメリット
- RGBやHEXに比べて慣れるまで少し時間がかかる
- HSLの明度は人間の知覚上の明るさと完全に一致するわけではない
- 同じ数値でもHSLとHSVでは結果が異なる
- 印刷用カラーの指定には別のカラーモデルが使われることが多い
HSLが向いている用途
HSLは、特にWebデザインやCSSで色を調整するときに便利です。
Webサイトのテーマカラー
Webサイトでは、メインカラーを基準に明るい色や暗い色を複数作ることがあります。 HSLなら色相を維持したまま明度を変更できるため、テーマカラーのバリエーションを作りやすくなります。
ボタンの色
通常時・ホバー時・クリック時などでボタンの色を変える場合にもHSLが便利です。
たとえば通常時を、
hsl(210, 100%, 50%)ホバー時を、
hsl(210, 100%, 45%)のようにすれば、色相と彩度を維持したまま少し暗い色を作ることができます。
カラーパレットの作成
HSLでは同じ色相を基準に、彩度や明度を変更して複数の色を作成できます。 そのため、Webサイトのカラーパレットを設計するときにも利用できます。
ホバー・アクティブ状態の色
リンクやボタンのホバー状態では、元の色より少し暗くしたり明るくしたりすることがあります。 HSLなら明度を調整することで、このような色のバリエーションを作りやすくなります。
ダークモード
ダークモードでは背景や文字色を暗い配色へ変更する必要があります。 HSLを利用すると、色相を維持しながら明度を調整できるため、テーマカラーの明暗を管理しやすくなります。
HSLで色を調整する方法
HSLの大きな特徴は、3つの値を個別に変更して色を調整できることです。
色を変えたい場合
色の種類そのものを変更したい場合は、色相（H）を変更します。
たとえば、
hsl(0, 100%, 50%)の赤色を青色系へ変更したい場合は、色相を240度付近へ変更します。
hsl(240, 100%, 50%)もっと鮮やかにしたい場合
色を鮮やかにしたい場合は、彩度（S）を高くします。
たとえば、
hsl(210, 50%, 50%)から、
hsl(210, 100%, 50%)へ変更すると、より鮮やかな色になります。
淡い色にしたい場合
彩度を下げることで、色味を弱くした落ち着いた色を作ることができます。
hsl(210, 30%, 50%)明るくしたい場合
明るさを変更したい場合は、明度（L）を調整します。
たとえば、
hsl(210, 100%, 40%)よりも、
hsl(210, 100%, 60%)のほうが明るい色になります。
暗くしたい場合
明度を下げることで暗い色を作ることができます。
hsl(210, 100%, 30%)- 色を変える → H（色相）
- 鮮やかさを変える → S（彩度）
- 明るさを変える → L（明度）
HSL・RGB・HEX・HSVの比較表
HSL・RGB・HEX・HSVは、それぞれ色を表現する方法が異なります。
| 比較項目 | HSL | RGB | HEX | HSV |
|---|---|---|---|---|
| 基本となる要素 | 色相・彩度・明度 | 赤・緑・青 | 16進数によるRGB | 色相・彩度・明度 |
| 色の調整 | ◎ | ○ | ○ | ◎ |
| 明るさの調整 | ◎ | △ | △ | ○ |
| Webデザイン | ◎ | ◎ | ◎ | ○ |
| CSS対応 | ◎ | ◎ | ◎ | △ |
| 人間にとっての理解しやすさ | ◎ | ○ | △ | ◎ |
| 主な用途 | 色調整・Webデザイン | 画面・画像データ | Webカラー指定 | 色選択・画像編集 |
HSLとHEXはどちらを使えばいい？
Webサイトを制作するとき、HSLとHEXのどちらを使うべきか迷うことがあります。 どちらにもメリットがあるため、用途によって使い分けるのがおすすめです。
| 用途 | おすすめ | 理由 |
|---|---|---|
| 色の明るさを調整する | HSL | 明度を直接変更できるため |
| 色の鮮やかさを調整する | HSL | 彩度を直接変更できるため |
| CSSでテーマカラーを管理する | HSL | 色のバリエーションを作りやすいため |
| 一般的なWebカラー指定 | HEX | 広く利用されているため |
| 画像データの色 | RGB | デジタル画像で広く利用されるため |
| 色選択・色調整 | HSL・HSV | 色の変化を直感的に扱いやすいため |
HSLを使うときの注意点
HSLの明度は「人間が感じる明るさ」と完全には一致しない
HSLのLightnessは、色の明るさを数値として扱いやすくしたものですが、人間の視覚が感じる明るさを完全に表現するものではありません。
同じ明度の値を設定しても、色相によって見た目の明るさが異なって感じられることがあります。
色の見た目はディスプレイによっても変わる
同じHSL値で指定した色でも、ディスプレイの設定や表示環境によって見え方が異なる場合があります。
特にWebサイトで色を選ぶ場合は、数値だけではなく実際の表示を確認することが重要です。
HSLとHSVは同じではない
HSLとHSVはどちらもH・S・L/Vという似た構造を持っていますが、計算方法が異なります。 そのため、
hsl(210, 100%, 50%)とHSVの同じような数値を比較しても、同じ色になるとは限りません。
よくある質問
HSLとは何ですか？
HSLは、色を「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」の3つの要素で表現するカラー表現方式です。 WebデザインやCSSなどで利用されています。
HSLのH・S・Lは何を意味しますか？
HはHue（色相）、SはSaturation（彩度）、LはLightness（明度）を意味します。
HSLの色相はなぜ360度なのですか？
色相は色相環を一周する角度として表現されるため、0〜360度で指定します。 0度と360度は同じ位置で、どちらも赤色を基準とした色相になります。
HSLの彩度0％は何色ですか？
彩度0％では色味がなくなるため、明度に応じたグレーになります。 明度0％なら黒、50％なら中間的なグレー、100％なら白になります。
HSLの明度50％はどんな色ですか？
HSLでは明度50％が色相と彩度によって決まる基本的な色を表す目安になります。 ただし、実際の見た目の明るさは色相によって異なって感じられる場合があります。
HSLはCSSで使えますか？
はい。 CSSでは、
color: hsl(210, 100%, 50%);のようにHSLを使って色を指定できます。
HSLとRGBはどちらがおすすめですか？
どちらが優れているというものではありません。 色の明るさや鮮やかさを調整したい場合はHSLが扱いやすく、RGBは画像やディスプレイなどデジタルカラーを扱う場面で広く利用されています。
HSLとHEXは何が違いますか？
HEXはRGBの値を16進数で表現するカラーコードです。 HSLは色相・彩度・明度によって色を表現します。 色のバリエーションを作る場合はHSLのほうが直感的に調整しやすいことがあります。
まとめ
HSLは、色を「色相」「彩度」「明度」の3つの要素で表現するカラー表現方式です。 RGBやHEXとは異なり、色の種類・鮮やかさ・明るさを分けて指定できるため、色を調整するときに直感的に扱いやすいことが特徴です。
- H = Hue（色相）
- S = Saturation（彩度）
- L = Lightness（明度）
- 色相は0〜360度で指定する
- 彩度は0〜100％で指定する
- 明度は0〜100％で指定する
- CSSでHSLカラーを直接指定できる
- 色のバリエーションを作るときに便利
特にWebデザインでは、テーマカラーをベースに明るい色や暗い色、鮮やかな色や淡い色を作るときにHSLが役立ちます。
RGB・HEX・HSL・HSVなどのカラー表現は、それぞれ得意な用途が異なります。 色の指定方法を理解しておくと、Webサイトの配色やCSSのカラー調整をより効率的に行えるようになります。