Ana Sayfa
Renk Araçları
HEX'ten HSL'ye Dönüştürücü

HEX'ten HSL'ye Dönüştürücü HEX renk kodlarını HSL (Ton, Doymuşluk, Parlaklık) değerlerine dönüştürün.

🎨

HEX'ten HSL'ye Dönüştürücü

HEX renk kodlarını HSL (Ton, Doymuşluk, Parlaklık) değerlerine dönüştürün.

HEX Rengini Girin

Bir HEX renk kodunu yazın veya renk seçiciyi kullanarak renginizi seçin.

HSL Değerlerini Okuyun

Aniden Ton (0-360°), Doymuşluk (0-100%) ve Parlaklık (0-100%) değerlerini görün.

HSL Çıktısını Kopyalayın

hsl() CSS işlevi değerini doğrudan stil sayfanızda kullanmak için kopyalayın.

Loading tool...

What Is HEX'ten HSL'ye Dönüştürücü?

Bir HEX to HSL dönüştürücü, hexadecimal renk kodlarını HSL (Ton, Doyma, Parlaklık) renk modeline dönüştürür. RGB'nin kırmızı, yeşil ve mavi ışıkların karıştırılmasıyla renkleri tanımlamasının aksine, HSL renkleri insanların daha kolay anlayabileceği bir şekilde tanımlar. Ton, rengin kendisidir (renk tekerleğinde derecelerle ölçülür: 0° kırmızı, 120° yeşil, 240° mavidir). Doyma, rengin yoğunluğu veya saflığını tanımlar (0% gri, 100% tam olarak canlıdır). Parlaklık, rengin ne kadar açık veya koyu olduğunu tanımlar (0% siyah, 50% saf renk, 100% beyaz). Bu, HSL'yi renk paletleri oluşturmak, parlaklığı değiştirmek utan hue kaymasını önlemek ve uyumlu renk şemaları üretmek için çok değerli kılar. Tasarımcılar ve geliştiriciler genellikle anlamlı ayarlamalar yapmak için HEX'ten (standart web formatı) HSL'ye dönüştürmeye ihtiyaç duyarlar. Örneğin, daha koyu bir ton oluşturmak HSL'de çok basittir - sadece parlaklığı azaltın - जबकi HEX veya RGB'de, üç kanalı da orantılı olarak ayarlamak zorunda kalırsınız.

Why Use HEX'ten HSL'ye Dönüştürücü?

Rengi sezgisel ton, doymuşluk ve parlaklık bileşenlerine ayırın
Canlı renk önizleme swatch'ı HEX kodunu yazarken güncellenir
CSS'ye hazır hsl() işlevini doğrudan stil sayfanızda kullanmak için çıktı olarak verir
3 basamaklı ve 6 basamaklı HEX girdi kodlarını destekler
Renk ilişkilerini anlamak ve değiştirmek için yararlıdır

Common Use Cases

Renk Paleti Tasarımı

Marka HEX renklerini HSL'ye dönüştürün ve doymuşluğu ve parlaklığı ayarlayarak kolayca varyasyonlar oluşturun.

Tema Oluşturma

Ton değerini sabit tutarak parlaklık değerini değiştirerek açık ve koyu tema varyantları oluşturun.

CSS Özel Özellikleri

HSL değerlerini CSS değişkenleri olarak depolayın: --primary-h, --primary-s, --primary-l.

Erişilebilirlik Ayarları

Metin ve arka planlar arasındaki yeterli kontrast oranlarını sağlamak için parlaklık değerlerini ayarlayın.

Technical Guide

