HSL, renk tonu, doygunluk ve açıklık anlamına gelir.
HSLA renk değerleri, HSL’nin Alpha kanalına (opaklığa) sahip bir uzantısıdır.
HSL Renk Değerleri
HTML’de bir renk, ton, doygunluk ve açıklık (HSL) kullanılarak şu biçimde belirtilebilir:
hsl(ton, doygunluk, açıklık)
hsl(hue, saturation, lightness)
Ton, renk tekerleğinde 0 ile 360 arasında bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.
Doygunluk bir yüzde değeridir. %0 grinin bir tonu, %100 ise tam renk anlamına gelir.
Hafiflik aynı zamanda bir yüzde değeridir. %0 siyah, %100 beyazdır.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
</body>
</html>
HSL Değerlerinde Renk Doygunluğu
Doygunluk bir rengin yoğunluğu olarak tanımlanabilir.
%100 saf renktir, grinin tonları yoktur.
%50 %50 gridir ancak rengi yine de görebilirsiniz.
%0 tamamen gridir; rengi göremezsiniz.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
</body>
</html>
HSL Renklerde Işık Değeri
Bir rengin açıklığı, renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir; %0, hiç ışık olmadığı (siyah), %50, %50 açık (ne koyu ne de açık) ve %100, tam açıklık (beyaz) anlamına gelir. ).
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
</body>
</html>
HSL Renklerde Gri Tonları
Gri tonları genellikle renk tonu ve doygunluğun 0’a ayarlanmasıyla ve daha koyu/açık gölgeler elde etmek için açıklığın %0 ila %100 arasında ayarlanmasıyla tanımlanır:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>
</body>
</html>
HSLA Renk Değerleri
HSLA renk değerleri, bir rengin opaklığını belirten Alpha kanalına sahip HSL renk değerlerinin bir uzantısıdır.
Bir HSLA renk değeri şu şekilde belirtilir:
hsla(ton, doygunluk, açıklık, alfa)
hsla(hue, saturation, lightness, alpha)
Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (hiç şeffaf değil) arasında bir sayıdır:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
</body>
</html>
