HSL - HEX Dönüştürücü

HSL ve HEX: İki Renk Modeli Arasındaki Temel Farklar

HSL (Hue, Saturation, Lightness) insan algısına yakın bir renk modelidir. Ton, doygunluk ve parlaklık parametreleriyle çalışır; bu sayede bir rengin açıklığını veya koyuluğunu değiştirirken tonu koruyabilirsiniz. HEX (on altılı) kod ise RGB modelinin altı haneli (veya üç haneli kısa biçim) gösterimidir. Örneğin #1E90FF mavi tonunun standart CSS ifadesidir.

Bu sayfa, HSL değerlerini doğrudan HEX koduna dönüştürmek için özel olarak tasarlanmıştır. Çoğu araç üç-dört model arasında geçiş yaparken bu sayfa tek bir dönüşüme odaklanır. HSL’den HEX’e dönüşüm, sRGB gamutu içinde kayıpsızdır. LAB veya CMYK dönüşümlerindeki gibi gamut dışı renklerin ayarlanması gerekmez. HSL’den önce RGB’ye, ardından RGB’den HEX’e geçilir. RGB, HEX’in doğrudan temelini oluşturduğu için bu iki adım arasında hiçbir veri kaybı olmaz. Bu, modelin en önemli avantajıdır.

Sayfanın Sunduğu Girdi ve Çıktılar

Kullanıcı üç değer girer:

• Hue (renk tonu): 0–360 derece arası bir tamsayı. 0 kırmızı, 120 yeşil, 240 mavi.
• Saturation (doygunluk): %0–100 arası bir yüzde. %0 gri ton, %100 saf renk.
• Lightness (parlaklık): %0–100 arası. %0 siyah, %100 beyaz.

Girdi formatı örneği: 243, %75, %59. Dikkat: Yüzde işareti (%) doygunluk ve parlaklık için zorunludur. Yüzdesiz girilen değerler hata üretir.

