HSL és HSLA színmegadás a HTML nyelvben

A HTML nyelvben lehetőség van a HSL, illetve HSLA színmegadásra is. Kevésbé elterjedt módszer, de sokszor nagyon hasznos tud lenni.

Színmegadás HSL kóddal

A HSL az angol “Hue”, “Saturation” és “Lightness” szóból ered. Magyarul: színárnyalat, telítettség, fényesség. A HTML nyelvben ezen három tulajdonság segítségével is meghatározhatunk egy konkrét színt.

A HSL kódok felépítése így néz ki:

hsl(hue, saturation, lightness)

MÁSKÉPP

hsl(színárnyalat, telítettség, fényesség)

A “Hue” értékhez egy 0 és 360 közötti számot kell megadnunk. Ahol a 0 a piros, a 120 a zöld és a 240 a kék. A “Saturation”-hoz egy 0% és 100% közötti értéket kell megadnunk, ahol a 0% a szürke árnyalatát jelenti és a 100% pedig a teljes színt. A “Lightness”-hez szintúgy egy 0% és 100% közötti értéket kell megadni, ahol a 0% a fekete és a 100% a fehér.

Példa HSL kódos szín megadására

<p style="background-color:hsl(0, 100%, 50%);">Nagyon élénk piros</p>
<p style="background-color:hsl(0, 86%, 40%)
;">Sötét piros</p>

Színmegadás HSLA kóddal

Csakúgy ahogy az RGB és az RGBA esetében, itt is egy Alpha csatornával bővül a kód az előzőhöz képest.

A HSLA kódok felépítése így néz ki:

hsla(hue, saturation, lightness, alpha)

MÁSKÉPP

hsla(színárnyalat, telítettség, fényesség, alfa)

Az “alpha” paraméter jelen esetben is egy 0.0 és egy 1.0 közötti értéket vehet fel, ahol a 0.0 a teljesen átlátszó, míg az 1.0 egyáltalán nem átlátszó.

Példa HSLA kóddal történő szín megadására

<p style="background-color:hsla(0, 100%, 50%, 0)
;">Teljesen átlátszó piros</p>
<p style="background-color:hsla(0, 100%, 50%, 0.5);
">Félig átlátszó piros</p>
<p style="background-color:hsla(0, 100%, 50%, 1);
">Egyáltalán nem átlátszó piros</p>