HEX, RGB ve HSL Renk Rehberi

Bir renk modeli, renkleri sayısal değerler kullanarak tanımlayan matematiksel bir sistemdir. Ekranlar toplamsal ışık kullanır, yazıcılar çıkarımsal mürekkep kullanır, tasarımcılar ise sezgisel düzenleme için algısal modeller tercih eder.

Web ve uygulamalarda üç renk modeli öne çıkar: HEX, RGB ve HSL. Üçü de aynı renk uzayını tanımlar — sadece farklı notasyon biçimleridir. Bir renk dönüştürücü bu üç format arasında anında geçiş sağlar.

Aynı turuncu renk — HEX'te #FF5733 — RGB'de rgb(255, 87, 51), HSL'de ise hsl(11, 100%, 60%) olarak yazılır. Aynı renk, üç farklı notasyon.

HEX (hexadecimal / onaltılık), web'de en yaygın kullanılan renk formatıdır. # işareti ile başlar, ardından 0–9 ve A–F karakterlerinden oluşan altı haneli bir kod gelir.

Altı karakter üç çifte ayrılır: ilk iki hane Kırmızı (Red), ortadaki iki hane Yeşil (Green), son iki hane ise Mavi (Blue) kanalını temsil eder. Her çift 00 (hiç renk yok) ile FF (tam yoğunluk) arasında değer alır.

Örnek: #FF5733 — Red FF (255), Green 57 (87), Blue 33 (51). Bu kombinasyon turuncu-kırmızı bir ton üretir. HEX kısadır, kopyalanması kolaydır ve tüm tarayıcılar ile CSS tarafından doğrudan desteklenir.

Her çiftin tekrarlandığı renkler için kısayol kullanılabilir: #FFF = #FFFFFF, #09C = #0099CC.

RGB; Red (Kırmızı), Green (Yeşil), Blue (Mavi) anlamına gelir. Ekranlar (monitörler, telefonlar, televizyonlar) bu üç ışık kanalını karıştırarak tüm görünür renkleri üretir. Bu modele toplamsal renk modeli denir: üç kanal da tam yoğunlukta birleşince beyaz elde edilir.

CSS ayrıca rgba() notasyonunu da destekler. Dördüncü parametre olan alpha şeffaflığı kontrol eder: 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında değer alır. Overlay'ler, gölgeler ve cam efektleri için vazgeçilmezdir.

RGB, her ekranın ana dilidir. Tarayıcı HEX veya HSL değerini okuyunca pikselleri oluşturmadan önce içsel olarak RGB'ye dönüştürür.

HSL; Hue (Ton), Saturation (Doygunluk), Lightness (Parlaklık) demektir. HEX veya RGB'den farklı olarak HSL, rengi donanım kanalları üzerinden değil, insan algısına uygun biçimde tanımlar — bu da onu tasarım çalışmaları için çok daha sezgisel kılar.

Hue (Ton), temel rengi renk tekerleğindeki bir derece olarak ifade eder: 0° ve 360° kırmızı, 120° yeşil, 240° mavi. Saturation (Doygunluk) rengin canlılığını kontrol eder — 0% gri, 100% tam doygun. Lightness (Parlaklık) ise parlaklığı belirler — 0% siyah, 100% beyaz, 50% saf ton.

HSL'nin gerçek gücü CSS'te ortaya çıkar. Bir butonun hover efektini koyulaştırmak için yalnızca Parlaklık değerini düşürmek yeterlidir. Bir rengin soluk versiyonunu elde etmek için Doygunluğu azaltabilirsiniz. Bu değişiklikler önce dönüştürme yapmadan HEX veya RGB üzerinde okunamaz.

CSS ayrıca şeffaflık için hsla() ve CSS Color Level 4 ile gelen modern sözdizimi hsl(240 80% 50% / 0.7) formatını da destekler.

Renkler tek başına var olmaz. Renk uyumu, renklerin renk tekerleğindeki ilişkilerini ve belirli kombinasyonların neden doğal veya çarpıcı hissettirdiğini açıklar.

Bu prensipler doğrudan CSS değişkenlerine uygulanabilir. İyi bir tasarım sistemi, ana tonu HSL ile tanımlar; ardından açık-koyu tonlamalar ve vurgu renkleri Parlaklık ve Doygunluk değerleri değiştirilerek türetilir.

CSS, üç formatı da birbirinin yerine destekler. Doğru formatı seçmek bağlama göre değişir:

Modern tasarım sistemleri giderek artan oranda CSS özel özellikleri (değişkenler) kullanarak HSL bileşenlerini ayrı ayrı saklar: --color-hue: 240; — bu sayede bileşenler HEX değerlerini yeniden hesaplamak zorunda kalmadan parlaklığı veya doygunluğu dinamik olarak değiştirebilir.

Karanlık mod (dark mode) oluştururken HSL tema geçişini son derece kolaylaştırır: açık tema için Parlaklık aralığını (90–10%) karanlık tema (10–90%) ile tek bir değişken üzerinden tersine çevirmek yeterlidir.