RGB ve HSL: Renk Modellerinin Temel Farkı
Bir ekranda gördüğünüz her renk, aslında üç ana ışık kaynağının – kırmızı (Red), yeşil (Green) ve mavi (Blue) – farklı şiddetlerde birleşmesiyle oluşur. Bu katkısal (additive) renk modeli, RGB olarak adlandırılır ve her kanal 0 (tamamen sönük) ile 255 (tamamen açık) arasında bir tamsayı değeri alır. Örneğin 79, 70, 229 değeri, düşük kırmızı ve yeşil, yüksek mavi içeren bir mor tonu verir. RGB, monitörler, telefon ekranları ve projeksiyon cihazları için doğrudan kullanılabilen bir donanım dilidir.
HSL (Hue, Saturation, Lightness) ise insan algısına daha yakın bir modeldir. Renk tonu (hue) 0–360 derecelik bir çember üzerinde ifade edilir. Doygunluk (saturation) rengin canlılığını yüzde olarak belirtir; %0 gri, %100 saf renktir. Açıklık (lightness) ise rengin siyah–beyaz eksenindeki konumunu gösterir; %0 siyah, %100 beyaz, %50 ise "normal" parlaklıktır. HSL’nin en kritik farkı, açıklığı değiştirirken renk tonunun sabit kalabilmesidir. RGB’de bir kanalı değiştirmek çoğu zaman algılanan rengi de kaydırırken, HSL’de sadece “daha koyu” veya “daha açık” bir versiyon elde edersiniz. Bu nedenle renk paletleri, temalar ve erişilebilir kontrast varyasyonları oluştururken HSL tercih edilir.
Bu sayfa, RGB’den HSL’ye anlık dönüşüm yaparak her iki modelin avantajlarını birleştirir. Ayrıca HEX, HSV, CMYK ve LAB çıktılarını da gösterir, böylece projenizde ihtiyaç duyduğunuz formatı kopyalayabilirsiniz.
Araç Nasıl Çalışır? Giriş ve Çıkışlar
Sayfada tek bir giriş alanına RGB değerlerini üç tamsayı olarak, virgül veya boşluk ile ayırarak yazarsınız. Örneğin 79, 70, 229 veya 79 70 229. Geçerli bir giriş yapıldığı anda tüm diğer alanlar güncellenir – HSL, HEX, HSV, CMYK ve LAB. Aynı şekilde HSL alanına bir değer yazarsanız (örneğin 243, %75, %59) geriye doğru dönüşüm yapılır ve RGB ile diğer formatlar yeniden hesaplanır. Tüm işlemler tarayıcınızda gerçekleşir; hiçbir veri sunucuya gönderilmez.
Geçersiz girişlerde net uyarı mesajları gösterilir:
- RGB için: “Enter RGB as three numbers 0–255, like 79, 70, 229.”
- HSL için: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
Düzenleme yapılan herhangi bir alan diğer tüm alanları anında tetikler. Bu sayede HEX kodu kopyalamak istediğinizde, HSL’yi ince ayar yaparken veya LAB referansı alırken tekrar tekrar dönüşüm yapmanız gerekmez.
RGB’den HSL’ye Dönüşümün Matematiği
Dönüşüm, standart bir algoritma izler. İlk adımda RGB değerleri 0–255 aralığından 0–1 aralığına normalize edilir: r = R / 255, g = G / 255, b = B / 255. Ardından bu üç değerin minimumu (min) ve maksimumu (max) bulunur. Açıklık (L) şu formülle hesaplanır:
L = (max + min) / 2
Doygunluk (S), açıklığa bağlıdır. Eğer max == min ise renk gridir ve doygunluk %0 olur. Aksi halde:
delta = max - min
if L <= 0.5:
S = delta / (max + min)
else:
S = delta / (2 - max - min)
Renk tonu (H) ise hangi kanalın maksimum olduğuna göre değişir:
max == rise:H = ( (g - b) / delta ) % 6max == gise:H = ( (b - r) / delta ) + 2max == bise:H = ( (r - g) / delta ) + 4
Sonuç 0–6 arası bir sayıdır; 60 ile çarpılarak dereceye çevrilir ve negatif değerler 360 eklenerek düzeltilir. Örneğin RGB 79, 70, 229 için normalize değerler 0.31, 0.27, 0.90 olur. max = 0.90 (mavi), min = 0.27. L = (0.90+0.27)/2 ≈ 0.585 → %58.5. delta = 0.63. L > 0.5 olduğundan S = 0.63 / (2 - 0.90 - 0.27) = 0.63 / 0.83 ≈ 0.759 → %75.9. Ton: mavi kanal maksimum olduğu için H = ((0.31-0.27)/0.63)+4 ≈ 4.064 → 4.064 × 60 ≈ 243.8°. HSL değeri 243.8°, %75.9, %58.5 olur.
Bu matematik, CSS hsl() fonksiyonları ve birçok grafik kütüphanesinde aynen kullanılır. Sayfadaki dönüşüm de bu standartlara uygun olarak çalışır.
HSL Neden Renk Paletleri ve Temalar İçin İdealdir?
Bir marka rengini alıp onun açık ve koyu varyantlarını oluşturmak istediğinizde, RGB ile çalışmak zahmetlidir. RGB kanallarını eşit oranda azaltmak genellikle rengin tonunu kaydırır. HSL ise açıklık kanalını değiştirerek tonu (hue) ve doygunluğu (saturation) sabit tutar. Örneğin 79, 70, 229 (HSL: 243°, %76, %59) renginin %40 açıklıktaki versiyonu aynı mor tonunda daha koyu bir görünüm verir. Bu işlem, CSS’de hsl(243deg, 76%, 40%) olarak yazılır.
Aynı prensip, renk tonu (tint – açıklığı artırarak), gölge (shade – açıklığı azaltarak) ve ton (tone – doygunluğu azaltarak) varyasyonlarını üretmek için kullanılır. Ön yüz geliştiriciler, tasarım tokenlerini RGB olarak aldıklarında, bunları HSL’ye çevirip CSS değişkenlerine atayarak dinamik tema oluşturabilirler. Örneğin karanlık modda sadece açıklık değerini düşürmek, tüm renk şemasının bütünlüğünü korur.
Veri görselleştirme tasarımcıları için de HSL caziptir. Sıralı renk skalaları genellikle açıklık kanalını kademeli olarak değiştirerek oluşturulur. İnsan gözü, HSL’deki açıklık farklarını algısal olarak daha doğal bulur.
Erişilebilirlik ve WCAG’de HSL Kullanımı
Web İçeriği Erişilebilirlik Yönergeleri (WCAG) metin ile arka plan arasında en az 4.5:1 (normal metin) veya 3:1 (büyük metin) kontrast oranı şartı koyar. Bu oranı RGB üzerinden hesaplamak mümkündür, ancak HSL sayesinde bir rengin kontrastını bozmadan sadece açıklığını ayarlayarak zorunlu oranı yakalamak çok daha kolaydır. Örneğin açık bir arka plan üzerinde koyu metin kullanmak istediğinizde, marka renginin HSL gösteriminde açıklığı %20’ye düşürerek kontrastı yeterli kılabilir, tonu değiştirmezsiniz. Bu, marka kimliğini korurken erişilebilirlik gereksinimlerini karşılamanın en pratik yoludur.
Sayfadaki dönüşüm, bu tür ince ayarları yaparken size anında geri bildirim verir. RGB üzerinden elle hesaplama yapmak yerine HSL’yi doğrudan düzenleyip diğer formatların nasıl değiştiğini gözlemleyebilirsiniz.
HSL’nin Sınırlamaları ve Alternatifler
HSL insan algısına RGB’den daha yakın olsa da mükemmel değildir. En büyük sınırlaması, algısal tekdüzelik (perceptual uniformity) eksikliğidir. Aynı açıklık değerine sahip sarı bir renk, mavi bir renkten çok daha parlak görünür. Çünkü insan gözü farklı dalga boylarına farklı duyarlılık gösterir. Bu nedenle HSL üzerinde yapılan açıklık geçişleri eşit algılanmaz. Daha doğru sonuçlar için LAB gibi algısal modeller kullanılır. LAB, insan görüşüne göre kalibre edilmiştir ve renk farkı ölçümlerinde (Delta E) standarttır.
Sayfadaki LAB çıktısı bu ihtiyacı karşılar. Ancak unutulmamalıdır ki LAB veya CMYK gibi geniş gamutlu modellerden girilen bir değer, sRGB gamutu dışına çıkabilir. Bu durumda araç, rengi en yakın görüntülenebilir değere ayarlar. Aynı rengi geri dönüştürdüğünüzde küçük bir kayma olabilir. Ayrıca CMYK çıktısı yalnızca ekran üzerinde bir tahmindir; profesyonel baskıda renk ayrımı için kullanılmamalıdır.
Bu sınırlamalara rağmen HSL, UI/UX tasarımı ve web geliştirme için pratik bir araç olmaya devam eder. CSS hsl() fonksiyonu tüm modern tarayıcılarda desteklenir ve JavaScript ile dinamik renk manipülasyonu için idealdir.
Sıkça Sorulan Sorular
1. RGB girişinde sayıların sırası önemli mi?
Evet. İlk sayı kırmızı, ikinci yeşil, üçüncü mavidir. Sırayı değiştirirseniz farklı bir renk elde edersiniz. Virgül veya boşluk kullanabilirsiniz.
2. HSL girişinde doygunluk ve açıklık yüzde olarak mı yazılmalı?
Evet. Yüzde işareti zorunludur; aksi halde giriş geçersiz kabul edilir. Örneğin 243, 75, 59 değil, 243, %75, %59 şeklinde yazılmalıdır.
3. CMYK çıktısı neden tahmini?
CMYK, baskı mürekkepleri için tasarlanmış bir modeldir ve her baskı makinesi, kağıt türü ve mürekkep kombinasyonu farklı sonuç verir. Ekrandan yapılan dönüşüm, genel bir dönüşüm profili kullanır; baskı öncesi mutlaka renk ayrımı yapılmalıdır.
4. LAB veya CMYK girerken renk kayması olur mu?
Eğer girdiğiniz LAB veya CMYK değeri sRGB gamutu dışında bir rengi temsil ediyorsa, araç görüntülenebilir en yakın renge kırpar. Bu nedenle dönüşümü tersine çevirdiğinizde asıl değeri elde edemeyebilirsiniz.
5. Bu aracı CSS’de HSL kullanırken referans olarak kullanabilir miyim?
Evet. HSL değerlerini doğrudan CSS hsl(243deg, 75%, 59%) şeklinde kullanabilirsiniz. Aynı şekilde HEX çıktısı da CSS # ile başlayan renk değerleri için uygundur.
6. Tüm tarayıcılarda çalışır mı?
Evet, dönüşüm tamamen JavaScript ile istemci tarafında yapılır. Herhangi bir modern tarayıcıda (Chrome, Firefox, Safari, Edge) sorunsuz çalışır.