hsl()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

メモ: 古い hsla() 構文は hsl() の別名です。同じ引数を受け付け、同じように動作します。

試してみましょう

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

構文

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

この関数は、すべての値がカンマで区切られた古い構文も受け付けます。

値

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

H

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

S

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

L

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

A 省略可

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

メモ: この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。

メモ: none の効果については色成分の欠落を参照してください。

形式文法

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<hue> = 
  <number>  |
  <angle>   

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

例

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

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

CSS

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 5
# relative-HSL
CSS Color Module Level 4
# the-hsl-notation

ブラウザーの互換性

BCD tables only load in the browser

関連情報