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ı