RGB'den HSL'ye dönüşüm nedir?
RGB, bir rengi Kırmızı, Yeşil ve Mavi ışığı karıştırarak tanımlar; her biri 0-255 aralığında bir değere sahiptir. HSL ise aynı rengi daha sezgisel üç sayıyla ifade eder: Ton (rengin 0-360° renk çemberindeki konumu), Doygunluk (rengin ne kadar canlı olduğu, %0-100) ve Parlaklık (ne kadar açık ya da koyu olduğu, %0-100). Tasarımcılar genellikle HSL ile çalışmayı daha kolay bulur; çünkü parlaklığı veya doygunluğu değiştirmek doğrudan "daha açık", "daha koyu", "daha canlı" ya da "daha gri" gibi sonuçlara karşılık gelir.
Bu dönüştürücü nasıl kullanılır?
Renginizin Kırmızı, Yeşil ve Mavi değerlerini her biri 0 ile 255 arasında olacak şekilde girin. Hesaplayıcı, anında ona denk gelen HSL üçlüsünü döndürür ve sonucu doğrudan CSS'e hsl(H, S%, L%) biçiminde yapıştırabilirsiniz.
Formül açıklaması
Önce her kanal 255'e bölünerek 0 ile 1 arasında bir değere normalize edilir. Bunların en büyüğüne max, en küçüğüne min diyelim. Parlaklık \(L = (max + min) / 2\) ile bulunur. Eğer max ile min eşitse renk bir gri tonudur; bu durumda hem doygunluk hem de ton 0 olur. Aksi halde doygunluk, \(L > 0{,}5\) iken \((max - min) / (2 - max - min)\), \(L \le 0{,}5\) iken ise \((max - min) / (max + min)\) olur. Ton, hangi kanalın en büyük olduğuna göre hesaplanır ve dereceye (0-360) ölçeklenir.
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
Örnek hesaplama
Domates kırmızısı RGB(255, 99, 71) için: normalize değerler = (1,0; 0,388; 0,278). \(max = 1{,}0\), \(min = 0{,}278\), dolayısıyla \(L = 0{,}639\) → %63,9. \(L > 0{,}5\) olduğundan $$S = \frac{1{,}0 - 0{,}278}{2 - 1{,}0 - 0{,}278} = \frac{0{,}722}{0{,}722} = 1{,}0 \to \%100.$$ En büyük değer kırmızıda olduğundan $$H = 60 \times \left(\frac{0{,}388 - 0{,}278}{0{,}722}\right) = 60 \times 0{,}1525 = 9{,}1^{\circ}.$$ Sonuç: hsl(9, 100%, 64%).
Sıkça sorulan sorular
Gri tonlarında ton neden 0 oluyor? Kırmızı, yeşil ve mavi eşit olduğunda baskın bir renk olmaz; bu nedenle ton tanımsızdır ve genel kabule göre 0 olarak verilir.
HSL ile HSV/HSB aynı şey mi? Hayır. HSL ve HSV aynı ton değerini paylaşır, ancak doygunluğu ve üçüncü değeri farklı şekilde hesaplar; bu araç HSL çıktısı verir.
Sonucu doğrudan CSS'e yapıştırabilir miyim? Evet — modern tarayıcılar hsl(9, 100%, 64%) ifadesini doğrudan bir renk değeri olarak kabul eder.