HEX'ten HSL'ye dönüştürme önce hex dizesini RGB değerlerine (0-255) dönüştürür, ardından HSL'ye dönüştürür. Algoritma RGB'yi 0-1 aralığına normalize eder, maksimum ve minimum kanal değerlerini bulur ve hesaplar: Parlaklık = (maks + min) / 2. Eğer maksimum minimuma eşitse, renk akromatikdir (gri) ve ton = 0 ve doyma = 0'dır. Aksi takdirde, Doyma = delta / (1 - |2L - 1|) waar delta = maks - min'dir. Ton, hangi kanalın maksimum olduğuna bağlıdır: eğer kırmızı maksimumsa, H = (G-B)/delta; jika yeşil ise, H = (B-R)/delta + 2; jika mavi ise, H = (R-G)/delta + 4. Sonuç 60 ile çarpılır ve dereceye (0-360) dönüştürülür. HSL, RGB küpünün silindirik bir temsilidir ve bu da renk manipülasyonu için daha sezgiseldir. Önemli bir ayrım: HSL parlaklığının %50'si herhangi bir tonun en canlı formunu temsil ederken, %0 her zaman siyah ve %100 her zaman beyazdır. Bu, HSV/HSB'den farklıdır, burada %100 değer (parlaklık) en canlı rengi temsil eder.

Tips & Best Practices

1
HSL parlaklığının %50 olması, herhangi bir tonun en saf halini verir - temel palet renkleri için yararlıdır
2
Doymuşluğu azaltmak (S'yi düşürmek) profesional görünen mat tonlar oluşturur
3
HSL, CSS temaları için idealdir çünkü ton, doymuşluk ve parlaklık bağımsız olarak ayarlanabilir
4
HEX'teki eşit R, G, B değerleri her zaman H=0, S=0 üretir (saf gri)
5
Modern CSS, tüm tarayıcılarda yerli olarak hsl() işlevini destekler - çalışma zamanında dönüştürme gerekmez

Related Tools

HEX'ten RGB'ye Dönüştürücü

HEX renk kodlarını anında RGB değerlerine dönüştürün ve canlı önizleme swatch'i ile birlikte kullanın.

🎨 Color Tools

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.

🎨 Color Tools

RGB'den HSL'ye Dönüştürücü

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

🎨 Color Tools

Renk Seçici

HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.

🎨 Color Tools

Renk Tonu Jeneratörü

Ayarlabilir adım sayısı ile herhangi bir rengin daha koyu tonlarını oluşturun.

🎨 Color Tools

Frequently Asked Questions

Q HSL renk modeli nedir?

HSL, Ton (renk açısı 0-360°), Doymuşluk (yoğunluk 0-100%) ve Parlaklık (parlaklık 0-100%) anlamına gelir. İnsanlar için RGB'den daha sezgisel bir silindirik temsilidir.

Q HEX'i HSL'ye neden dönüştürüyoruz?

HSL, renk varyasyonları oluşturmayı kolaylaştırır. Bir rengi açıklamak, koyulaştırmak veya doymuşluğunu azaltmak için tek bir değeri değiştirebilirsiniz, oysa HEX'de altı karakteri değiştirmeniz gerekir.

Q hsl() CSS'de destekleniyor mu?

Evet, hsl() tüm modern tarayıcılar tarafından desteklenmektedir ve IE9'dan bu yana desteklenmiştir. Modern CSS ayrıca yeni boşlukla ayrılmış söz dizimini de destekler: hsl(217 91% 60%).

Q HSL kullanarak bir HEX rengini nasıl koyulaştırabilirim?

HEX'i HSL'ye dönüştürün, sonra Parlaklık değerini azaltın. Örneğin, hsl(217, 91%, 60%)'ı hsl(217, 91%, 40%)'a koyulaştırmak aynı mavinin daha koyu bir tonunu oluşturur.

Q HSL ve HSV arasındaki fark nedir?

HSL ve HSV her ikisi de ton ve doymuşluğu kullanır, ancak üçüncü bileşen farklıdır. HSL parlaklık (50% saf renk) kullanırken, HSV değerini/beyazlığı (100% saf renk) kullanır. HSL, CSS'de daha yaygın olarak kullanılır.

About This Tool

HEX'ten HSL'ye 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.