HSLとは
読み：えいちえすえる英語：HSL
更新日：2026年10月31日
ひとことで
HSL とは、色相（Hue）・彩度（Saturation）・明度（Lightness）の3つの値で色を表す方法のことです。
ひとに説明するなら
「HSL は、人が色を考えるときの言葉に近い書き方。『どんな色みで、どのくらい鮮やかで、どのくらい明るいか』を数字にする。RGB より、少しだけ明るくしたい、みたいな調整がしやすい」
色相・彩度・明度で表す
HSL は、色を「色相（H）」「彩度（S）」「明度（L）」で表します。CSS では「hsl(30 100% 50%)」のように書きます。
H は色相環の角度で 0〜360 度、S と L は 0〜100% です。HSL では、L が 100% で白、0% で黒になり、50% のときにいちばん色みがはっきりします。
hsl(210 70% 50%) → #2680D9
RGB より、調整しやすい
RGB で「少しだけ明るく」しようとすると、赤・緑・青の3つを同時に動かす必要があります。HSL なら、L の数字を上げるだけです。
同じ色みで濃淡の色をそろえたいときや、ボタンにマウスを乗せたときの少し明るい色をつくるときに便利です。
HSL の弱点
HSL の L は計算上の明るさで、人の見え方とはずれがあります。L が同じ 50% でも、黄色はとても明るく、青は暗く見えます。
そのため、色相の違う色を「同じ明るさ」でそろえたいときには向きません。そうした用途には、人の見え方に近づけて作られた OKLCH が使われるようになっています。
HSB（HSV）との違い
デザインツールのカラーピッカーでは、よく似た HSB（HSV とも）が使われています。こちらの B（V）は、100% のときに白ではなく、いちばん鮮やかな色になります。
名前も見た目も似ていますが、同じ数字でも別の色になるので、ツールと CSS の間で数字を写すときは注意が必要です。
よくある勘違い
勘違いHSL の L が同じ色は、同じ明るさに見える
ほんとうは見え方とはずれがあり、黄色は明るく、青は暗く見えます。
勘違いHSL と HSB は同じもの
ほんとうはよく似ていますが別物です。HSL の L が100% だと白、HSB の B が100% だと鮮やかな色になります。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットのカラーコードは、CSS の hsl() に書き直しても同じ色になります。パレットの色を少しだけ明るく、または暗くしたバリエーションがほしいときは、L を数%ずつ動かすと手早くつくれます。
色相の違う色どうしの明るさをそろえたいときは、OKLCH を使うほうが、ねらいどおりになりやすいです。
参考になるパレット
クイズ
HSL で、L を 100% にすると何色になる？
いちばん鮮やかな色
ちがいます。答えは「白」。HSL では L が100% で白、0% で黒になります。
白
正解です。答えは「白」。HSL では L が100% で白、0% で黒になります。
黒
ちがいます。答えは「白」。HSL では L が100% で白、0% で黒になります。
HSL の苦手なことは？
色相を変えること
ちがいます。答えは「色相の違う色の見た目の明るさをそろえること」。HSL の L は見え方とずれがあり、色相が違うと明るさがそろいません。
色相の違う色の見た目の明るさをそろえること
正解です。答えは「色相の違う色の見た目の明るさをそろえること」。HSL の L は見え方とずれがあり、色相が違うと明るさがそろいません。
色を暗くすること
ちがいます。答えは「色相の違う色の見た目の明るさをそろえること」。HSL の L は見え方とずれがあり、色相が違うと明るさがそろいません。
よくある質問
HSL とは何ですか？
色相・彩度・明度の3つの値で色を表す方法です。CSS では hsl() として使えます。
HSL と RGB の違いは何ですか？
表している色は同じでも、数字の意味が違います。HSL は色み・鮮やかさ・明るさで表すので、調整がしやすいのが特徴です。
HSL と HSB の違いは何ですか？
HSL は L が100% で白になり、HSB は B が100% でいちばん鮮やかな色になります。
HSL と OKLCH はどちらを使えばいいですか？
手軽に調整するなら HSL、見た目の明るさや鮮やかさをそろえたいなら OKLCH が向いています。