HSLとは｜色相・彩度・明度の意味とRGB/HEXとの違い・配色のコツ

Webデザインやイラストで色を扱うとき、「#3498db」のような16進数の文字列をよく見かけます。しかし、その色を「少しだけ明るくしたい」「鮮やかさだけ抑えたい」と思ったとき、16進数のままでは直感的に調整できません。そこで役立つのがHSLという色の表し方です。HSLは色を人間の感覚に近い3つの軸で扱うため、配色の調整がぐっとやさしくなります。本記事では、HSLとは何か、3つの要素が何を意味し、なぜ配色に便利なのかを順を追って解説します。

HSLとは何か

HSLとは、色を色相（Hue）・彩度（Saturation）・明度（Lightness）という3つの要素の組み合わせで表す方法です。それぞれの頭文字をとってHSLと呼ばれます。同じ色を表すのにもRGBやHEXなどさまざまな方式がありますが、HSLは「人がどう色を感じるか」に近い形で数値化している点が大きな特徴です。

たとえば「青を少し明るくしたい」と思ったとき、HSLなら明度の数値を上げるだけで済みます。RGBで同じことをしようとすると、赤・緑・青の3つの値をバランスよく動かす必要があり、慣れていないと狙った色になりません。調整したい性質（明るさ・鮮やかさ・色味）が、それぞれ独立した1つの数値に対応しているのがHSLの強みです。

実際にHSLとRGBやHEXがどう対応しているかは、カラーコード変換ツールで色を入力して値の変化を見比べてみると一目で理解できます。スライダーや数値を動かしながら、各要素がどの性質に効くのかを体感してみてください。

色相・彩度・明度の3要素

HSLを理解する鍵は、3つの要素がそれぞれ何を表すのかをつかむことです。順番に見ていきましょう。

色相（Hue）

色相は「赤っぽい」「青っぽい」といった色味そのものを表します。色を円環状に並べた色相環の上の角度として、0〜360度で指定します。おおまかに0度（および360度）が赤、120度が緑、240度が青に対応し、円を一周すると元の色に戻ります。色相だけを変えると、明るさや鮮やかさはそのままに色味だけが変わります。

彩度（Saturation）

彩度は色の鮮やかさ、つまり「色の濃さ」を表します。0%に近づくほど色味が抜けてグレーに近づき、100%に近づくほど鮮やかでビビッドな色になります。同じ青でも、彩度が高ければ目に刺さるような青、低ければ落ち着いたくすんだ青になります。

明度（Lightness）

明度は色の明るさを表します。0%は黒、100%は白で、中間の50%前後でその色相本来の色がもっともはっきり現れます。明度を上げれば白に近づき（明るく）、下げれば黒に近づきます（暗く）。背景と文字のコントラスト調整など、読みやすさにも直結する重要な要素です。

RGB・HEXとの違い

色を表す方式としてもっとも普及しているのがRGBと、それを16進数で書いたHEXです。HSLとは何が違うのでしょうか。

RGBは、光の三原色である赤（R）・緑（G）・青（B）の強さをそれぞれ0〜255で指定し、その混ざり具合で色を表します。ディスプレイの発光の仕組みにそのまま対応しているため、コンピュータにとっては扱いやすい方式です。HEXはそのRGBの値を16進数2桁ずつにして「#」を付けて並べたもので、「#3498db」のように6桁で表記します。中身はRGBと同じで、表記が短くなっているだけです。

RGB(52, 152, 219) ＝ #3498db ＝ HSL(204, 70%, 53%)

上はどれも同じ色を表しています。RGBやHEXは機械にとって自然な方式ですが、数値を見ても「どんな色か」「どう調整すれば良いか」が人間には直感的に分かりません。一方HSLは、色味・鮮やかさ・明るさが分かれているため、人が色を読み解き、思いどおりに調整しやすいのです。なお、HSL・RGB・HEXは相互に変換できる同じ色空間の別表現であり、カラーコード変換ツールを使えば一方の値からもう一方の値をすぐに得られます。

HSLが配色調整に便利な理由

HSLが配色作業で重宝されるのは、変えたい性質だけをピンポイントで動かせるからです。具体的には次のような調整が一発で行えます。

• 色味だけ変える：色相（H）の数値だけを動かせば、明るさや鮮やかさを保ったまま色を変えられます。
• 鮮やかさだけ抑える：彩度（S）を下げれば、落ち着いた上品な色にできます。逆に上げればポップで目立つ色になります。
• 明るさだけ変える：明度（L）を動かせば、同じ色味のまま明るい版・暗い版を作れます。

とくに役立つのが調和の取れた配色を作る場面です。たとえば色相環で等間隔に色相を選べば、まとまりのある複数色の組み合わせが作れます。基準の色から色相を120度ずつ回せば三色配色、180度回せば補色の組み合わせ、といった具合に、角度を意識するだけで配色の理論を実践できます。こうしたパレット作りを自動化したいときは、カラーパレット生成ツールを使うと、1色を選ぶだけで調和の取れた組み合わせを手早く得られます。

明度・彩度を変えてトーンを作る

デザインに統一感を持たせるうえで重要なのがトーン、つまり明度と彩度の組み合わせがそろっていることです。HSLはトーンの調整がとても得意です。

たとえばボタンの通常状態・ホバー状態・無効状態を作りたいとき、色相はそのままに、明度や彩度だけを段階的に変えると、自然につながった配色になります。ホバーでは明度を少し下げて濃く、無効状態では彩度を下げてくすませる、といった具合です。色味が共通しているため、ばらばらな印象になりません。

このように、1つの基準色から明度・彩度をずらしていくだけで、色のバリエーション（カラースケール）を体系的に作れます。明るい色から暗い色までを等間隔に並べれば、見出し・本文・補足といった情報の強弱を色でも表現できます。「色味は固定し、明度と彩度で変化をつける」のが、まとまりのある配色の基本テクニックです。

CSSでのhsl()表記

HSLはCSSでそのまま使えます。hsl()関数に、色相・彩度・明度の順で値を渡します。

color: hsl(204, 70%, 53%);

1つ目が色相の角度（単位は省略可、またはdeg）、2つ目が彩度（%）、3つ目が明度（%）です。透明度を加えたいときはhsla()を使うか、現在の多くのブラウザではhsl(204 70% 53% / 0.5)のようにスラッシュで不透明度を指定できます。

CSSでHSLを使う利点は、コードを見ただけで色の性質が分かり、微調整しやすいことです。たとえば暗いテーマを作るとき、明度の数値を一律で下げるだけで全体を暗くできます。CSSカスタムプロパティ（変数）と組み合わせ、色相だけを変数にしておけば、サイト全体のテーマカラーを1か所の変更で切り替える、といった設計も可能です。

HSLは、色を人間の感覚に近い3つの軸で表すことで、配色の理解と調整を大きくやさしくしてくれる仕組みです。まずはカラーコード変換ツールで手持ちの色をHSLに変換し、各要素を動かすと色がどう変わるかを確かめてみてください。配色のバリエーションをまとめて作りたいときは、カラーパレット生成ツールもあわせて活用すると効率的です。

なお本記事は一般的な情報の提供を目的としたものです。色の見え方は画面や環境によって異なり、最適な配色は用途やアクセシビリティ要件によって変わります。最新の公式情報やガイドラインを確認のうえ判断してください。