
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
HTML kód
<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>
Code language: HTML, XML (xml)
Eredmény
Nagyon élénk piros
Sötét piros
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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
HTML kód
<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>
Code language: HTML, XML (xml)
Eredmény
Teljesen átlátszó piros
Félig átlátszó piros
Egyáltalán nem átlátszó piros
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<