TECH I.S.

HTML HSLおよびHSLAの色


HSLは、色相、彩度、明度の略です。

HSLAカラー値は、HSLをアルファチャネル(不透明度)で拡張したものです。


HSLカラー値

HTMLでは、次の形式で色相、彩度、明度(HSL)を使用して色を指定できます。

hsl(色相飽和明るさ)

色相は、0から360までのカラーホイール上の次数です。0は赤、120は緑、240は青です。

彩度はパーセント値です。 0%は灰色の色合いを意味し、100%はフルカラーです。

明度もパーセント値です。 0%は黒、100%は白です。

以下のHSL値を混合して実験します。

hsl(0, 100%, 50%)

色相

0

飽和

100%

明るさ

50%

hsl(0、100%、50%)
hsl(240、100%、50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39、100%、50%)
hsl(248, 53%, 58%)


飽和

彩度は、色の強度として説明できます。

100%は純粋な色で、グレーの色合いはありません。

50%は50%グレーですが、まだ色が見えます。

0%は完全にグレーです。色が見えなくなります。

hsl(0、100%、50%)
hsl(0、80%、50%)
hsl(0、60%、50%)
hsl(0、40%、50%)
hsl(0、20%、50%)
hsl(0, 0%, 50%)


明度

色の明るさは、色に与えたい明るさの量として表すことができます。ここで、0%は明るさがない(黒)のことを意味し、50%は50%の明るさ(暗くも明るくもない)を意味し、100%は完全な明るさ(白)を意味します。

hsl(0, 100%, 0%)
hsl(0、100%、25%)
hsl(0、100%、50%)
hsl(0、100%、75%)
hsl(0、100%、90%)
hsl(0, 100%, 100%)


グレーの色合い

多くの場合、グレーの色合いは、色相と彩度を0に設定し、明度を0%から100%に調整して、より暗い/より明るい色合いにすることによって定義されます。

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0、0%、90%)
\


HSLAカラー値

HSLAカラー値は、色の不透明度を指定するアルファチャネルを使用して、HSLカラー値を拡張したものです。

HSLAカラー値は、次のように指定されます。

hsla(*色相*、*飽和*、*明度*、*アルファ*)

alphaパラメーターは、0.0(完全に透明)から1.0(まったく透明ではない)までの数値です。

以下のHSLA値を混合して実験します。

hsla(0, 100%, 50%, 0.5)

色相

0

飽和

100%

明度

50%

アルファ

0.5

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9、100%、64%、0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細