0

エンコード結果

HSL カラー

HSLカラーについて

HSLカラーは、色相 (Hue)、彩度 (Saturation)、明度 (Lightness) の3つの成分で色を表す方式です。RGBのように赤、緑、青の光の強さを直接指定するのではなく、色味、鮮やかさ、明るさを分けて指定できるため、色の調整やCSSでのデザイン作業でよく使われます。

成分意味値の例
H: 色相 (Hue)色味を角度で表します。赤は 0deg、緑は 120deg、青は 240deg 付近です。0deg
S: 彩度 (Saturation)色の鮮やかさを表します。0% は無彩色、100% は最も鮮やかな色です。100%
L: 明度 (Lightness)色の明るさを表します。0% は黒、50% は標準的な明るさ、100% は白です。50%

例えば、赤は hsl(0deg 100% 50%)、ライムは hsl(120deg 100% 50%)、青は hsl(240deg 100% 50%) のように表せます。

色HSL表記RGB表記
赤hsl(0deg 100% 50%)rgb(255 0 0)
緑hsl(120deg 100% 25.1%)rgb(0 128 0)
ライムhsl(120deg 100% 50%)rgb(0 255 0)
青hsl(240deg 100% 50%)rgb(0 0 255)
白hsl(0deg 0% 100%)rgb(255 255 255)
黒hsl(0deg 0% 0%)rgb(0 0 0)

透明度を含める場合は、アルファ値を追加します。例えば、半透明の赤は hsl(0deg 100% 50% / 0.5) のように表せます。

入力では、hsl(0deg 100% 50%) のようなスペース区切り表記のほか、hsl(0deg, 100%, 50%) のような従来のカンマ区切り表記も使用できます。色相の単位 deg は省略でき、hsl(0 100% 50%) のようにも入力できます。

色相・彩度・明度の扱い

色相は角度として扱われ、360deg を超える値や負の値は 0deg から 360deg の範囲に正規化されます。例えば、hsl(360deg 100% 50%) は hsl(0deg 100% 50%)、hsl(-120deg 100% 50%) は hsl(240deg 100% 50%) と同じ色として扱われます。

彩度と明度は 0% から 100% の範囲で扱われます。彩度が 0% の場合は、色相に関係なくグレー系の無彩色になります。明度が 0% の場合は黒、100% の場合は白になります。

HSLとRGBの違い

RGBは赤、緑、青の成分を直接指定するため、画面表示や画像データに近い表現です。一方、HSLは色相、彩度、明度を分けて指定できるため、「同じ色相のまま明るくする」「彩度だけを下げる」といった調整がしやすい表現です。

ただし、HSLは人間の知覚に完全に均等なカラースペースではありません。見た目の明るさや色差をより扱いやすくしたい場合は、Lab、LCH、Oklab、Oklchなどのカラースペースを使うことがあります。