【CSS】hslで色を指定する

CSS
2022.01.25
動点P
動点P

hslとは？？

動点Qちゃん
動点Qちゃん

色相、彩度、輝度を指定して色を現す関数です。これができればベースの色と暗い色などを簡単に作れます・・・。

円周率π
円周率π

Sassにも同じような関数があったけど、直接指定できるからこっちの方が便利そう～～。

hslで指定することによって、彩度や輝度をだんだん変えていく表も簡単に作れるようになるし、微妙なグラデーションも作れます

See the Pen hsl by inu (@tenp) on CodePen.

hsl()関数とは

hsl()関数はHSL色空間の色相(Hue)、彩度(Saturation)、輝度(Lightness)の成分で色を指定するための関数です。

CSSで色を指定する方法には「色の名前」、「カラーコード」、「RGBの数値」、がありましたが、どれも、彩度や輝度の程度がわからないので、あるベースの色を作ってバリエーションを作る、という作業には不向きです。

しかしhslで色相さえ決めてしまえば、暗い色、明るい色、鮮やかな色、鈍い色を段階ごとに作ることが簡単にできます。

ブラウザ対応についてはIEの８以前が対応していません。

色の指定の仕方

基本のコード

hsl(色相, 彩度%, 輝度%)

例：hsl(0,70%,50%)　→　　色相0、彩度70％、50％の色です。

.box01 {
	background-color:hsl(0,70%,50%);
}

色相

色相（hue）

まずベースの色相を決めます。色相は色相環という色の輪の何度の位置にある色かで指定します。（度数の単位はいりません。）

色相環

一番左：hsl(0,70%,50%)　色相0、彩度70％、50％の色を20ずつ色相をずらしたものです。

.box01 {
	background-color:hsl(0,70%,50%);
}
.box02 {
	background-color:hsl(20,70%,50%);
}
.box03 {
	background-color:hsl(40,70%,50%);
}
.box04 {
	background-color:hsl(60,70%,50%);
}

彩度

彩度（ saturation ）

100％＝純色、0%＝灰色(色味がなくなります)

一番左：hsl(100,20%,50%)　色相100、彩度20％、50％の色を20ずつ彩度を増やしたものです。

.box07 {
	background-color:hsl(100,20%,50%);
}
.box08 {
	background-color:hsl(100,40%,50%);
}
.box09 {
	background-color:hsl(100,60%,50%);
}
.box10 {
	background-color:hsl(100,80%,50%);
}

輝度

輝度（ lightness ）

100%=白、50％=純色、0%=黒
（明度とは異なります。明度は100%で一番明るいときが純色になります）

そもそも輝度とは照らされた面の明るさの度合なので、何か光源が強く当たっているときが100％、ほどほどで色もよく見えるのが50％、まったく光が当たっていないときが０％で真っ黒と思えばいいと思います。

一番左：hsl(100,80%,30%)　色相100、彩度80％、30％の色を20ずつ輝度を増やしたものです。

.box11 {
	background-color:hsl(100,80%,30%);
}
.box12 {
	background-color:hsl(100,80%,50%);
}
.box13 {
	background-color:hsl(100,80%,70%);
}
.box14 {
	background-color:hsl(100,80%,90%);
}

透明度

透明度を指定したいときはhsla()関数で４番目の透明度の値を入れることができます。

hsla(色相,彩度%,輝度%,透明度)

透明度は0～1の間で指定します。単位はなし。

左から透明度　0.3、0.5、0.9です。

.box15 {
	background-color:hsl(100,80%,50%,0.3);
}
.box16 {
	background-color:hsl(100,80%,50%,0.5);
}
.box17 {
	background-color:hsl(100,80%,50%,0.9);
}

コメント