Renk fonksiyonları
rgb(), hsl() ve modern renk fonksiyonlarını öğrenirsin.
rgb() fonksiyonu
rgb() fonksiyonu bir rengi kırmızı, yeşil ve mavi kanallarla belirtir. Her kanal 0–255 arasındadır. rgb(255, 0, 0) tam kırmızı, rgb(0, 0, 0) siyahtır.
Dördüncü değer saydamlık verir: rgba(255, 0, 0, 0.5) yarı saydam kırmızı. Modern tarayıcılarda rgb(255 0 0 / 0.5) yazımı da desteklenir.
hsl() fonksiyonu
hsl() rengi ton (hue), doygunluk (saturation) ve parlaklık (lightness) ile belirtir. Ton 0–360 arası bir derecedir: 0 kırmızı, 120 yeşil, 240 mavi.
Doygunluk ve parlaklık yüzde olarak yazılır. hsl(0, 100%, 50%) canlı kırmızıdır; parlaklığı değiştirince pastel ya da koyu tonlar elde edilir.
Renk fonksiyonlarında saydamlık
Hem rgb() hem hsl() fonksiyonlarında saydamlık için dördüncü bir değer kullanılır. Eski yazımda rgba() ve hsla() ayrı birer fonksiyonken, modern CSS'te rgb(20 20 20 / 0.8) yazımı kabul edilir.
Saydamlık 0 (tam saydam) ile 1 (tam opak) arasında bir sayı ya da yüzde olarak yazılır.
Uygulama Uyarı kutusu için renk fonksiyonları
Bir .warning seçicisi yaz. Arkaplan rengini hsl(45, 100%, 50%), yazı rengini rgb(20, 20, 20) olarak ata.
Örnek çözümü göster
/* uyarı bölümünü ekle */
.warning {
background-color: hsl(45, 100%, 50%);
color: rgb(20, 20, 20);
}Kendini test et
-
rgb(0, 128, 0) hangi renktir?
/* kanallar sırayla kırmızı, yeşil, mavi */- Mavi
- Sarı
- Yeşil
- Mor
Cevabı göster
Yeşil — Doğru. Yeşil kanal 128, kırmızı ve mavi sıfır; sonuç yeşildir.
-
Yeşil tonu yaz
.member { background-color: hsl(____, 100%, 50%); }Cevabı göster
.member { background-color: hsl(120, 100%, 50%); } -
Fonksiyon-parametre eşle
- rgb()
- Kırmızı, yeşil, mavi
- hsl()
- Ton, doygunluk, parlaklık
- rgba()
- Renk ve saydamlık
- #fff
- Onaltılık renk