Çıktılar anlık olarak güncellenir. Birincil çıktı altı haneli HEX kodu olur (örneğin #4f46e5). Eğer her RGB kanalı tek bir onaltılı haneyle ifade edilebiliyorsa, üç haneli kısa biçim de gösterilir (örneğin #abc). Bunun yanında RGB, HSV, CMYK ve LAB değerleri de eşzamanlı olarak hesaplanır. CMYK değerleri ekran için bir tahmindir; profesyonel baskı değerlerinden farklılık gösterebilir.

Tüm hesaplamalar tarayıcı içinde yapılır. Hiçbir veri sunucuya gönderilmez. Bu, gizlilik açısından önemli bir özelliktir.

Dönüşümün Teknik Detayları: HSL’den RGB’ye, RGB’den HEX’e

Dönüşüm iki aşamalıdır. İlk aşama HSL’den RGB’ye geçiştir. Standart algoritma şöyledir:

• H normalleştirilir (360’a bölünür).
• S ve L ondalık kesir haline getirilir.
• C = (1 - |2L - 1|) × S (kroma)
• X = C × (1 - |(H' / 60) mod 2 - 1|)
• m = L - C/2
• (R', G', B') değerleri H aralığına göre belirlenir.
• R = (R' + m) × 255, G ve B aynı şekilde.

İkinci aşamada RGB (0–255 arası) değerleri onaltılı tabana çevrilir. Her kanal iki haneli bir hex sayıya dönüşür. Örneğin 79 → 4F. Küçük veya büyük harf fark etmez; sayfada genellikle küçük harf kullanılır.

Eğer R, G, B’nin her biri 16’nın katıyla ifade edilebiliyorsa (yani 0, 17, 34, … 255) o zaman üç haneli kısa biçim kullanılabilir. Örneğin RGB(255, 0, 0) → #FF0000 veya #F00. Sayfa bu durumu otomatik olarak algılar ve ekrana kısa biçimi de getirir.

Bu algoritma sRGB gamutu içinde tanımlıdır. HSL değerleri geçerli aralıkta olduğu sürece dönüşüm daima görünür bir renk üretir. Herhangi bir gamut dışı ayarlama yapılmaz.

Sınır Değerler ve Yaygın Hatalar

Geçerli giriş aralıkları:

• Hue: 0–360 (dahil)
• Saturation: %0–%100
• Lightness: %0–%100

Bu aralıkların dışındaki değerler veya hatalı format hata mesajına yol açar. Sayfa şu mesajı gösterir:
“HSL'yi 0–360 arası hue ve iki yüzde olarak girin, örneğin 243, %75, %59.” (İngilizce: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”)

Sık karşılaşılan hatalar:

• Yüzde işaretinin unutulması: 75 yerine %75 yazılmazsa sayı geçersiz kabul edilir.
• Hue’nin 360’ı aşması: 400 derece girilirse hata alınır.
• Ondalık ayraç karışıklığı: Türkçe sistemlerde virgül ondalık ayraç olarak kullanılırken, sayısal girişte virgül normalse de format 243, %75, %59 şeklinde yazılmalıdır. Hue tamsayı olarak beklenir; ondalık kabul edilmez (ancak gerçekte bazı uygulamalar ondalık hue kabul edebilir, ama bu sayfa tamsayı bekler – kaynak sayfada belirtilmemiş ancak “hue 0–360” ifadesi tamsayı olduğunu düşündürür).
• Boşluk hataları: Değerler arasında virgül ve boşluk standardına uyulmalıdır.

Sayfa, her alanın anlık olarak güncellenmesi sayesinde kullanıcı hatalı bir değer girdiğinde hemen uyarı alır. Başka bir alanı değiştirmek tüm alanları yeniden hesaplar.

Kullanım Senaryoları: Tema Oluşturma, CSS ve Erişilebilirlik

Tasarımcılar ve ön yüz geliştiricileri için HSL’den HEX’e dönüşüm birçok pratik durumda gereklidir.

Renk paletleri oluşturma: HSL ile çalışan araçlarda (Figma, Sketch gibi) renk ailesinin tonu sabit tutulurken açıklık ve doygunluk değiştirilir. Elde edilen renkler tasarım sistemlerine HEX kodu olarak aktarılır. Bu sayfa, her bir tonu tek tek hesaplamak yerine anlık sonuç vererek iş akışını hızlandırır.

CSS’te uygulama: CSS değerleri genellikle HEX veya RGB yazılır. HSL değerlerini HEX’e dönüştürmek, özellikle statik stiller kullanıldığında gerekir. Örneğin bir tasarımcı hsl(243, 75%, 59%) verir, geliştirici buraya gelip #4f46e5 kodunu alır.

Erişilebilirlik (WCAG kontrastı): HSL modelinde parlaklık (L) değerini değiştirerek kontrast oranını ayarlamak kolaydır. Ardından bu yeni rengi HEX olarak alıp uygulamak, özellikle metin ve arka plan renkleri için kullanışlıdır. Örneğin bir buton rengini açmak için L değerini %70’e çıkarıp HEX’e dönüştürebilirsiniz.

Tema üretimi: Karanlık mod geçişlerinde aynı tonu koruyarak sadece L değeri değiştirilir. Elde edilen HEX kodları, tema değişkenlerinde kullanılır.

Sık Sorulan Sorular

HEX kodları büyük/küçük harf duyarlı mıdır?
Hayır, #4f46e5 ile #4F46E5 aynı rengi temsil eder. Sayfa genellikle küçük harf kullanır, ancak her iki biçim de geçerlidir.

Üç haneli HEX kodu her zaman kullanılabilir mi?
Yalnızca her RGB kanalı eşit aralıklıysa (örneğin 0, 17, 34, … 255) kullanılabilir. Örneğin #aabbcc → #abc. Ancak #4f46e5 için üç haneli kısaltma yoktur.

CMYK değerleri neden ekrandakilerden farklı çıkabilir?
CMYK değerleri burada yaklaşık bir dönüşümden elde edilir. Kağıt üzerindeki gerçek baskı, mürekkep profillerine ve kağıda bağlı olarak değişir. Bu değerler yalnızca fikir verme amaçlıdır.

HSL değerlerim ondalık içeriyorsa ne olur?
Sayfa hue için tamsayı bekler; ondalık hue girerseniz muhtemelen hata mesajı alırsınız. Doygunluk ve parlaklık yüzde olarak girildiği için ondalık olabilir (örneğin %75.5), ancak sayfanın buna izin verip vermediği kaynakta belirtilmemiştir. Kesin kullanım için tam sayılarla deneyin.

Dönüşüm sırasında renk gam değişir mi?
Hayır. HSL’den RGB’ye dönüşüm sRGB gamutu içinde kalır. HEX de RGB’nin doğrudan gösterimi olduğu için herhangi bir renk değişimi olmaz.

Sayfa hangi HSL aralıklarında çalışır?
Hue 0–360, doygunluk %0–%100, parlaklık %0–%100. Bu aralıkları aşan değerler kabul edilmez ve hata gösterilir.