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

HSL'den RGB'ye Dönüşüm: Renk Modelleri Arasında Köprü

HSL Neden İnsan İçin, RGB Neden Ekran İçin

HSL (Hue-Saturation-Lightness) renk modeli, insanın renk algısına göre tasarlanmıştır. Üç parametresi vardır: hue (renk tonu) 0-360 derece arasında, saturation (doygunluk) yüzde olarak, lightness (parlaklık) yine yüzde olarak ifade edilir. İnsan beyni renkleri "kırmızımsı bir ton, canlılık seviyesi şu, ne kadar parlak olduğu bu" şeklinde düzenler. HSL tam olarak bu mantığı dijitale taşır.

RGB (Red-Green-Blue) ise bir ekranın fiziksel gerçekliğidir. Her piksel, üç alt pikselin (kırmızı, yeşil, mavi) her birine 0 ile 255 arasında bir tamsayı atanarak oluşturulur. 0 tamamen kapalı, 255 tamamen açık demektir. Bu üç değerin birleşimi, 16,7 milyondan fazla renk üretir (256³ = 16.777.216). RGB, insanın düşünme biçimine değil, ışık emisyonunun fiziksel katmanına hitap eder.

HSL'yi RGB'ye çeviren bir araç, tasarımcının soyut düşünce dünyasıyla donanımın sayısal gerçeği arasında köprü kurar. HSL'de parlaklığı değiştirdiğinizde renk tonu bozulmaz; RGB'de aynı işlemi yapmak için üç kanalı da aynı anda ve doğru oranlarda değiştirmeniz gerekir. İşte tam bu noktada dönüşüm aracı devreye girer.

Bu Aracı Farklı Kılan Nedir

Bu sayfanın sunduğu HSL-RGB dönüşümü, tüm renk modelleri arasında en kayıpsız geçişlerden biridir. Her geçerli HSL değeri, ekranın gösterebileceği tek bir RGB üçlüsüne karşılık gelir. Bunun aksine, LAB veya CMYK'dan RGB'ye dönüşümlerde gamut dışı renkler sıkıştırılır, o renk başka bir renge kayar. HSL'den RGB'ye geçişte böyle bir kayıp yoktur: tüm HSL aralığı doğrudan RGB uzayının içindedir.

Araç, girdiğiniz HSL değerini anında altı farklı renk modeline çevirir:

• HEX (altı haneli onaltılık kod)
• RGB (üç sayı, 0-255 arası)
• HSL (tekrar doğrulama için)
• HSV (Hue-Saturation-Value)
• CMYK (Cyan-Magenta-Yellow-Key)
• LAB (uluslararası renk uzayı)

CMYK çıktısı yalnızca ekran tahminidir. Gerçek matbaa baskısında kağıt, mürekkep ve yazıcı profili nedeniyle değerler farklılaşır. Bu ayrımı bilmek, baskıya gidecek bir tasarımda yanlış anlamaları önler.

Dönüşümün Arkasındaki Matematik

HSL'den RGB'ye geçiş, iki adımdan oluşur. İlki, HSL değerlerini normalize etmektir: hue'yu 0-1 aralığına bölün, saturation ve lightness'ı doğrudan ondalıklı sayı olarak alın. İkinci adımda, bir dizi koşullu işlev bu normalize edilmiş değerleri RGB'ye dönüştürür.

Formül şöyle çalışır: Önce lightness değerine göre bir geçici renk kanalı hesaplanır. Eğer lightness 0,5'in altındaysa temp = L * (1.0 + S), üstündeyse temp = L + S - L * S. Ardından sat = 2.0 * L - temp bulunur. Hue'nun ondalıklı kısmı altı eşit bölgeye ayrılır (hue/60), her bölge için kırmızı, yeşil ve mavi değerleri ayrı ayrı hesaplanır. Sonuç 0-255 aralığına ölçeklenir.

Örnekte 243°, %75, %59 değerini ele alalım:

• Hue 243/360 = 0,675
• Lightness 0,59
• Saturation 0,75
• Hesaplamalar sonunda kırmızı = 79, yeşil = 70, mavi = 229
• Bu, somut olarak 79, 70, 229 RGB üçlüsüne dönüşür.

Bu dönüşümün en büyük avantajı, bilgisayarınızın tarayıcısında gerçekleşmesidir. Hiçbir veri sunucuya gönderilmez. Gizlilik kaygısı olmadan çalışabilirsiniz.

Renk Modelleri Arasındaki Farklar

HEX aslında RGB'nin onaltılık gösterimidir: #4F46E5 ifadesi, ondalık 79,70,229 RGB üçlüsünün 4F, 46, E5 olarak kodlanmış halidir. Web geliştiricileri CSS'de sıkça HEX kullanır, ancak HSL'nin okunabilirliği daha yüksektir: hsl(243, 75%, 59%) ne anlama geldiğini az çok tahmin edebilirsiniz, oysa #4F46E5 yalnızca bir koddur.

