Hex'ten HSL'ye Renk Dönüştürücü Nedir?
Bu araç, on altılık (hexadecimal) bir renk kodunu — CSS ve tasarım yazılımlarında sıkça gördüğümüz #RRGGBB gösterimini — HSL renk modeline çevirir: Ton (Hue), Doygunluk (Saturation) ve Parlaklık (Lightness). HSL çoğu zaman hex ya da RGB'den daha anlaşılırdır; çünkü rengi tıpkı insanların düşündüğü biçimde tarif eder: hangi renk olduğu (ton), ne kadar canlı olduğu (doygunluk) ve açık mı koyu mu olduğu (parlaklık). Standart sRGB hex gösterimi dışında herhangi bir ülke ya da standarda bağlı olmadan, RGB tabanlı tüm renkler için evrensel olarak çalışır.
Nasıl Kullanılır?
#3498DB gibi bir hex renk değeri girin. Baştaki # işaretini koyabilir ya da atlayabilirsiniz; #0AF gibi üç haneli kısa yazımlar otomatik olarak #00AAFF şekline genişletilir. Dönüştürücü, karşılık gelen HSL üçlüsünün yanı sıra kırmızı, yeşil ve mavi kanal değerlerini (0–255) de çözümleyerek verir.
Formül Açıklaması
Önce hex değeri kırmızı, yeşil ve mavi baytlarına ayrılır ve her biri 255'e bölünerek 0–1 aralığına normalize edilir. Bu üç değerin en büyüğüne max, en küçüğüne min diyelim. Parlaklık basitçe bunların ortalamasıdır:
$$L = \frac{\max + \min}{2}$$max ile min eşitse (yani gri bir ton) doygunluk 0 olur. Aksi hâlde, eğer \(L > 0.5\) ise \(S = \dfrac{\max - \min}{2 - \max - \min}\), değilse \(S = \dfrac{\max - \min}{\max + \min}\). Ton ise hangi kanalın en büyük olduğuna bağlıdır ve 60 ile çarpılarak dereceye ölçeklenir:
$$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
Adım Adım Örnek
#3498DB değerini ele alalım: R = 52, G = 152, B = 219. Normalize edilmiş hâli: r ≈ 0.2039, g ≈ 0.5961, b ≈ 0.8588. max = b = 0.8588, min = r = 0.2039 olur, dolayısıyla \(L = 0.5314\) (yani %53,14). \(L > 0.5\) olduğundan \(S = \dfrac{0.6549}{2 - 1.0627} = 0.6987\) (%69,87). En büyük değer mavi olduğu için \(H = 60 \times \left(4 + \dfrac{0.2039 - 0.5961}{0.6549}\right) = 60 \times 3.4011 \approx 204{,}07^{\circ}\). Sonuç: hsl(204, 70%, 53%).
Sıkça Sorulan Sorular
Kısa hex yazımını kabul ediyor mu? Evet — #F0C gibi üç haneli kodlar otomatik olarak genişletilir.
HSL değerleri tam doğru mu? Ton, doygunluk ve parlaklık tam hassasiyetle hesaplanır ve yalnızca ekranda gösterilmek üzere yuvarlanır; ham değerlere de erişebilirsiniz.
Diyez (#) işareti zorunlu mu? Hayır, dönüştürücü baştaki # işareti olsa da olmasa da değeri işler.
