HEX Renk Kodları: Altı Haneli ve Üç Haneli Yazım
HEX renk kodları, altı haneli (#1E90FF) veya üç haneli (#abc) kısa yazımlarıyla, RGB bileşenlerini onaltılık (16 tabanlı) olarak ifade eder. Altı haneli bir HEX kodunda her iki basamak bir kanalı temsil eder: ilk iki basamak kırmızı (R), ortadaki iki basamak yeşil (G), son iki basamak mavi (B). Her bir çift 00 ile FF arasında değer alır; bu da 0 ile 255 arasındaki 256 farklı yoğunluğu gösterir. Örneğin #1E90FF kodunda kırmızı=30, yeşil=144, mavi=255 demektir.
Üç haneli kısa yazım, her kanal için tek bir onaltılık basamak kullanır. Tarayıcılar bu kodu otomatik olarak altı haneli hale genişletir: her basamak kendi içinde iki kez yazılır. Yani #abc aslında #aabbcc demektir. Bu kısa yazım, özellikle az sayıda renk varyasyonu olan temalar veya basit prototipler için kullanışlıdır. Ancak 16 milyondan fazla olası rengin sadece 4096'sı (16³) bu şekilde ifade edilebilir.
Girdi alanına HEX kodunu # işareti ile veya işaretsiz yazabilirsiniz (#4f46e5 ya da 4f46e5 aynı sonucu verir). Geçersiz bir giriş yapıldığında — örneğin geçerli onaltılık karakterler dışında bir harf veya yanlış sayıda basamak — sayfa şu hatayı gösterir: “Enter a hex color like #4f46e5 or #abc.” Hata mesajı hem altı haneli hem de üç haneli kodun doğru biçimini örnekleyerek kullanıcıyı hızlıca yönlendirir. Ayrıca standart HEX (altı haneli veya üç haneli) alfa kanalı (şeffaflık) içermediği için bu dönüşüm her zaman tam opak renklerle çalışır.
HSL’in Yapısı: Derece, Yüzde ve Açıklık
HSL (Hue, Saturation, Lightness) rengi üç bileşenle tanımlar: hue (renk tonu) 0–360 derece arasında bir açıdır ve renk çarkındaki konumu belirler. 0 derece kırmızı, 120 derece yeşil, 240 derece mavidir. Ara açılar turuncu, sarı, camgöbeği, mor gibi tüm tayfı kapsar. Saturation (doygunluk) %0–100 arasında bir yüzdedir; %0 tam gri (renksiz), %100 ise maksimum renk yoğunluğu anlamına gelir. Lightness (açıklık) %0–100 arasında bir yüzdedir; %0 siyah, %100 beyazdır. %50 değeri ise rengin “normal” tonunu verir.
Bu yapı, HEX’in ham sayısal gösteriminden farklı olarak insan mantığı için tasarlanmıştır. HEX’te bir rengin koyulaştırılmış bir varyantını elde etmek için tüm kanal değerlerini hangi oranda düşüreceğinizi kestirmek zordur. HSL’de ise açıklığı düşürmek yeterlidir — hue değişmez. Bu nedenle HSL, renk paletleri ve tema sistemleri oluşturmak için tercih edilen formattır. Örneğin hsl(210, 60%, 50%) mavimsi bir renk iken hsl(210, 60%, 40%) %80 açıklıkla aynı mavi tonunun daha koyu halidir.
HEX’ten HSL’ye Dönüşümün Temeli
Dönüşümün temelinde RGB’den HSL’ye standart bir algoritma bulunur. Adımlar şöyledir:
- HEX değerindeki her kanal (örn.
1E= 30) 0–255 aralığından 0–1 aralığına normalize edilir (30/255 = 0,1176). - R, G, B değerleri arasında en büyük (max) ve en küçük (min) bulunur.
- Lightness (L) = (max + min) / 2 formülüyle hesaplanır.
- Eğer max = min ise renk gridir ve saturation sıfırdır. Aksi halde saturation şöyle bulunur:
- L ≤ 0,5 ise S = (max − min) / (max + min)
- L > 0,5 ise S = (max − min) / (2 − max − min)
- Hue (H) ise hangi kanalın max olduğuna göre belirlenir:
- max = R ise H = (G − B) / (max − min) × 60
- max = G ise H = 120 + (B − R) / (max − min) × 60
- max = B ise H = 240 + (R − G) / (max − min) × 60
- H negatif çıkarsa 360 eklenir.
Bu hesaplamalar sayfa içinde anlık olarak yapılır. Dönüşüm JavaScript ile tarayıcıda gerçekleşir; hiçbir veri sunucuya gönderilmez veya saklanmaz. HSL değerleri yuvarlanarak görüntülenir: hue tam sayı derece, saturation ve lightness ise % cinsinden bir ondalık basamakla (ör. hsl(210, 60,0%, 50,0%)).
HSL Neden HEX’ten Daha Sezgiseldir?
HEX, RGB bileşenlerini saklamak için kompakt bir biçim olsa da renkleri insanın nasıl algıladığıyla doğrudan bağlantılı değildir. Örneğin #7B68EE koduna bakarak bunun açık mor olduğunu tahmin etmek güçtür. HSL’de ise hsl(248, 60,0%, 67,1%) yazılıdır ve hemen anlaşılır: 248 derece menekşe-mavi arası bir ton, %60 doygun, %67 açık.
Palet oluşturma işlerinde HSL’nin üstünlüğü belirgindir. Tasarımcı bir ana renk belirler (ör. hsl(0, 80%, 50%) — kırmızı). Aynı paletteki diğer renkler için sadece doygunluk ve açıklığı ayarlar: hsl(0, 60%, 40%) (koyu kırmızı), hsl(0, 40%, 70%) (soluk kırmızı). HEX ile aynı işi yapmak her varyant için üç ayrı kanalı yeniden hesaplamayı gerektirir.
Erişilebilirlik denetçileri de HSL’yi kullanışlı bulur. WCAG kontrast oranı gereksinimini karşılamak için metin rengini arka plana göre açıp koyulaştırmak HSL’de tek bir sayıyla (lightness) yapılır. Örneğin beyaz arka plan üzerinde hsl(0, 80%, 50%) kırmızı metin yeterli kontrast vermiyorsa lightness %40’a düşürülerek aynı tonda daha koyu bir metin elde edilir.
Renk Gamı ve Uyarılar
Sayfa, HEX girişine karşılık gelen rengi aynı anda RGB, HSV, CMYK ve LAB gibi diğer renk uzaylarında da gösterir. Ancak bu formatlar arasında geçiş yaparken iki önemli sınırlama vardır.
İlki, bazı LAB veya CMYK değerleri RGB gamının dışındadır. Yani gözün görebildiği bir renk olsa bile monitör ekranı bunu tam olarak gösteremez. Bu durumda sayfa, girilen değeri en yakın gösterilebilir renge ayarlar. Bu ayarlamayı fark etmek her zaman kolay olmayabilir; ancak dönüşümü tekrar HEX’e çevirdiğinizde en ufak bir kayma görebilirsiniz. Örneğin LAB’daki L=50, a=-30, b=80 gibi bir değer, sRGB gamı dışına düşüyorsa, en yakın sRGB rengine yuvarlanır ve orijinal girilen HEX’ten farklı çıkar.
İkinci uyarı CMYK ile ilgilidir. CMYK değerleri bu araçta matematiksel bir dönüşümle hesaplanır ve ekranda gördüğünüz bir tahmindir. Profesyonel baskıda kullanmadan önce mutlaka bir kalibrasyon cihazı veya ICC profili ile doğrulama yapmanız gerekir. Aynı CMYK değeri farklı kâğıt türlerinde, farklı mürekkeplerde ve farklı baskı makinelerinde çok farklı görünebilir.
Tüm hesaplamalar tarayıcınızda çalışır. Sayfa, hiçbir kullanıcı verisini toplamaz, kaydetmez veya üçüncü taraflara göndermez.
Web Geliştirmede HSL Kullanım Alanları
Front-end geliştiriciler için HSL, CSS içinde doğrudan kullanılabildiği için idealdir. Modern tarayıcılar hsl() fonksiyonunu tam olarak destekler. Ayrıca CSS custom properties ile birlikte kullanıldığında çok güçlü hale gelir:
:root {
--primary-h: 210;
--primary-s: 60%;
--primary-l: 50%;
}
.button {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
.button:hover {
background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%));
}
Bu yöntemle bir sitedeki tüm butonların hover rengini tek bir --primary-l değişkenini değiştirerek ayarlayabilirsiniz. Aynı mantık koyu/aydınlık temalar için de geçerlidir. Karanlık temada tüm renklerin açıklığını bir miktar düşürmek yeterlidir. Hue ve doygunluk korunduğu için tema bütünlüğü bozulmaz.
HSL ayrıca JavaScript ile dinamik renk üretmede de yaygın kullanılır. Bir kullanıcı #4f46e5 gibi bir HEX verdiğinde bunu HSL’ye çevirip 60 derece ekleyerek tamamlayıcı rengi (hsl(270, 50%, 45%)) oluşturmak, renk tekerleğinde zıt tonları bulmak veya bir dizi renk oluşturmak gibi işlemler kolaylaşır.
HSL ve HSV (Hue, Saturation, Value) sıkça karıştırılır. İkisi de hue kullanır, ancak HSV lightness yerine brightness (değer) kullanır. HSL’de açıklık siyahtan beyaza giderken, HSV’de değer siyahtan tam parlaklığa gider. Bu nedenle aynı hue ve doygunluk değerlerinde HSL ve HSV farklı renk tonları üretir. HSL, insan algısına daha yakın kabul edilir ve web erişilebilirliği hesaplamalarında daha tutarlı sonuç verir.
Sıkça Sorulan Sorular (SSS)
Geçerli bir HEX kodu nasıl yazılmalı?
Altı haneli (#1E90FF) veya üç haneli (#abc) onaltılık bir kod olmalı. Başındaki # isteğe bağlıdır. Sadece 0-9 ve A-F (büyük/küçük fark etmez) karakterlerine izin verilir. Geçersiz girişlerde hata mesajı gösterilir.
HSL çıktısındaki değerler ne anlama geliyor?
Hue (H) 0–360 derece arasında renk tekerleğindeki açıyı, Saturation (S) %0–100 arasında renk yoğunluğunu, Lightness (L) %0–100 arasında siyahtan beyaza açıklığı belirtir. Örneğin hsl(0, 100%, 50%) saf kırmızıdır.
CMYK değerleri profesyonel baskıda güvenilir midir? Hayır, sayfadaki CMYK değerleri yalnızca bir ekran tahminidir. Kesin baskı sonuçları için kalibre edilmiş bir monitör ve ICC profili kullanmanız gerekir. Aynı CMYK değeri farklı kâğıt ve mürekkep kombinasyonlarında farklı görünebilir.
Renkler nerede hesaplanıyor? Tüm dönüşümler tarayıcı içinde JavaScript ile yapılır. Sunucuya herhangi bir veri gönderilmez, hiçbir şey kaydedilmez veya üçüncü taraflarla paylaşılmaz.
Üç haneli HEX ile altı haneli HEX arasındaki fark nedir?
Üç haneli (ör. #abc) aslında #aabbcc ile aynıdır. Her basamak iki kez yazılır. Bu nedenle üç haneli kodlar 4096 renkle sınırlıdır (altı haneli 16,7 milyon renk sunar). Çoğu durumda üç haneli kod yeterlidir ancak ince renk farkları gerekiyorsa altı haneli kullanılmalıdır.
HSL’den HEX’e dönüşüm sırasında renk kaybı yaşanır mı? HSL değerleri teorik olarak sürekli bir aralığı kapsarken, HEX (RGB) 256 ayrık değere sahiptir. Bu nedenle bir HSL değerinden HEX’e geçişte yuvarlama kaynaklı küçük sapmalar olabilir. Ancak insan gözü bu farkı genellikle fark etmez.