Sık Yapılan Hatalar ve Edge Case'ler

En yaygın hata, HSL değerlerini yanlış biçimde girmektir. Araç, tam olarak "hue 0-360 arası tek sayı, ardından virgül, yüzde işaretli iki sayı" formatını bekler. Örneğin 243, 75%, 59% doğru, 243, 75, 59 yanlıştır. İkincisinde saturation ve lightness yüzde olarak girilmediği için araç hata mesajı verir: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

Bir başka hata, hue değerini 360'ın üzerinde girmektir. 360 derece renk çemberinin tamamını kapsar; 400 derece geçersizdir. Benzer şekilde, doygunluk ve parlaklık 0-100 aralığı dışına çıkamaz.

Edge case'ler arasında en ilginci, saturation = %0 veya lightness = %0 olduğunda ortaya çıkar. Doygunluğun sıfır olması, renk tonunu tamamen ortadan kaldırır: HSL'de x, %0, %50 her zaman gri tonu verir. Parlaklığın sıfır olması ise x, y, %0 ifadesini daima siyah yapar. Tüm bu durumlar araçta doğru biçimde işlenir.

Bir diğer kritik nokta: CMYK çıktısı yalnızca ekran tahminidir. CMYK gerçekte baskı makinesinin profiline, kağıt türüne ve mürekkep markasına göre değişir. Bu araçtaki CMYK değerlerini alıp doğrudan matbaaya göndermek, renk sapmasına yol açar. Profesyonel baskı öncesinde ayrı bir ICC profili dönüşümü gerekir.

Pratik Kullanım Senaryoları

Tasarımcılar için en tipik kullanım, bir palet oluştururken HSL parlaklığını kademeli olarak değiştirip her adımın RGB karşılığını bulmaktır. Örneğin, ana renk 240, 70%, 50% olsun. Bunun 20% parlaklık, 40% parlaklık, 60% parlaklık versiyonlarını sırayla dönüştürerek bir gradasyon oluşturabilirsiniz. HSL'de parlaklık değişimi renk tonunu bozmaz; böylece tutarlı bir aile elde edilir.

Front-end geliştiriciler, tasarım araçlarından aldıkları HSL değerlerini CSS'te kullanmak zorunda kalır. CSS artık hsl() fonksiyonunu doğrudan destekliyor olsa da, eski projelerde veya belirli kütüphanelerde hâlâ HEX veya RGB gereklidir. Bu araç, tasarım dosyasındaki HSL'yi alıp kodda kullanılabilir hale getirir.

Renk erişilebilirliği açısından HSL daha kullanışlıdır. Parlaklık değerini bilmek, kontrast oranını hesaplamayı kolaylaştırır. WCAG (Web Content Accessibility Guidelines) için yeterli kontrastı sağlamak adına HSL parlaklığını ayarlayıp RGB'ye dönüştürmek yaygın bir iş akışıdır.

Sıkça Sorulan Sorular

HSL'den RGB'ye dönüşümde renk kaybı olur mu? Hayır, dönüşüm kayıpsızdır. Her geçerli HSL değeri, ekranın gösterebileceği tek bir RGB üçlüsüne karşılık gelir. Gamut dışı renk sıkıştırması yoktur.

CMYK değerlerini neden matbaada kullanamıyorum? Bu araçtaki CMYK dönüşümü, standart bir sRGB-CMYK dönüşüm tablosuna dayanır. Gerçek baskıda kağıt, mürekkep ve yazıcı profili farklılık gösterir. Tahmini değerler profesyonel baskı için güvenilir değildir.

HSL'de parlaklığı sıfır yapınca neden siyah çıkıyor? HSL'de lightness (parlaklık) tamamen sıfır olduğunda, renk tonu ve doygunluktan bağımsız olarak sonuç her zaman siyahtır. Bu, modelin tanımı gereğidir.

HEX kodu ile RGB aynı şey midir? HEX, RGB'nin onaltılık gösterimidir. #FF0000 ifadesi 255, 0, 0 kırmızısının kısaltılmış halidir. Aynı renk uzayını temsil ederler.

Dönüşüm için internet bağlantısı gerekli mi? Hayır, tüm dönüşümler tarayıcınızda gerçekleşir. Hiçbir veri sunucuya gönderilmez.

Hue değerini 400 girersem ne olur? Araç, hue'yu 0-360 aralığında bekler. 400 değeri geçersiz kabul edilir ve hata mesajı gösterilir. Hue çemberi 360 derece ile sınırlıdır.