Bir rengi biraz daha açık yapmak istiyorsunuz. RGB değeriniz rgb(30, 100, 180). Hangi sayıyı artıracaksınız? Üçünü birden mi değiştireceksiniz? Beyaza doğru mu gideceksiniz, yoksa yalnızca parlaklığı mı artıracaksınız? Bu soruların cevabı RGB söz diziminde görünmüyor.
HSL bu problemi farklı bir açıdan çözer. Rengi "ne kadar kırmızı, ne kadar yeşil, ne kadar mavi" olarak tanımlamak yerine "hangi ton, ne kadar dolu, ne kadar parlak" olarak ifade eder. Üç bileşen, üç ayrı soruya karşılık gelir ve her biri bağımsız olarak değiştirilebilir.
Hue, Saturation, Lightness: her sayı ne anlatıyor
HSL'de üç değerin bağımsız çalışması şu anlama gelir: bir boyutu değiştirdiğinizde diğer ikisi sabit kalır. Hue (ton), 0-360 derece arasında bir renk çemberi üzerinde konumlanır — 0 ve 360 kırmızı, 120 yeşil, 240 mavidir. Aralarındaki geçişler süreklidir; 60 sarı, 180 camgöbeği, 300 magenta bölgesine denk gelir. Hue tek başına rengin kimliğini belirler, yoğunluğunu ya da parlaklığını söylemez.
Saturation (doygunluk) yüzde olarak çalışır. %100 tam doygun, canlı bir renk üretir; %0 ise hangi Hue değerini girdiğinizden bağımsız olarak gri üretir. Önemli olan nokta şu: Saturation'ı sıfırlamak Hue'yu silmez. Değer bellekte kalır; Saturation'ı tekrar artırdığınızda aynı ton geri gelir. %50 dolaylarında soluk, pastel bir görünüm elde edersiniz — bu bölge UI'da devre dışı öğeler, soluk etiketler veya pasif durumlar için sıkça kullanılır.
Lightness (parlaklık) da yüzde olarak çalışır. %50 temel değerdir; ne siyaha ne beyaza yakındır. %0 her zaman siyah, %100 her zaman beyaz üretir — Hue ve Saturation ne olursa olsun. Bunu sınamak kolaydır: hsl(214, 72%, 100%) yazdığınızda beyaz görürsünüz, mavi değil.
Üçü bir arada kontrolsüzce değiştirdiğinizde renk sistemi tutarsız hale gelir.
Hover durumunda bir rengi hafifçe açmak için Lightness'ı birkaç birim artırmanız yeterlidir — HEX kodunu yeniden hesaplamak zorunda kalmazsınız. Bir tasarım tokenini tema dosyasında güncellerken "birincil rengin daha açık tonu" demek, Hue sabit, Lightness artar anlamına gelir. RGB'de aynı işlem için üç kanalı aynı anda ve doğru oranda değiştirmeniz gerekirdi.
RGB ve HEX ile okunabilirlik farkı
| Format | Söz diziminde renk bilgisi var mı? | Rengi tahmin edebilir misiniz? | Tonu değiştirmek için ne lazım? |
|---|---|---|---|
#1e64b4 |
Hayır | 16'lık dönüşüm gerekir | Yeni HEX değer hesapla |
rgb(30, 100, 180) |
Kısmen | "Mavi baskın" söylenebilir, ton belirsiz | Üç kanalı birden güncelle |
hsl(214, 72%, 41%) |
Evet | Mavi-gök, orta doygun, biraz koyu | Yalnızca değişen boyutu güncelle |
HEX bu bilgiyi saklar.
Kod incelemelerinde veya tasarım sistemlerinde tema dosyasında onlarca renk değeri sıralandığında HSL formatı, hangisinin ana renk hangisinin açık ton olduğunu söz dizimine bakarak ayırt etmeyi kolaylaştırır. HEX renk kodunun nasıl yorumlandığı ayrı bir beceri gerektirirken HSL bu adımı atlatır.
CSS'te söz dizimi ve pratik örnekler
Modern CSS'te HSL değerleri iki söz dizimiyle yazılabilir:
/* Eski söz dizimi — virgüllü */
color: hsl(214, 72%, 41%);
/* Modern söz dizimi (CSS Color Level 4) */
color: hsl(214 72% 41%);
color: hsl(214deg 72% 41%);
Virgüllü form tüm tarayıcılarda desteklenir. Virgülsüz form CSS Color Level 4 spesifikasyonunun parçasıdır ve 2020 sonrasında piyasaya çıkan tarayıcıların tamamında desteklenir. Eski tarayıcıları geniş bir kullanıcı kitlesinde desteklemeniz gerekiyorsa virgüllü formu kullanın; aksi halde yeni projelerde tutarlılık açısından tek bir söz dizimini seçip codebase genelinde o formatta kalmak daha önemlidir.
Alpha kanalı için HSLA söz dizimi kullanılır:
/* Yarı saydam mavi */
background: hsla(214, 72%, 41%, 0.6);
/* Modern söz dizimi */
background: hsl(214 72% 41% / 0.6);
Alpha değeri 0 (tamamen saydam) ile 1 (tamamen opak) arasındadır. Modern söz diziminde eğik çizgiyle ayrılır. İkisi aynı sonucu üretir; tercih söz dizimi tutarlılığına bağlıdır.
Bir rengin hangi HSL değerine karşılık geldiğini bulmak için HEX ya da RGB değerini HSL'ye dönüştürmek en pratik yöntemdir. Mevcut bir tasarımı HSL sistemine taşırken bu adımı atlamamak gerekir — gözle tahmin edilen değerler tutarsızlık yaratır.
CSS değişkenleriyle dinamik renk sistemi
HSL'nin en güçlü tarafı CSS özel özellikleriyle (custom properties) birleştiğinde ortaya çıkar. Bir renk sistemini tek bir Hue değeri üzerine inşa etmek mümkündür:
:root {
--marka-h: 214;
--marka-s: 72%;
--renk-ana: hsl(var(--marka-h), var(--marka-s), 41%);
--renk-acik: hsl(var(--marka-h), var(--marka-s), 65%);
--renk-koyu: hsl(var(--marka-h), var(--marka-s), 25%);
--renk-soluk: hsl(var(--marka-h), 30%, 90%);
}
Bu yapıyla marka rengini değiştirmek için yalnızca --marka-h değerini güncellersiniz. Geri kalan tüm tonlar, açık ve koyu varyantlar, arka plan renkleri otomatik uyum sağlar. Aynı işlemi HEX ya da RGB ile yapmak için her değeri ayrı ayrı güncellemeniz gerekir.
Dark mode geçişi de bu yapıda kolaylaşır. Hue ve Saturation sabit kalırken Lightness değerlerini tersine çevirmek yeterlidir:
@media (prefers-color-scheme: dark) {
:root {
--renk-ana: hsl(var(--marka-h), var(--marka-s), 65%);
--renk-koyu: hsl(var(--marka-h), var(--marka-s), 85%);
--renk-soluk: hsl(var(--marka-h), 20%, 15%);
}
}
Tek bir medya sorgusu, tüm sistemi tersine çevirir. Renk başına ayrı dark mode kuralı yazmanız gerekmez.
HSL'nin sınırları ve yaygın yanılgılar
WCAG kontrast hesaplamalarında HSL değerleri işe yaramaz. Bunu bilmeden renk sistemi oluşturursanız erişilebilirlik denetimi sizi geri döndürür.
Neden? HSL algısal olarak tutarsızdır. Aynı Lightness değerini paylaşan iki renk gözde eşit parlaklıkta görünmez. Sarı hsl(60, 100%, 50%) ile mavi hsl(240, 100%, 50%)'yi yan yana koyduğunuzda sarı çok daha parlak hissettiriyor; insan gözünün sarı-yeşil bölgeye mavi bölgeden yaklaşık üç kat daha duyarlı olması bunu açıklar. WCAG kontrast hesaplamaları bu nedenle HSL üzerinden değil görece parlaklık (relative luminance) üzerinden yapılır — iki renk arasındaki oranın 4.5:1 eşiğini karşılayıp karşılamadığını HSL'ye bakarak söyleyemezsiniz.
Sık yapılan bir hata şudur: bir rengi karartmak için Lightness'ı düşürürsünüz, ama Saturation'ı sabit bırakırsınız. Koyu tonlarda %72 Saturation makul görünebilir; aynı Saturation değeriyle %85-90 Lightness'a çıktığınızda ise renk aşırı doygun, soluk zemin üzerinde çakışık bir hal alır. Açık tonlar için Saturation'ın düşürülmesi gerekir — bunu CSS değişkenlerine elle kodlamazsanız sistem görsel olarak tutarsız kalır.
Lightness ile HWB (Hue-Whiteness-Blackness) arasında da karışıklık yaşanır (bu ayrımı çoğu kaynak atlıyor). HWB, CSS Color Level 4 ile tanıtıldı ve rengi "ne kadar beyaz + ne kadar siyah" üzerinden tanımlar; algısal açıdan HSL'den daha sezgisel sayılır. Ancak tarayıcı desteği HSL kadar geniş değil — 2019 öncesi ortamları kapsayan projelerde HWB tercih edilemez.
Modern CSS renk standartları algısal tutarsızlığı çözmek için oklch ve oklab formatlarını getirdi. oklch'de aynı Lightness değeri gerçekten aynı parlak görünür. 2024 itibarıyla oklch Chrome, Firefox ve Safari'nin güncel sürümlerinde desteklenmektedir; HSL'nin sRGB renk uzayıyla sınırlı kaldığı Display P3 ekran senaryolarında da oklch doğru tercih olur.
Mevcut projenizde CSS değişkenleriyle renk sistemi kuruyorsanız ve erişilebilirlik denetimi planlamıyorsanız HSL hâlâ işlevsel bir seçimdir — marka rengini tek bir tokenda tutup tüm varyantları Lightness üzerinden türetmek, onlarca ayrı HEX değerini yönetmekten belirgin biçimde daha az bakım gerektirir. Yeni bir projeye başlıyorsanız veya WCAG AA/AAA uyumunu sistematik olarak doğrulamanız gerekiyorsa oklch ile başlamak, sonradan dönüştürmekten daha az maliyet çıkarır. RGB modeliyle birlikte değerlendirdiğinizde hangi formatın hangi bağlamda karşılığı olduğu netleşir.