HesapHanem

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

Rengi HSL'ye çevirmek için kırmızı, yeşil ve mavi değerlerini girin.

Nasıl hesaplanır?

Her kanal önce 0–255 aralığına sınırlanır, sonra 255'e bölünerek 0 ile 1 arasında r, g, b değerleri elde edilir. Üç değerin en büyüğü maks, en küçüğü min olmak üzere açıklık L = (maks + min) / 2 ile bulunur. Maks ile min eşitse renk gridir; ton ve doygunluk 0 olur. Değilse d = maks − min alınır ve L 0,5 veya altındayken doygunluk d / (maks + min), üstündeyken d / (2 − maks − min) olur. Ton baskın kanala göre hesaplanır: kırmızıda (g − b) / d, yeşilde (b − r) / d + 2, mavide (r − g) / d + 4; sonuç 60 ile çarpılarak derece elde edilir. Sonuçlar tam sayıya yuvarlanır, hex kodu da yuvarlanmış kanallardan üretilir.

Örnek hesaplama

R = 30, G = 144, B = 255 olsun. Normalize değerler: 0,118; 0,565; 1,000. Maks = 1,000 (mavi), min = 0,118 olduğundan L = (1,000 + 0,118) / 2 = 0,559 yani %56. L, 0,5'in üstünde olduğu için S = 0,882 / (2 − 1,000 − 0,118) = 1,00 yani %100. Baskın kanal mavi olduğundan H = ((0,118 − 0,565) / 0,882 + 4) × 60 = 209,6 ve 210° olarak yuvarlanır. Araç hsl(210, 100%, 56%) sonucunu verir; hex kodu #1E90FF olur.

Bu örneği dene →

Sık yapılan hatalar

  • Kanal değerlerini yüzde ya da 0–1 aralığında girmek. Araç 0–255 bekler; 0,5 yazarsanız yarım yoğunluk değil, neredeyse siyah elde edersiniz.
  • 255'ten büyük bir değerin otomatik ölçekleneceğini sanmak. Değer 255'e (0'ın altındakiler 0'a) sabitlenir; yani 300 ile 255 aynı rengi verir.
  • HSL ile HSV/HSB'yi karıştırmak. Buradaki L, maks ile min'in ortası olduğu için saf mavi %50 açıklıktadır; HSV'deki değer olsaydı %100 çıkardı.
  • Gri renklerde ton beklemek. R, G ve B eşitse ton 0°, doygunluk %0 olur; yalnızca açıklık bilgi taşır.
  • Yuvarlanmış H, S, L değerlerinden orijinal rengi birebir geri almayı beklemek. Tam sayıya yuvarlama bir kanalda bir iki birimlik kaymaya yol açabilir.

Bu hesaplama hakkında

RGB'yi HSL'ye çevirmek için önce her kanal 0–1 aralığına normalize edilir; parlaklık L = (maks + min) ÷ 2 olarak bulunur, doygunluk maks ve min kanalları arasındaki farkın L'ye göre ne kadar büyük olduğuna bağlıdır, ton (hue) ise hangi kanalın (kırmızı, yeşil veya mavi) en büyük olduğuna ve ne kadar büyük olduğuna göre renk çemberinde 0° ile 360° arasında bir açı olarak türetilir.

RGB'de bir rengin parlaklığını değiştirmek üç kanalı birlikte ayarlamak anlamına gelirken, HSL ton, doygunluk ve parlaklığı birbirinden bağımsız değerlere ayırarak işi çok daha kolay hale getirir — örneğin bir rengi açmak, ton ve doygunluğu sabit tutarak yalnızca L'yi artırmaktır. Web ve arayüz tasarımcıları, temel bir marka renginden tutarlı renk paletleri ve hover/aktif durum varyantları oluşturmak için CSS'te HSL'yi (ve bu dönüştürücüyü) kullanır.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    Düğme paleti hazırlarken sonuçtaki ton ve doygunluğu olduğu gibi tutup yalnızca açıklığı oynatın: hsl(219, 100%, 56%) rengi fare üzerine gelme durumu için hsl(219, 100%, 48%) olabilir. Bir uyarı: aynı açıklık değeri aynı kontrast demek değildir. Yüzde 50 açıklıktaki bir sarı ile bir mavi parlaklık olarak çok farklı görünür; bu yüzden metnin okunurluğunu arka planla ayrıca denetlemek gerekir. Hangi marka rengini palete dönüştürüyorsunuz?

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (VKİ)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar