CSS hsl() 関数

定義と使用法

CSSの hsl() 関数は色相-飽和度-明度モデル（HSL）を使用して色を指定します。オプションのalpha成分（色の透明度を示します）を追加することもできます。

ヒント：HSLは色相（Hue）、飽和度（Saturation）および明度（Lightness）を意味し、色の円筒座標表示法を示します。

注意：hsla() 関数は hsl() 関数の別名。推奨します hsl() 関数。

インスタンス

例 1

異なる HSL(A) 項目を定義します：

#p1 {background-color:hsl(120 100% 50%);} /* 緑 */
#p2 {background-color:hsl(120 100% 75%);} /* しわばった緑 */
#p3 {background-color:hsl(120 100% 25%);} /* 濃い緑 */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* 透明度のある濃い緑 */
#p5 {background-color:hsl(120 60% 70%);} /* 柔らかな緑 */
#p6 {background-color:hsl(290 100% 50%);} /* 紫 */
#p7 {background-color:hsl(290 60% 70%);} /* 柔らかな紫 */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* 透明度のある柔らかな紫 */

実際に試してみてください

例 2

値をコンマで区切った古い文法：

#p1 {background-color:hsl(120, 100%, 50%);} /* 緑 */
#p2 {background-color:hsl(120, 100%, 75%);} /* 浅緑 */
#p3 {background-color:hsl(120, 100%, 25%);} /* 深緑 */
#p4 {background-color:hsl(120, 60%, 70%);} /* やわらかい緑 */
#p5 {background-color:hsl(290, 100%, 50%);} /* 紫 */
#p6 {background-color:hsl(290, 60%, 70%);} /* やわらかい紫 */

実際に試してみてください

CSS 文法

絶対値文法

hsl(hue saturation lightness / A)

相対値文法

hsl(from color hue saturation lightness / A)

技術的詳細

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS HSL 色彩

参照：CSS 色彩

参照：CSS hwb() 関数

参照：CSS lab() 関数

参照：CSS lch() 関数

参照：CSS oklab() 関数

参照：CSS oklch() 関数