Renk biçimleri

hex, rgb, hsl ve renk adlarını öğrenirsin.

Renk biçimleri nedir?

CSS'te bir rengi dört yaygın biçimde yazabilirsin: ad (red), hex (#e63946), rgb() ve hsl(). Hepsi tarayıcıda aynı sonucu verebilir.

red gibi adlar akılda kalıcıdır; ama yalnızca birkaç düzine renk için geçerlidir. #e63946 gibi altı basamaklı hex, tonları kesin verir. rgb(230, 57, 70) üç ışık kanalını 0–255 arası sayıyla gösterir. hsl(355, 78%, 56%) ise ton, doygunluk ve parlaklığı ayrı ayrı ayarlar.

Hex renkler

Bir hex renk diyez işaretiyle başlar ve altı basamak sürer: #rrggbb. Her çift sırayla kırmızı, yeşil ve mavi kanalın şiddetini verir; 00 kapalı, ff tam açık.

Örneğin #000000 siyah, #ffffff beyaz, #ff5733 canlı bir turuncudur. CSS ayrıca üç basamaklı kısa yazımı da destekler: #f53, #ff5533 ile aynı renktir.

rgb() ve hsl()

rgb() bir rengi üç ışık kanalıyla yazar: rgb(230, 57, 70). Sayılar sırayla kırmızı, yeşil ve mavi için 0–255 arasıdır. Yüksek değer açık, düşük değer koyu verir.

hsl() ise rengi insan gözünün düşündüğü gibi ayırır: ton (hue) 0–360 bir renk çemberi, doygunluk (saturation) yüzde, parlaklık (lightness) yüzde. hsl(355, 78%, 56%) koyu bir kırmızıdır; parlaklığı %20'ye çekersen neredeyse siyah olur.

Uygulama h1 için hex, h2 için hsl renk yaz

Bir h1 tür seçicisi ekle ve color özelliğini hex biçiminde #1a1a2e değeriyle ata. Sonra bir h2 tür seçicisi ekle ve color özelliğini hsl biçiminde hsl(355, 78%, 30%) değeriyle ata.

Örnek çözümü göster

/* h1 ve h2 için renk ekle */
h1 {
  color: #1a1a2e;
}
h2 {
  color: hsl(355, 78%, 30%);
}

Kendini test et

Hangisi geçerli bir hex renk değeridir?
```
color: /* ? */;
```
- ff5733
- #ff5733
- rgb(255, 87, 51)
- 0xff5733
Cevabı göster

#ff5733 — Doğru. #ff5733 altı basamaklı hex değerdir; diyez işaretiyle başlar.

Saf kırmızı için rgb() değerini tamamla

a {
  color: rgb(____, 0, 0);
}

Cevabı göster

a {
  color: rgb(255, 0, 0);
}

Renk biçimini açıklamasıyla eşleştir

#ff5733

Altı basamaklı hex değer
rgb(0, 0, 0)

Üç kanalın sayısal toplamı
hsl(120, 100%, 50%)

Ton, doygunluk, parlaklık
red

İngilizce renk adı

Sıradaki ders: Opaklık ve alpha

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler