Skip to main content

HSL'den HEX'e Dönüştürücü Etkileşimli kaydırma çubukları ile HSL renk değerlerini HEX kodlarına dönüştürün.

HSL'den HEX'e Dönüştürücü illustration
🎨

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

Etkileşimli kaydırma çubukları ile HSL renk değerlerini HEX kodlarına dönüştürün.

1

HSL Kaydırıcılarını Ayarlayın

Doğrudan (0-360°), Doygunluk (0-100%) ve Parlaklık (0-100%) değerlerini kaydırma çubukları kullanarak ayarlayabilirsiniz.

2

Rengi Ön İzleyin

Her değeri ayarladığınız sırada renk örneğinin gerçek zamanlı olarak güncellenmesini izleyebilirsiniz.

3

HEX Çıktısını Kopyalayın

Sonuçlanan HEX kodunu CSS, tasarım araçları veya herhangi bir uygulama için kopyalayabilirsiniz.

Loading tool...

What Is HSL'den HEX'e Dönüştürücü?

Bir HSL'den HEX'e dönüştürücü, Hue (Renk Tonalığı), Doygunluk ve Parlaklık renk değerlerini web geliştirme alanında kullanılan onaltılık renk kodlarına dönüştürür. HSL, insan dostu bir renk modelidir; burada Renk Tonalığı renk çarkının konumunu temsil eder (0°'da kırmızı, 120°'da yeşil, 240°'da mavi), Doygunluk canlılığı kontrol eder (0% gri, 100% saf renktir) ve Parlaklık parlaklığını ayarlar (0% siyah, 100% beyaz). HEX'e dönüştürme, web teknolojilerinin gerektirdiği altı karakterli kodu üretir. Bu dönüştürücü, özellikle HSL ile tasarladığınızda - sezgisel renk manipülasyonu için - ancak uygulamaya yönelik HEX çıktısına ihtiyacınız olduğunda çok faydalıdır. Etkileşimli kaydiriciler size renkleri uzaysal olarak keşfetme olanağı verir - tonları döndürerek, canlılığı ayarlayarak ve parlaklığı belirleyerek - sonra da web için hazırlanmış HEX kodunu anında alabilirsiniz. Dönüştürme, önce HSL'yi RGB'ye dönüştürmeyi, ardından her bir RGB kanalını iki haneli onaltılık bir sayı olarak kodlamayı içerir.

Why Use HSL'den HEX'e Dönüştürücü?

  • Renk döndürme, doygunluk ve parlaklık ayarlaması için sezgisel kaydırma çubukları
  • Renk seçimi için renk spektrumunu gösteren renk kaydırıcısı
  • Canlı ön izleme örneği herhangi bir değeri ayarladığınız anda anında güncellenir
  • Web geliştirme için doğrudan HEX kodu kopyalama
  • Kayıt gerektirmez - tamamen tarayıcıda çalışır

Common Use Cases

Renk Keşfi

Doğrudan ayarlayarak renk çarkını keşfedin, ardından doygunluk ve parlaklık ile mükemmel tonu bulun.

Tema Oluşturma

HSL tabanlı bir tasarım sistemiyle başlayın ve nihai renkleri üretim CSS için HEX'e dönüştürün.

Palet Oluşturma

Doğrudan sabit tutun, doygunluk ve parlaklığı değiştirerek uyumlu tonlar ve gölgeler oluşturun, ardından HEX olarak dışa aktarın.

Marka Rengi Belgeleme

Marka renklerini hem HSL (esneklik için) hem de HEX (uygulama için) formatlarında belgeleyin.

Technical Guide

HSL'den HEX'e dönüştürme, iki adımlı bir süreçtir: HSL → RGB → HEX. HSL'den RGB algoritması ilk olarak kromayı (renk yoğunluğunu) hesaplar: C = (1 - |2L - 1|) × S, burada S ve L 0-1 aralığında bulunur. Ara değer X = C × (1 - |(H/60) mod 2 - 1|), ikincil renk bileşenini belirler. Renk tonu tekerleğinin hangi 60° sektöründe olduğumuza bağlı olarak, R, G, B değerleri C, X ve 0'dan atanır. Son olarak, bir parlaklık ayarlaması m = L - C/2 tüm kanallara eklenir. Sonuçlanan R, G, B değerleri (0-1) 0-255 aralığına ölçeklendirilir ve iki haneli hex dizilerine dönüştürülür. Kenar durumları arasında: akuatik renkler (S=0) bulunur, burada R=G=B=L×255; saf siyah (L=0) #000000 üretir ve saf beyaz (L=100%) #FFFFFF üretir. Algoritma, 8 bitlik her kanaldaki 16,7 milyon rengi temsil eden deterministik ve kayıpsızdır. Bu işlem zincirini anlamak, JavaScript, Python ve diğer dillerde programatik renk manipülasyonu için anahtardır.

Tips & Best Practices

  • 1
    En canlı herhangi bir rengin versiyonu için parlaklığı %50'ye ayarlayın
  • 2
    Doygunluğu %0'a doğru azaltarak profesyonel tasarımlar için zarif mat tonlar oluşturun
  • 3
    Tamamlayıcı renkler renk tekerleğinde tam olarak 180° uzaklıktadır
  • 4
    Parlaklık %0 altijd #000000 üretir, rengin ve doygunluğunun önemi yoktur
  • 5
    Web erişilebilirliği için en az 4.5:1 kontrast sağlayın - bunu elde etmek için parlaklığı değiştirin

Related Tools

Frequently Asked Questions

Q HSL, RGB'den nasıl farklıdır?
RGB, kırmızı, yeşil ve mavi ışıkların karıştırılmasıyla renkleri tanımlar. HSL, renkleri hue (renk), doygunluk (yoğunluk) ve parlaklık (parlaklık) ile açıklar. HSL, insanların anlaması ve manipüle etmesi daha sezgiseldir.
Q HSL'den kesin HEX değerlerini alabilir miyim?
Evet, dönüşüm deterministiktir. Ancak, HSL değerleri kesirli olabilirken HEX tamsayılar (her kanal için 0-255) kullanır, bu nedenle bazı çok ince HSL farklılıkları aynı HEX değerine yuvarlanabilir.
Q Temiz kırmızı üretmek için hangi HSL değerlerini kullanmalıyım?
Temiz kırmızı hsl(0, 100%, 50%)'dir ve #FF0000'a dönüştürülür. Hue 0° kırmızıdır, %100 doygunluk tam olarak canlı demektir ve %50 parlaklık ne karartılmış ne de açıklanmış demektir.
Q Tasarım için HSL, RGB'den daha mı iyidir?
Tasarım keşfi için evet. HSL, rengi, yoğunluğu ve parlaklığı bağımsız olarak kontrol etmenize olanak tanır. Bu, tonlar, gölgeler ve uyumlu paletler oluşturmayı RGB değerleriyle oynamaktan çok daha sezgisel hale getirir.
Q Her HSL değeri için aralık nedir?
Hue: 0-360 derece (renk tekerleği konumu). Doygunluk: %0-%100 (gri ile canlı arasında). Parlaklık: %0-%100 (siyah ile beyaz arasında). Bu üç değer herhangi bir rengi benzersiz olarak tanımlar.

About This Tool

HSL'den HEX'e Dönüştürücü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.