Mar. 3rd,2021
＃
“hsl()”関数
“hsl()”関数はHSL色空間の色相(“Hue”)、彩度(“Saturation”)、輝度(“Lightness”、もしくは“Luminance”)の成分で色を指定するための関数です。“<color>”値として使用することができます。
1個目の引数は色相を表し、“<angle>”値、もしくは“<number>”値が使用できます。HSL空間の色相は通常角度で表されるため、“<number>”値はそのまま度数を表す数値として解釈されます(“360”は“360deg”と同じ)。
2個目の引数は彩度を表し、“<percentage>”値で指定します。“100%”が純色、“0%”で無彩色の灰色になります。
3個目の引数は輝度を表し、“<percentage>”値で指定します。“50%”が純色を表し、“0%”が黒色、“100%”が黒色となります。
引数は半角スペース(“ ”)で区切って記述します。また、“CSS Color Module Level 3”までと同様にコンマ(“,”)で区切って記述する方法もあります。
赤色
hsl(0deg 100% 50%)
hsl(0deg,100%,50%)
hsl(0 100% 50%)
hsl(0,100%,50%)
緑色
hsl(120deg 100% 50%)
hsl(120deg,100%,50%)
hsl(120 100% 50%)
hsl(120,100%,50%)
青色
hsl(240deg 100% 50%)
hsl(240deg,100%,50%)
hsl(240 100% 50%)
hsl(240,100%,50%)
＃
透明度の指定
“hsl()”関数は任意で指定できる4個目の引数で色の透過度を示すアルファ値を指定することができます。アルファ値は“<percentage>”値、もしくは“<number>”値で指定できます。
- “<percentage>”値で引数を指定する場合
- “0%”は完全な透明、“100%”は不透明を表します。
- “<number>”値で引数を指定する場合
- “0”は完全な透明、不透明は“1”で表されます。
アルファ値を指定する引数を省略した場合は“100%”として扱われます。
不透明
hsl(0deg 100% 50% 100%)
hsl(0deg,100%,50%,100%)
hsl(0deg 100% 50% 1)
hsl(0deg,100%,50%,1)
hsl(0 100% 50% 100%)
hsl(0,100%,50%,100%)
hsl(0 100% 50% 1)
hsl(0,100%,50%,1)
半透明
hsl(0deg 100% 50% 50%)
hsl(0deg,100%,50%,50%)
hsl(0deg 100% 50% 0.5)
hsl(0deg,100%,50%,0.5)
hsl(0 100% 50% 50%)
hsl(0,100%,50%,50%)
hsl(0 100% 50% 0.5)
hsl(0,100%,50%,0.5)
透明
hsl(0deg 100% 50% 0%)
hsl(0deg,100%,50%,0%)
hsl(0deg 100% 50% 0)
hsl(0deg,100%,50%,0)
hsl(0 100% 50% 0%)
hsl(0,100%,50%,0%)
hsl(0 100% 50% 0)
hsl(0,100%,50%,0)
“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%);}
<table>
<tr>
<td class="banana">バナナ</td>
<td class="apple">リンゴ</td>
<td class="peach">モモ</td>
</tr>
<tr>
<td class="kiwi">キウイ</td>
<td class="mangosteen">マンゴスチン</td>
<td class="melon">メロン</td>
</tr>
<tr>
<td class="orange">オレンジ</td>
<td class="grape">ブドウ</td>
<td class="durian">ドリアン</td>
</tr>
</table>
| バナナ | リンゴ | モモ |
| キウイ | マンゴスチン | メロン |
| オレンジ | ブドウ | ドリアン |
アルファ値を含む色
.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%);}
<table>
<tr>
<td class="purple-100p">100%</td>
<td class="purple-90p">90%</td>
<td class="purple-80p">80%</td>
</tr>
<tr>
<td class="purple-70p">70%</td>
<td class="purple-60p">60%</td>
<td class="purple-50p">50%</td>
</tr>
<tr>
<td class="purple-40p">40%</td>
<td class="purple-30p">30%</td>
<td class="purple-20p">20%</td>
</tr>
<tr>
<td class="purple-10p">10%</td>
<td class="purple-0p">0%</td>
</tr>
</table>
| 100% | 90% | 80% | 70% | 60% | 50% |
| 40% | 30% | 20% |
| 10% | 0% |
＃
