HSL'den Hex'e Renk Dönüştürücü

Hesaplamaya Girin

Ton (0–360°)

Doygunluk (%0–100)

Parlaklık (%0–100)

Sonuç

Hex Renk Kodu

#4080BF

Kırmızı	64
Yeşil	128
Mavi	191
RGB	rgb(64, 128, 191)

HSL'den Hex'e dönüştürücü nedir?

Bu araç, HSL modeliyle ifade edilen bir rengi — yani Ton (Hue), Doygunluk (Saturation) ve Parlaklık (Lightness) değerlerini — CSS'te, tasarım programlarında ve web geliştirmede kullanılan onaltılık (hex) gösterime çevirir. HSL insanlar için sezgiseldir: ton, renk çarkında hangi rengi seçtiğinizi belirler; doygunluk rengin canlılığını ayarlar; parlaklık ise ne kadar koyu veya açık olacağını kontrol eder. Hex (örneğin #3F7FBF) ise tarayıcıların ve araçların gerçekte kullandığı formattır.

The HSL color model: hue (angle), saturation (radius) and lightness (height).

Nasıl kullanılır?

Tonu 0 ile 360 derece arasında, doygunluğu 0 ile 100 yüzde arasında ve parlaklığı 0 ile 100 yüzde arasında girin; ardından ortaya çıkan hex kodunu, RGB kanal değerlerini ve canlı renk örneğini görün. Dönüşüm evrenseldir, her renk için çalışır ve hiçbir program kurmanıza gerek yoktur.

Formülün açıklaması

Dönüşüm önce kroma değerini bulur:

$$C = (1 - |2L - 1|)\cdot S$$

burada S ve L, 0–1 aralığında ondalık değerlerdir.

$$X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)$$

yardımcı ifadesi ana renkler arasındaki geçişi yönetir;

$$m = L - \tfrac{C}{2}$$

parlaklık kaydırması ise sonucu doğru parlaklık seviyesine taşır. Tonun hangi 60°'lik dilime düştüğüne bağlı olarak (R′,G′,B′) kanalları C, X ve 0 değerlerinden atanır. Her bir kanalın son değeri \(\text{round}((c^{\prime} + m)\cdot 255)\) ile hesaplanır; hex dizesi ise R, G ve B değerlerinin iki haneli onaltılık karşılıklarının arka arkaya birleştirilmesinden oluşur.

Conversion flow: HSL values map to intermediate C, X, m, then to RGB and finally a hex string.

Örnek hesaplama

HSL(210, %50, %50) için: S = 0,5, L = 0,5; dolayısıyla \(C = (1 - |0|)\times 0{,}5 = 0{,}5\). H/60 = 3,5 olduğundan (3,5 mod 2) = 1,5 ve \(X = 0{,}5\times(1 - |0{,}5|) = 0{,}25\). \(m = 0{,}5 - 0{,}25 = 0{,}25\). 210 tonu 3. dilimdedir (180–240), bu da (R′,G′,B′) = (0, X, C) verir. Buna göre \(R = \text{round}(0{,}25\times 255) = 64\), \(G = \text{round}(0{,}5\times 255) = 128\), \(B = \text{round}(0{,}75\times 255) = 191\) → #4080BF.

A worked example: one color shown as HSL, RGB and its resulting hex code.

Sıkça sorulan sorular

Ton değeri başa döner mi? Evet — 360'lık bir ton, 0 ile aynı kırmızıdır ve araç her değeri 0–360 aralığına normalleştirir.

Kanallarım neden bazen birer birim sapıyor? En yakın tam sayıya yuvarlama, değeri kesip atan (truncate) diğer araçlara göre bir kanalı ±1 kaydırabilir; yuvarlama daha doğru bir tercihtir.

Gri elde edilebilir mi? Evet — doygunluğu 0 yapın ve herhangi bir ton seçin; üç kanal da \(\text{round}(L\times 255)\) değerine eşit olur ve nötr bir gri oluşur.