“hsla()”関数

“hsla()”関数

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

“CSS Color Module Level 3”ではアルファ値を含まない色が“hsl()”関数、アルファ値を含む色が“hsla()”関数と区別されていましたが、“CSS Color Module Level 4”では“hsla()”関数は“hsl()”関数の別名として定義され、区別がなくなりました

“hsla()”関数の構文

色相、彩度、輝度、アルファ値を表す4個の引数を順番にコンマ(“,”)で区切って記述します。

hsla(〚色相〛,〚彩度〛,〚輝度〛,〚アルファ値〛)


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

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

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

4個目の引数は色の透明度を示すアルファ値を表します。アルファ値は“<alpha-value>”値で表します。

使用例

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


100%	90%	80%
70%	60%	50%
40%	30%	20%
10%	0%

仕様書

定義されている仕様書

hsla()