このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

hsl()”関数CSS Color Level 3 で追加

記事Mar. 3rd,2021
HSL値で色を表すCSSの関数、“hsl()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

hsl()”関数

hsl()”関数はHSLカラー・モデルの色相(“Hue”)、彩度(“Saturation”)、輝度(“Lightness”、もしくは“Luminance”)の成分で色を指定するための関数です。<color>”値として使用することができます。

HSLカラー・モデルのイメージ
HSLカラー・モデルのイメージ
色の例
HSL値 HSL値
  hsl(0deg,100%,50%)   hsl(180deg,100%,50%)
  hsl(12deg,100%,50%)   hsl(192deg,100%,50%)
  hsl(24deg,100%,50%)   hsl(204deg,100%,50%)
  hsl(36deg,100%,50%)   hsl(216deg,100%,50%)
  hsl(48deg,100%,50%)   hsl(228deg,100%,50%)
  hsl(60deg,100%,50%)   hsl(240deg,100%,50%)
  hsl(72deg,100%,50%)   hsl(252deg,100%,50%)
  hsl(84deg,100%,50%)   hsl(264deg,100%,50%)
  hsl(96deg,100%,50%)   hsl(276deg,100%,50%)
  hsl(108deg,100%,50%)   hsl(288deg,100%,50%)
  hsl(120deg,100%,50%)   hsl(300deg,100%,50%)
  hsl(132deg,100%,50%)   hsl(312deg,100%,50%)
  hsl(144deg,100%,50%)   hsl(324deg,100%,50%)
  hsl(156deg,100%,50%)   hsl(336deg,100%,50%)
  hsl(168deg,100%,50%)   hsl(348deg,100%,50%)

hsl()”関数の構文

色相、彩度、輝度を表す3個の引数を順番にホワイトスペースで区切って記述します。また、“CSS Color Module Level 3”までと同様にコンマ(“,”)で区切って記述する方法もあります。

空白区切りの記法
hsl(〚色相〛 〚彩度〛 〚輝度〛)

コンマ区切りの記法
hsl(〚色相〛,〚彩度〛,〚輝度〛)

1個目の引数は色相を表し、<hue>”値で指定します。“0deg”が赤色、“120deg”が緑色、“240deg”が青色に対応します。

HSLカラー・モデルのイメージ
HSLカラー・モデルのイメージ

2個目の引数は彩度を表し、<percentage>”値で指定します。“100%”が純色、“0%”で無彩色の灰色になります。

3個目の引数は輝度を表し、<percentage>”値で指定します。“50%”が純色を表し、“0%”が黒色、“100%”が黒色となります。

透明度の指定

hsl()”関数は任意で指定できる4個目の引数で色の透明度を示すアルファ値を指定することができます。

アルファ値は<alpha-value>”値で表します。ホワイトスペース区切りの記法ではスラッシュ(“/”)に続いて、コンマ区切りの記法ではコンマに続いて最後に記述します。

空白区切りの記法
hsl(〚色相〛 〚彩度〛 〚輝度〛/〚アルファ値〛)

コンマ区切りの記法
hsl(〚色相〛,〚彩度〛,〚輝度〛,〚アルファ値〛)

アルファ値を指定する引数を省略した場合は“100%”として扱われます。

“CSS Color Module Level 3”ではアルファ値を含む色はhsla()”関数として区別されていましたが、“CSS Color Module Level 4”ではhsla()”関数を“hsl()”関数の別名として定義しており、それぞれ同じ働きをします。

使用例

色を指定する

空白区切り

.banana { background-color: hsl(50deg 100% 50%);}
.apple { background-color: hsl(348deg 83% 47%);}
.peach { background-color: hsl(28deg 100% 86%);}
.kiwi { background-color: hsl(60deg 100% 25%);}
.mangosteen { background-color: hsl(340deg 59% 64%);}
.melon { background-color: hsl(120deg 92% 79%);}
.orange { background-color: hsl(38deg 100% 50%);}
.grape { background-color: hsl(248deg 38% 39%);}
.durian { background-color: hsl(54deg 66% 80%);}
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン

コンマ区切り

.banana { background-color: hsl(50deg,100%,50%);}
.apple { background-color: hsl(348deg,83%,47%);}
.peach { background-color: hsl(28deg,100%,86%);}
.kiwi { background-color: hsl(60deg,100%,25%);}
.mangosteen { background-color: hsl(340deg,59%,64%);}
.melon { background-color: hsl(120deg,92%,79%);}
.orange { background-color: hsl(38deg,100%,50%);}
.grape { background-color: hsl(248deg,38%,39%);}
.durian { background-color: hsl(54deg,66%,80%);}
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン

アルファ値を含む色

空白区切り

.purple-100p { background-color: hsl(319deg 43% 60%/100%);}
.purple-90p { background-color: hsl(319deg 43% 60%/90%);}
.purple-80p { background-color: hsl(319deg 43% 60%/80%);}
.purple-70p { background-color: hsl(319deg 43% 60%/70%);}
.purple-60p { background-color: hsl(319deg 43% 60%/60%);}
.purple-50p { background-color: hsl(319deg 43% 60%/50%);}
.purple-40p { background-color: hsl(319deg 43% 60%/40%);}
.purple-30p { background-color: hsl(319deg 43% 60%/30%);}
.purple-20p { background-color: hsl(319deg 43% 60%/20%);}
.purple-10p { background-color: hsl(319deg 43% 60%/10%);}
.purple-0p { background-color: hsl(319deg 43% 60%/0%);}
100% 90% 80%
70% 60% 50%
40% 30% 20%
10% 0%

コンマ区切り

.purple-100p { background-color: hsl(319deg,43%,60%,100%);}
.purple-90p { background-color: hsl(319deg,43%,60%,90%);}
.purple-80p { background-color: hsl(319deg,43%,60%,80%);}
.purple-70p { background-color: hsl(319deg,43%,60%,70%);}
.purple-60p { background-color: hsl(319deg,43%,60%,60%);}
.purple-50p { background-color: hsl(319deg,43%,60%,50%);}
.purple-40p { background-color: hsl(319deg,43%,60%,40%);}
.purple-30p { background-color: hsl(319deg,43%,60%,30%);}
.purple-20p { background-color: hsl(319deg,43%,60%,20%);}
.purple-10p { background-color: hsl(319deg,43%,60%,10%);}
.purple-0p { background-color: hsl(319deg,43%,60%,0%);}
100% 90% 80%
70% 60% 50%
40% 30% 20%
10% 0%

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
hsl()
定義なし

定義なし

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク