CSS HSL Renkleri

HSL, renk tonu, doygunluk ve açıklık anlamına gelir. (hue, saturation,lightness)

HSL Değeri

CSS’de bir renk, ton, doygunluk ve açıklık (HSL) kullanılarak şu biçimde belirtilebilir:

hsl(huesaturationlightness)

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.

Işık değeri de bir yüzdedir. %0 siyahtır, %50 ne açık ne de koyudur, %100 beyazdır.

<!DOCTYPE html>
<html>
<head>
 
</head>
<body>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

</body>
</html>

Doygunluk

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; artık rengi göremezsiniz.

<!DOCTYPE html>
<html> 
<body>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>

</body>
</html>

Açıklık (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>

<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>

</body>
</html>

Gri Tonları

Gri tonları genellikle renk tonu ve doygunluğun 0’a ayarlanması 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>

<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>

</body>
</html>

HSLA Değeri

HSLA renk değerleri, bir rengin opaklığını belirten alfa kanalına sahip HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri şu şekilde belirtilir:

hsla(hue, saturationlightness, alpha)

Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (hiç şeffaf değil) arasında bir sayıdır:

<!DOCTYPE html>
<html> 
<body>

<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>

</body>
</html>
10 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir