RGB'den HSL'ye Dönüştürücü: Renk Modeli Çevirmeni

RGB’den HSL’ye Dönüştürücü

rgb(59, 130, 246) değeri hsl(217, %91, %60) değerine dönüşür. Ton 217° bu rengi renk çarkının mavi kısmına yerleştirir, %91 doygunluk neredeyse tamamen canlı olduğu anlamına gelir ve %60 parlaklık onu orta parlaklıkta yapar. HSL, renk kimliğini yoğunluktan ayırır ve bu da onu programatik olarak RGB’den çok daha kolay çalışılır hale getirir.

HSL Ne Anlama Gelir

HSL, Ton (Hue), Doygunluk (Saturation), Parlaklık (Lightness) anlamına gelir. Her bileşen bir rengin farklı bir özelliğini tanımlar:

Programatik Renk İçin HSL Neden Daha İyidir

RGB ile parlaklık için doğrudan bir kanal yoktur. rgb(59, 130, 246)’yı açmak için, üç kanalı da oranlarını koruyarak 255’e doğru ölçeklemeniz gerekir. Koyulaştırmak için 0’a doğru ölçekleyin. Matematik hataya açık ve sezgisel değildir.

HSL ile tek bir değer ayarlarsınız:

/* Temel renk */
--color: hsl(217, 91%, 60%);

/* Daha açık varyant */
--color-light: hsl(217, 91%, 75%);

/* Daha koyu varyant */
--color-dark: hsl(217, 91%, 40%);

/* Doygunluğu azaltılmış */
--color-muted: hsl(217, 30%, 60%);

/* Tamamlayıcı renk */
--color-complement: hsl(37, 91%, 60%);

CSS hsl() Fonksiyonu

CSS, HSL renklerini yerel olarak kabul eder:

/* Modern sözdizimi (CSS Renk Düzeyi 4) */
color: hsl(217 91% 60%);

/* Alfa ile */
color: hsl(217 91% 60% / 0.5);

/* Eski sözdizimi */
color: hsla(217, 91%, 60%, 0.5);

HSL Tasarım Sistemlerinde

HSL tabanlı özel özellikler, temalama için standart bir desendir:

:root {
  --brand-hue: 217;
  --brand-saturation: 91%;

  --color-50:  hsl(var(--brand-hue) var(--brand-saturation) 95%);
  --color-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --color-900: hsl(var(--brand-hue) var(--brand-saturation) 20%);
}

--brand-hue değişkenini değiştirin ve tüm ölçek kayar. Bu, tasarım sistemlerinde tek token temalamanın temelidir.

HSL Sınırlamaları

HSL sezgiseldir ancak algısal olarak tekdüze değildir. Aynı HSL parlaklık değerine sahip iki renk, insan gözüne eşit derecede parlak görünmez. hsl(60, %100, %50)’deki sarı, hsl(240, %100, %50)’deki maviden belirgin şekilde daha açık görünür.

Tonlar arasında görsel olarak tutarlı olması gereken renk sistemleri için (erişilebilirlik odaklı paletler, veri görselleştirme), oklch daha iyi bir seçimdir.