Geliştiriciler Neden UI Renkleri İçin RGB'den HSL'ye Geçiyor?

HSL renk modeli (hue, saturation, lightness - ton, doygunluk, açıklık), CSS'te renklerle çalışırken RGB'ye kıyasla çok daha okunabilir bir yaklaşım sunar. Hangi kırmızı, yeşil ve mavi değer kombinasyonunun istediğin tonu ürettiğini tahmin etmeye çalışmak yerine, HSL rengi beyninin doğal olarak düşündüğü şekilde tanımlamana olanak tanır: bir renk seç, ne kadar canlı olduğuna karar ver, ardından ne kadar açık ya da koyu olacağını belirle. Bu zihinsel model farkı, pek çok geliştiricinin rgb() yerine hsl() tercih etmesinin tam da nedenidir.

RGB ve HSL - Temel Fark

RGB, rengi üç ışık kanalını karıştırarak tanımlar: kırmızı, yeşil ve mavi; her biri 0 ile 255 arasında bir değer alır. Sorun şu ki bu, ekranların pikselleri işleme biçimidir, insanların rengi algılama biçimi değil. RGB'de biraz daha açık bir mavi istediğinde üç kanalı da tam doğru oranda artırman gerekir; çevirebileceğin tek bir düğme yoktur.

HSL ise insanların rengi günlük dilde tanımlama biçimiyle doğrudan örtüşür:

• Hue (Ton) - gerçek rengin kendisi; 360 derecelik bir renk çemberinde derece cinsinden ifade edilir. Kırmızı 0, yeşil 120, mavi 240'tır.
• Saturation (Doygunluk) - rengin ne kadar canlı ya da soluk olduğu; 0% (saf gri) ile 100% (tam canlılık) arasında değişir.
• Lightness (Açıklık) - rengin ne kadar açık ya da koyu olduğu; 0% (siyah) ile 100% (beyaz) arasında, 50% ise "saf" rengi temsil eder.

Aynı orta tonda mavinin her iki formattaki ifadesi:

/* RGB - what do these numbers even mean at a glance? */
color: rgb(70, 130, 180);

/* HSL - instantly readable: blue hue, moderate saturation, medium lightness */
color: hsl(207, 44%, 49%);

İkisi de çelik mavisi üretir. Ama yalnızca HSL versiyonu bakışta anlamlı bir şey söyler. Ton 207 (mavimsi), doygunluk 44% ile orta düzeyde, açıklık ise 49% ile ortada. Renk seçici açmadan da üzerinde düşünebilirsin.

CSS'te HSL Sözdizimi

CSS'teki hsl() fonksiyonu CSS3'ten bu yana desteklenmektedir. Modern sözdizimi (CSS Color Level 4) aynı zamanda dördüncü bir alfa parametresini doğrudan hsl() içinde kullanmaya olanak tanır; bu da hsla() fonksiyonunu artık büyük ölçüde gereksiz kılar:

/* Classic syntax */
color: hsl(207, 44%, 49%);

/* With alpha (transparency) - old way */
color: hsla(207, 44%, 49%, 0.8);

/* Modern CSS Color Level 4 syntax - commas optional, alpha with slash */
color: hsl(207 44% 49%);
color: hsl(207 44% 49% / 0.8);
color: hsl(207 44% 49% / 80%);

Tüm büyük tarayıcılar her iki sözdizimini de destekler. Virgülsüz versiyon CSS'in ilerlediği yön olmakla birlikte, virgüllü versiyon Internet Explorer 9+ dahil her yerde çalışır.

HSL'nin UI Geliştirmede Öne Çıkma Nedenleri

HSL'nin gerçek gücü, bir rengin varyasyonlarını üretmen gerektiği anda ortaya çıkar; bu da UI çalışmalarında sürekli karşılaşılan bir durumdur.

Saniyeler içinde renk paleti oluşturmak

Diyelim ki marka rengin hsl(140, 70%, 45%) değerinde canlı bir yeşil. Bir hover durumu, devre dışı durumu ve açık bir arka plan tonu gerekiyor. HSL'de her seferinde yalnızca tek bir değere dokunursun:

--color-base:     hsl(140, 70%, 45%);  /* base green */
--color-hover:    hsl(140, 70%, 38%);  /* darker - just lower lightness */
--color-disabled: hsl(140, 20%, 65%);  /* washed out - lower saturation */
--color-tint:     hsl(140, 70%, 92%);  /* very light background tint */

Bunu renk seçici açmadan RGB'de tutarlı biçimde yapmaya çalış. Gerçekten zordur, çünkü ayrı bir eksen yoktur.

Analog ve tamamlayıcı renkler

Ton, renk çemberi üzerinde bir derece olduğundan, uyumlu paletler oluşturmak saf aritmetiktir. Analog renkler birbirinden 30 derece uzaktadır. Tamamlayıcı renkler ise 180 derece karşılıklıdır:

--primary:       hsl(210, 80%, 50%);   /* blue */
--analogous-1:   hsl(180, 80%, 50%);   /* cyan - 30 degrees left */
--analogous-2:   hsl(240, 80%, 50%);   /* purple - 30 degrees right */
--complementary: hsl(30, 80%, 50%);    /* orange - 180 degrees opposite */

Doygunluk ve açıklık aynı kalır, bu yüzden renkler tutarlı bir aile gibi hissettirır. Tailwind CSS ve Material Design gibi tasarım sistemlerinin renk skalalarını programatik olarak tam bu şekilde oluşturduğunu göreceksin.

Pratik CSS Örnekleri

HSL bileşenleriyle CSS özel özellikleri

En güçlü HSL kalıplarından biri, üç değeri ayrı CSS özel özelliklerine bölmektir. Bu sayede bunları istediğin yerde yeniden bir araya getirebilir ve bireysel kanalları anında değiştirebilirsin:

:root {
  --brand-h: 210;
  --brand-s: 80%;
  --brand-l: 50%;
  --brand-color: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
}

.button {
  background-color: var(--brand-color);
}

.button:hover {
  /* Just override lightness - no need to redefine the whole color */
  background-color: hsl(var(--brand-h), var(--brand-s), 40%);
}

.button:disabled {
  background-color: hsl(var(--brand-h), 20%, 70%);
}

Tam tonal skala oluşturmak

Tasarım sistemleri genellikle tek bir rengin 9-10 tonuna ihtiyaç duyar (Tailwind'in 50'den 950'ye kadar olan skalası gibi). HSL ile ton ve doygunluğu sabit tutarken açıklığı düzenli aralıklarla adımlayarak tüm skalayi oluşturabilirsin:

:root {
  --blue-50:  hsl(210, 80%, 95%);
  --blue-100: hsl(210, 80%, 87%);
  --blue-200: hsl(210, 80%, 76%);
  --blue-300: hsl(210, 80%, 65%);
  --blue-400: hsl(210, 80%, 55%);
  --blue-500: hsl(210, 80%, 50%);  /* base */
  --blue-600: hsl(210, 80%, 43%);
  --blue-700: hsl(210, 80%, 36%);
  --blue-800: hsl(210, 80%, 26%);
  --blue-900: hsl(210, 80%, 16%);
}

Renk formatlarının birbiriyle nasıl ilişkilendiğine daha ayrıntılı bakmak istersen, HEX'ten RGB'ye dönüşüm rehberi her formatın ne zaman doğru araç olduğu dahil CSS renk formatlarının tam resmini kapsamaktadır.

Hover Durumları, Tema ve Karanlık Mod

Hover ve focus durumları

HSL, hover durumlarını son derece kolaylaştırır. Tamamen ayrı bir renk tanımlamak yerine yalnızca açıklığı kaydırırsın:

.btn-primary {
  background: hsl(210, 80%, 50%);
  transition: background 0.2s ease;
}

.btn-primary:hover  { background: hsl(210, 80%, 43%); }
.btn-primary:active { background: hsl(210, 80%, 36%); }
.btn-primary:focus-visible {
  outline: 3px solid hsl(210, 80%, 70%);
}

Her durum açıkça temel renkle ilişkilidir. Bu kodu okuyan bir ekip arkadaşı, durumlar arasındaki ilişkiyi anında kavrar.

HSL değişkenleriyle tema oluşturmak

HSL, modern CSS tema yapısının omurgasıdır. Yalnızca tonu bir değişken olarak dışarıya açarak, kullanıcıların veya yöneticilerin tek bir sayıyı değiştirerek uygulamanın tüm renk şemasını değiştirmesine olanak tanıyabilirsin:

/* Default theme: blue */
:root {
  --theme-hue: 210;
}

/* Green theme - just swap the hue */
[data-theme="green"] {
  --theme-hue: 140;
}

/* Purple theme */
[data-theme="purple"] {
  --theme-hue: 270;
}

/* All components use the same hue variable */
.button      { background: hsl(var(--theme-hue), 75%, 50%); }
.link        { color: hsl(var(--theme-hue), 75%, 40%); }
.badge       { background: hsl(var(--theme-hue), 75%, 92%); color: hsl(var(--theme-hue), 75%, 25%); }
.focus-ring  { outline-color: hsl(var(--theme-hue), 75%, 65%); }

HSL ile karanlık mod

Karanlık mod, HSL'nin gerçekten öne çıktığı yerdir. Tamamen ayrı iki renk paleti yönetmek yerine, aynı ton içinde açıklık değerlerini tersine çevirirsin:

:root {
  --bg:   hsl(210, 20%, 98%);   /* near-white background */
  --text: hsl(210, 20%, 15%);   /* near-black text */
  --card: hsl(210, 20%, 93%);   /* slightly darker card */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   hsl(210, 20%, 10%);  /* flip: near-black background */
    --text: hsl(210, 20%, 90%);  /* flip: near-white text */
    --card: hsl(210, 20%, 15%);  /* slightly lighter card in dark */
  }
}

