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

Sıradaki ders: Özet - Duyarlı tipografi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler