hsl()

hsl() 関数表記は、 sRGB 色を 色相、彩度、明度 の成分によって表現します。オプションの アルファ 成分は、その色の透明度を表します。

メモ: レガシーの hsla() 構文は hsl() のエイリアスです。同じ引数を受け付け、同じようにふるまいます。

試してみましょう

hsl() による 補色 の定義は、色相環 (en-US)の同じ直径に配置されるため、単一の式で計算することができます。ある色の色相環上の角度を θ とすれば、その補色の色相環上の角度は 180deg - θ となります。

構文

css

hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)

この関数は、すべての値がコンマで区切られたレガシーな構文も受け付けます。

値

関数表記: hsl(H S L[ / A])

H

<number>、<angle> またはキーワード none であり、色相環上の角度を表します。この型の詳細は <hue> (en-US) のリファレンスを参照してください。

S

<percentage> またはキーワード none であり、彩度を表します。100% は色の濃さが最大で、0% は完全に色がありません（グレー）。

L

<percentage> またはキーワード none であり、輝度を表します。100% は白で、0% は黒で、50% は「通常」です。

A 省略可

<alpha-value> またはキーワード none であり、数値 1 が 100% (完全に不透明) を意味します。

メモ: none の効果は、Missing color components を参照してください。

形式的な構文

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  |
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  |
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>

例

hsl() を conic-gradient() と組み合わせて使う

hsl() 関数と conic-gradient() はどちらも角度を扱うので、相性がよいものです。

css

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
  );
  clip-path: circle(closest-side);
}

結果

レガシー構文: コンマ区切りの値

歴史上の理由から、hsl() 関数はすべての値がコンマにより区切られた形式を受け付けます。

HTML

html

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

css

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 50%);
}

結果

レガシー構文: hsla()

レガシーな hsla() 構文は hsl() のエイリアスです。

HTML

html

<div class="hsl"></div>
<div class="hsla"></div>

CSS

css

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.hsl {
  background-color: hsl(0 100% 50% / 50%);
}

div.hsla {
  background-color: hsla(0, 100%, 50%, 50%);
}

結果

仕様書

Specification
CSS Color Module Level 4
# the-hsl-notation

ブラウザーの互換性

BCD tables only load in the browser

関連情報