Ton (210) ve doygunluğun (20%) hiç değişmediğine dikkat et. Yalnızca açıklık tersine döner. Bu, karanlık modun aynı tasarımın sadece ters çevrilmiş hali gibi hissettirmesini sağlar; iyi bir karanlık modun tam olarak yapması gereken de budur.

Tarayıcı Desteği ve Uyumluluk

HSL mükemmel bir tarayıcı desteğine sahiptir. hsl() fonksiyonu şu sürümlerden itibaren kullanılabilmektedir:

• Chrome 1 (2008)
• Firefox 1 (2004)
• Safari 3.1 (2008)
• Internet Explorer 9 (2011)
• Edge 12 (2015)

Modern virgülsüz sözdizimi ( hsl(210 80% 50%) ) ve eğik çizgi-alfa sözdizimi ( hsl(210 80% 50% / 0.5) ), CSS Color Level 4 spesifikasyonunun bir parçasıdır ve 2023 itibarıyla tüm modern tarayıcılarda desteklenmektedir. IE11 desteğine ihtiyaç duyuyorsan (bu noktada nadir bir durum), virgüllü sözdiziminde kal.

HSL, RGB ve HEX formatları arasında geçiş yapmak ya da yalnızca tek bir format kabul eden araçlara renk aktarmak gerektiğinde renk seçici aracını kullanabilirsin.

HSL ve OKLCH - Sırada Ne Var?

HSL'nin ötesine geçmek istiyorsan, OKLCH hakkında bilgi sahibi olmaya değer. OKLCH, algısal olarak düzgün bir renk uzayıdır; yani açıklık veya chroma'daki eşit sayısal adımlar, insan gözüne gerçekten eşit adımlar gibi görünür. HSL bunu tam olarak garanti edemez.

HSL'nin sorunu şudur: aynı açıklık değerine sahip iki renk, algılanan parlaklık açısından çok farklı görünebilir. Örneğin hsl(60, 100%, 50%) (sarı), her ikisi de 50% açıklığa sahip olmasına karşın hsl(240, 100%, 50%) (mavi)'den çok daha parlak görünür. OKLCH bu sorunu giderir.

/* HSL - same lightness, different perceived brightness */
color: hsl(60, 100%, 50%);   /* yellow - looks very bright */
color: hsl(240, 100%, 50%);  /* blue - looks much darker */

/* OKLCH - same lightness, actually looks the same to the eye */
color: oklch(0.75 0.18 90);   /* yellow-ish */
color: oklch(0.75 0.18 260);  /* blue-ish - genuinely similar perceived brightness */

OKLCH aynı zamanda HSL'nin sınırlı kaldığı sRGB aralığının ötesine geçen geniş gamut renkleri (P3 ekran renkleri) de destekler. oklch() için tarayıcı desteği 2024 itibarıyla sağlamdır: Chrome 111+, Firefox 113+, Safari 15.4+.

Çoğu proje için şu an HSL pratik tatlı noktadır: okunabilir, sürdürülebilir, evrensel olarak desteklenen ve RGB'ye göre çok büyük bir iyileştirme. OKLCH ise matematiksel olarak tutarlı kontrast oranlarına ihtiyaç duyan bir tasarım sistemi oluşturuyorsan ya da geniş gamut ekranları hedeflemek istiyorsan doğru seçimdir.

Paleti oluştururken renk ilişkilerini görsel olarak keşfetmek istiyorsan, renk gezgini aracı HSL değerleriyle deneme yapmanı ve ton döndürme, doygunluk değişimi ile açıklık değişikliklerinin gerçek zamanlı olarak nasıl etkileşime girdiğini görmeni sağlar.

HSL renklerini tahmin yürütmeden seç

Renk seçici aracımız, ton, doygunluk ve açıklık değerlerini görsel olarak ayarlamanı ve ardından tam HSL renk modeli çıktısını doğrudan CSS'ine kopyalamanı sağlar; hiçbir zihinsel hesaplama gerekmez.

Renk Seçiciyi Dene →