Ders Programı

CSS Referans El Kitabı

CSS Özelliği

Seçmeli Ders

Kurs Önerisi:

CodeW3C.com çantası

CSS hsl() fonksiyonu

Önceki sayfa CSS grayscale() fonksiyonu
Sonraki sayfa CSS hue-rotate() fonksiyonu
Üst seviyeye dön CSS Fonksiyon Referans El Kitabı

Tanımı ve Kullanımı

CSS'nin hsl() Fonksiyon, renkleri belirlemek için Renk Tonu-Satürasyon-Parlaklık modelini (HSL) kullanır. Ayrıca, renk şeffaflığını belirlemek için isteğe bağlı bir alpha bileşeni ekleyebilirsiniz.

İpucu:HSL, Renk (Hue), Doğal (Saturation) ve parlaklık (Lightness) anlamına gelir ve renklerin küp koordinat sistemini temsil eder.

Dikkat:hsla() Fonksiyon hsl() Fonksiyonun alternatif adı. Kullanılmasını öneririz hsl() Fonksiyon.

Örnek

Örnek 1

Farklı HSL(A) renkleri tanımla:

#p1 {background-color:hsl(120 100% 50%);} /* Yeşil */
#p2 {background-color:hsl(120 100% 75%);} /* Açık yeşil */
#p3 {background-color:hsl(120 100% 25%);} /* Koyu yeşil */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Yarı şeffaf koyu yeşil */
#p5 {background-color:hsl(120 60% 70%);} /* Yumuşak yeşil */
#p6 {background-color:hsl(290 100% 50%);} /* Mor */
#p7 {background-color:hsl(290 60% 70%);} /* Yumuşak mor */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Yarı şeffaf yumuşak mor */

Kişisel olarak deneyin

Örnek 2

Değerlerin eski virgülle ayrılmış dilimi:

#p1 {background-color:hsl(120, 100%, 50%);} /* Yeşil */
#p2 {background-color:hsl(120, 100%, 75%);} /* Hafif yeşil */
#p3 {background-color:hsl(120, 100%, 25%);} /* Koyu yeşil */
#p4 {background-color:hsl(120, 60%, 70%);} /* Yumuşak yeşil */
#p5 {background-color:hsl(290, 100%, 50%);} /* Mor */
#p6 {background-color:hsl(290, 60%, 70%);} /* Yumuşak mor */

Kişisel olarak deneyin

CSS dilimi

Mutlak değer dilimi

hsl(Renk Doygunluk Işıklandırma / A)

Değer	Açıklama
Renk	Gerekli. Renk çemberindeki dereceleri tanımlar (0'dan 360'e kadar) - 0 (veya 360) kırmızı, 120 yeşil, 240 mavi.
Doygunluk	Gerekli. Renkinin doygunluğunu tanımlar; 0% gri, 100% tam renk (tam doygunluk). Ayrıca None (0% ile aynı) kullanılabilir.
Işıklandırma	Gerekli. Renkinin aydınlatmasını tanımlar; 0% siyah, 50% normal, 100% beyaz. Ayrıca None (0% ile aynı) kullanılabilir.
/ A	Opsiyonel. Renkinin alpha kanalı değerini belirtir (0% veya 0'dan tamamen şeffaf 100% veya 100'e kadar tamamen şeffaf). Ayrıca None (alpha kanalı olmadığını belirtir) kullanılabilir. Varsayılan değer 100%'dir.

Göreceli değer dilimi

hsl(from Başlangıçla 'from' kelimesi ile, ardından temel rengi gösteren bir renk değeri gelir. Renk Doygunluk Işıklandırma / A)

Değer	Açıklama
from Başlangıçla 'from' kelimesi ile, ardından temel rengi gösteren bir renk değeri gelir.	Renk Bu, göreceli renklerin temel aldığı temel renktir.
Renk	Gerekli. Renk çemberindeki dereceleri tanımlar (0'dan 360'e kadar) - 0 (veya 360) kırmızı, 120 yeşil, 240 mavi.
Doygunluk	Gerekli. Renkinin doygunluğunu tanımlar; 0% gri, 100% tam renk (tam doygunluk). Ayrıca None (0% ile aynı) kullanılabilir.
Işıklandırma	Gerekli. Renkinin aydınlatmasını tanımlar; 0% siyah, 50% normal, 100% beyaz. Ayrıca None (0% ile aynı) kullanılabilir.
/ A	Opsiyonel. Renkinin alpha kanalı değerini belirtir (0% veya 0'dan tamamen şeffaf 100% veya 100'e kadar tamamen şeffaf). Ayrıca None (alpha kanalı olmadığını belirtir) kullanılabilir. Varsayılan değer 100%'dir.