CSS HSL Renkleri

HSL değerleri

CSS'te, renk tonunu, doygunluğu ve aydınlığı (HSL) kullanarak renk belirtmek mümkündür, aşağıdaki gibi biçimde:

hsla(renk, doğruluk, ışıklık)

Ton (renk） renk çemberinde 0'dan 360'ya kadar olan derecelerdir. 0 kırmızı, 120 yeşil, 240 mavi.

Doygunluk (doğruluk） bir yüzde değeri, 0％ gri gölge, 100％ tam renk olarak ifade edilir.

Aydınlık (ışıklık）değerleri de yüzde, 0％ siyah, 50％ ne aydınlık ne karanlık, 100％ beyaz.

Aşağıdaki HSL değerlerini karıştırarak deneyimleyin:

　

RENK

0

DOĞRULUK

100%

IŞIKLIK

50%

Örnek

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Kendi Kendine Deneyin

Doygunluk

Doygunluk, rengin yoğunluğu olarak tanımlanabilir.

100％ saf renk, gri gölge yok

50％ 50％ gri, ancak renk hala görülebilir.

0％ tam gri, renk göremezsiniz.

Örnek

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Kendi Kendine Deneyin

Aydınlık

Renğin aydınlık derecesi, renge ne kadar ışık verileceğini ifade eder; 0％ karanlık (siyah) olarak, 50％ 50％ aydınlık (ne kararık ne aydınlık) olarak, 100％ tam aydınlık (beyaz) olarak ifade edilir.

Örnek

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Kendi Kendine Deneyin

Genellikle ton ve doygunluğu 0 olarak ayarlayarak gri gölgeleri tanımlar ve aydınlığı 0％ ile 100％ arasında ayarlayarak daha derin/yüzeyli gölgeler elde edebilirsiniz:

Örnek

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Kendi Kendine Deneyin

HSLA değerleri

HSLA renk değeri, Alpha kanalına sahip HSL renk değerlerinin genişletilmesi - rengin şeffaflığını belirtir.

HSLA renk değeri belirlenmiştir:

hsla(renk, doğruluk, ışıklık, alpha)

alpha Parametreler 0.0 (tamamen şeffaf) ile 1.0 (tamamen şeffaf olmayan) arasında sayısal değerlerdir:

Aşağıdaki HSLA değerlerini karıştırarak deneyin:

　

RENK

0

DOĞRULUK

100%

IŞIKLIK

50%

ALPHA

0.5

Örnek

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Kendi Kendine Deneyin