HEX, RGB ve HSL: Aynı Rengin Üç Dili
Web'de her renk aynıdır ama üç farklı dille yazılır. HEX (#1a73e8 gibi), kırmızı-yeşil-mavi değerlerini onaltılık sayıyla sıkıştırır; CSS ve tasarım araçlarında en yaygın gösterimdir. RGB aynı üç kanalı 0–255 arası sayılarla açık açık yazar ve saydamlık eklemek (rgba) gerektiğinde devreye girer. HSL ise rengi insan algısına en yakın biçimde tanımlar: ton (0–360 derece), doygunluk ve açıklık. Bir rengin daha açık ya da daha soluk halini üretmek istediğinizde HSL'de yalnızca tek değeri değiştirmeniz yeterlidir.
Bu araca üç formattan hangisiyle girerseniz girin — kısa #abc gösterimi dahil — üçünü birden alırsınız. Ek olarak 10 kademeli bir ton skalası ve beyaz/siyah metin için WCAG kontrast testi sunulur. Tasarımcı, geliştirici ve içerik üreticilerinin gün içinde en sık tekrarladığı küçük işlerden biri böylece tek ekranda, üyelik ve kurulum gerektirmeden çözülür.
Nasıl Kullanılır?
- Renk kodunuzu yazın: #1a73e8, rgb(26, 115, 232) veya hsl(217, 82%, 51%) — hangisi elinizdeyse.
- Çevir'e tıklayın: Üç formatın tamamı kopyalanmaya hazır biçimde listelenir.
- Skalayı inceleyin: Beş açık tondan (tint) dört koyu tona (shade) uzanan 10 kademelik palet, hover ve arka plan varyasyonları için hazırdır.
- Kontrast rozetlerine bakın: Rengin üzerine beyaz veya siyah metin koyduğunuzda WCAG AA/AAA eşiklerini geçip geçmediğini görürsünüz.
Pratik Kullanım Senaryoları
- Tasarımdan koda geçiş: Tasarım dosyasındaki HEX değerini, CSS değişkenlerinde tercih ettiğiniz RGB/HSL biçimine anında çevirin.
- Buton durumları: Skaladaki bir tık koyu tonu hover, bir tık açığı disabled durumu için kullanın; palet tutarlı kalır.
- Marka paleti genişletme: Tek kurumsal renkten arka plan, kenarlık ve vurgu tonları üretin.
- Erişilebilirlik denetimi: Buton ve etiket renklerinizin üzerindeki metnin okunabilirliğini yayına almadan önce doğrulayın.
HEX Kodu Nasıl Okunur?
HEX kodun altı hanesi aslında üç çifttir: ilk çift kırmızı, ikinci çift yeşil, üçüncü çift mavi kanalın 0–255 arası değerini onaltılık sayıyla yazar. #1a73e8 örneğinde 1a (26) az kırmızı, 73 (115) orta yeşil, e8 (232) yüksek mavi demektir — sonuç canlı bir mavidir. #ffffff tüm kanalların tavanda olduğu beyaz, #000000 hepsinin sıfır olduğu siyahtır. Üç hane birbirini tekrar ediyorsa kısaltma kullanılır: #ffcc00 yerine #fc0 yazılabilir; araç bu kısa gösterimi de tanır. Bu mantığı bilmek, kodu görür görmez rengin kabaca hangi aileden olduğunu tahmin etmenizi sağlar: ilk çift yüksekse renk kırmızıya, son çift yüksekse maviye yakındır.
WCAG Kontrastı Neden Önemli?
WCAG (Web İçeriği Erişilebilirlik Kılavuzu), metinle arka planı arasında en az 4,5:1 kontrast oranı ister (AA seviyesi). Daha sıkı AAA seviyesi 7:1, büyük puntolu metin içinse 3:1 eşiği geçerlidir. Bu yalnızca görme engelli kullanıcılar için değil; parlak güneş altında telefon ekranına bakan herkes için fark yaratır. Düşük kontrastlı arayüzler form terk oranını artırır, dönüşümü düşürür. Araçtaki rozetler seçtiğiniz rengin beyaz ve siyah metinle bu eşikleri geçip geçmediğini anında gösterir; renk körlüğü simülasyonu yapılmaz, hesaplanan değer WCAG 2.x göreli parlaklık formülüne dayalı kontrast oranıdır.
İpuçları
- Gri tonlarda dikkat: Orta grinin (%40–60 açıklık) hem beyazla hem siyahla kontrastı zayıftır; metin rengi olarak kullanmaktan kaçının.
- HSL ile sistemleşin: Tema renklerinizi HSL değişkenleri olarak tanımlarsanız koyu tema türetmek tek satırlık açıklık değişikliğine iner.
- Skalayı kaydedin: Ürettiğiniz 10 kademeyi tasarım sisteminize "primary-50 … primary-900" gibi adlarla ekleyin; ekip aynı tonları kullanır.
- Yalnızca renge güvenmeyin: Hata ve başarı durumlarını renkle birlikte simge veya metinle de belirtin; bu, erişilebilirliğin renk seçiminden sonraki adımıdır.
- 60-30-10 kuralını deneyin: Arayüzün %60'ı nötr zemin, %30'u ikincil renk, %10'u vurgu rengi olduğunda palet dengeli görünür; skaladaki açık tonlar zemin, orijinal renk vurgu için biçilmiş kaftandır.
- Koyu temada tonu yumuşatın: Açık temadaki doygun renkler koyu zeminde "parlar" ve gözü yorar; koyu tema için skaladaki bir-iki kademe açık ve az doygun tonları tercih edin.
Tutarlı bir renk paleti, profesyonel görünümün en ucuz yapı taşıdır. Markanız için baştan sona bir görsel kimlik kurgulamak isterseniz kurumsal kimlik hizmetimize, paleti yaşayan bir arayüze dönüştürmek için web tasarım hizmetimize göz atın.