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
関連情報
hsla()
関数、この関数の古い別名。<color>
型、あらゆる色を表す。- HSL Color Picker