HEX, RGB, HSL: Web Renk Kodlarını Anlama
Bir web sitesi düzenliyorsunuz ve CSS'te #FF5733 görüyorsunuz. Ya da bir tasarımcı size rgb(255, 87, 51) gönderiyor. Ya da bir tasarım aracı bir rengi hsl(11, 100%, 60%) olarak gösteriyor. Bunların hepsi aynı rengi, canlı bir kırmızı-turuncuyu, ama üç farklı formatta tanımlıyor.
Dijital Renkler Nasıl Çalışır?
Ekranınızdaki her renk, üç temel ışık rengini karıştırarak oluşturulur: Kırmızı, Yeşil ve Mavi. Bu RGB renk modelidir. Her kanalın yoğunluğunu sıfırdan (kapalı) maksimuma (tam parlaklık) değiştirerek, standart bir ekranın gösterebileceği yaklaşık 16,7 milyon rengin herhangi birini oluşturabilirsiniz.
HEX Renkleri
Bir HEX renk kodu, bir diyez işaretinden sonra gelen altı karakterlik bir dizgedir. Altı karakter, her biri onaltılık (16 tabanı) olarak bir renk kanalını temsil eden üç çifte ayrılır.
#FF5733 çözümlemesi:
- FF = Kırmızı 255'te (maksimum)
- 57 = Yeşil 87'de
- 33 = Mavi 51'de
İpucu HEX kodları web geliştirmede en yaygın kullanılan formattır. Sadece bir format öğrenecekseniz, bunu öğrenin.
RGB Renkleri
RGB gösterimi, kırmızı, yeşil ve mavi kanal değerlerini doğrudan 0 ile 255 arasında ondalık sayılar olarak belirtir.
rgb(255, 87, 51) şu anlama gelir:
- Kırmızı: 255 (maksimum)
- Yeşil: 87 (yaklaşık üçte bir)
- Mavi: 51 (yaklaşık beşte bir)
RGBA: Saydamlık Ekleme
RGBA, opaklık (alfa) için dördüncü bir değer ekler, 0 (tamamen saydam) ile 1 (tamamen opak) arasında:
rgba(255, 87, 51, 0.5) /* %50 saydam */
HSL Renkleri
HSL, Ton, Doygunluk, Aydınlık anlamına gelir. İnsanların renk hakkında doğal olarak düşündüğü şekilde rengi tanımlar.
Ton, renk çarkında derece olarak ifade edilen rengin kendisidir (0-360). Doygunluk, rengin ne kadar canlı olduğudur, %0 (gri) ile %100 (tam doygun) arasında. Aydınlık, rengin ne kadar açık veya koyu olduğudur, %0 (siyah) ile %100 (beyaz) arasında.
Biliyor muydunuz? HSL, en tasarımcı dostu renk formatı olarak kabul edilir çünkü renkleri doğal olarak nasıl tanımladığımızla örtüşür. "Biraz daha açık yap" L değerini artırmak demektir. "Daha az canlı yap" S değerini azaltmak demektir.
Hangisini Ne Zaman Kullanmalı?
| Format | En İyisi | Avantaj |
|---|---|---|
| HEX | CSS stil sayfaları, tasarım özellikleri | Kompakt, evrensel olarak anlaşılır |
| RGB | Programatik renk manipülasyonu | Sezgisel kanal değerleri |
| HSL | Tasarım çalışması, renk şemaları oluşturma | İnsan renk algısıyla eşleşir |
İpucu HEX, RGB, HSL ve daha fazlası arasında dönüştürün: Renk Kodlarını Dönüştürme. Herhangi bir formatta herhangi bir renk girin ve diğerlerini anında alın.
Renklerle çalışmaya başlayın:
Tüm araçlar ücretsizdir ve doğrudan tarayıcınızda çalışır.