Mar. 3rd,2021
＃
“hsl()”関数
“hsl()”関数はHSLカラー・モデルの色相(“Hue”)、彩度(“Saturation”)、輝度(“Lightness”、もしくは“Luminance”)の成分で色を指定するための関数です。“<color>”値として使用することができます。
＃
“hsl()”関数の構文
色相、彩度、輝度を表す3個の引数を順番にホワイトスペースで区切って記述します。また、“CSS Color Module Level 3”までと同様にコンマ(“,”)で区切って記述する方法もあります。
空白区切りの記法
hsl(〚色相〛 〚彩度〛 〚輝度〛)
コンマ区切りの記法
hsl(〚色相〛,〚彩度〛,〚輝度〛)
1個目の引数は色相を表し、“<hue>”値で指定します。“0deg”が赤色、“120deg”が緑色、“240deg”が青色に対応します。
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% |
＃
