CSS HSL Renkleri

HSL, ton, doygunluk ve hafiflik anlamına gelir.

HSL Değeri

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

hsl( ton , doygunluk , hafiflik )

Ton, renk tekerleğinde 0 ile 360 ​​arasındaki bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Doygunluk bir yüzde değeridir, %0 bir gri tonu anlamına gelir ve %100 tam renktir.

Açıklık da bir yüzdedir, %0 siyahtır, %50 açık veya koyu değildir, %100 beyazdır

Aşağıdaki HSL değerlerini karıştırarak deney yapın:

Doyma

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

%100 saf renktir, gri tonları yoktur

%50, %50 gridir, ancak yine de rengi görebilirsiniz.

%0 tamamen gri, artık rengi göremezsiniz.

hafiflik

Bir rengin açıklığı, renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir, burada %0 ışık olmaması (siyah), %50 %50 ışık (ne karanlık ne açık) anlamına gelir %100 tam açıklık (beyaz) anlamına gelir.

Grinin tonları

Grinin tonları genellikle ton ve doygunluk 0'a ayarlanarak ve daha koyu/daha açık gölgeler elde etmek için açıklığı %0'dan %100'e ayarlayarak tanımlanır:

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( ton, doygunluk , hafiflik, alfa )

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

Aşağıdaki HSLA değerlerini karıştırarak deney yapın: