![HSL és HSLA színmegadás a HTML nyelvben 1 Színmegadása HSL színkód segítségével a HTML nyelvben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinmegadas-HSL-szinkoddal.jpg)
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.
![HSL és HSLA színmegadás a HTML nyelvben 2 Színmegadása HSL színkód segítségével a HTML nyelvben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinmegadas-HSL-szinkoddal-1024x576.jpg)
HSL szintaktika
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
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.
![HSL és HSLA színmegadás a HTML nyelvben 3 Színmegadása HSLA színkód segítségével a HTML nyelvben](https://webiskola.hu/wp-content/uploads/2020/09/html-szinmegadas-HSLA-szinkoddal-1024x576.jpg)
HSLA szintaxis
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