Dönüştürücü her CSS hex biçimini kabul eder: 6 haneli #3366cc, 3 haneli kısaltma #36c ve alfa kanalı içeren 4 ve 8 haneli biçimler, başında # olsun ya da olmasın. hsl() veya hsla() değerini, ham sayıları ve bileşen bazında dökümü gösterir, ihtiyaç halinde tersini yapmak için bir HSL'den HEX'e satırı da sunar. Her şey tarayıcınızda çalışır, yükleme, hesap veya kullanım sınırı yoktur.
HEX Kodu HSL'ye Dönüştürücü
Tümüyle tarayıcınızda çalışır - yükleme yok, üyelik yok.
CSS
hsl(220, 60%, 50%)Dönüşüm nasıl işliyor
Ton220
Doygunluk60%
Parlaklık50%
Tersi mi lazım? HSL'den HEX'e
#3366ccHEX kodu HSL'ye nasıl çevrilir?
Önce hex kodu kırmızı, yeşil ve mavi (0-255) değerleri olarak okunur, sonra bu renk ton (hue), doygunluk (saturation) ve parlaklık (lightness) olarak yeniden ifade edilir. Ton, renk çemberindeki açıdır (0-360), doygunluk rengin canlılığıdır (0-100%), parlaklık ise ne kadar açık olduğudur (0-100%). #3366cc, hsl(220, 60%, 50%) haline gelir. Bu araç yazarken bunu anında hesaplar.
Nasıl kullanılır
- 1Bir hex kodu girin. #3366cc (veya #36c) gibi bir hex renk kodu yazın ya da yapıştırın, isterseniz renk paletinden seçin. Başındaki # işareti isteğe bağlıdır.
- 2HSL değerini okuyun. hsl() değeri, ham sayılar ve canlı renk önizlemesi yazdıkça güncellenir; ton, doygunluk ve parlaklık için bileşen bazında bir döküm de gösterilir.
- 3İhtiyacınız olan biçimi kopyalayın. hsl() değerinin veya ham sayıların yanındaki Kopyala düğmesine tıklayın. Tersini mi arıyorsunuz? Hex kodunu geri almak için aşağıya ton, doygunluk ve parlaklık girin.
Kimler için
- Ön uç geliştiricileri, hover ve focus durumları için tamamen farklı bir renk seçmeden sadece parlaklığı ayarlamak amacıyla hex kodunu hsl()'ye çevirir.
- Palet oluşturan tasarımcılar, tonu sabit tutup doygunluk ve parlaklığı kademeli değiştirerek tek bir marka renginden ton ve gölge üretir.
- Tema ve tasarım token yazarları, renkleri HSL olarak saklar çünkü elle okumak ve düzenlemek bir hex koduna göre çok daha kolaydır.
- Farklı araçlar arasında renk eşleştiren herkes, birinin hex istediği (Figma, çoğu CSS), diğerinin HSL istediği (SCSS yardımcıları, bazı renk sistemleri) durumlarda kullanır.
Sık sorulan sorular
Bu HEX'ten HSL'ye dönüştürücü ücretsiz mi?
Evet, kayıt gerekmeden ve hiçbir sınır olmadan yüzde yüz ücretsiz. Tamamen tarayıcınızda çalışır.
Renklerim bir yere yükleniyor mu?
Hayır. Dönüştürme işlemi cihazınızda çalışan sade bir JavaScript kodudur, hiçbir şey sunucuya gönderilmez ve sayfa bir kez yüklendikten sonra çevrimdışıyken de çalışmaya devam eder.
HSL nedir?
HSL, ton (hue), doygunluk (saturation) ve parlaklık (lightness) anlamına gelir. Ton, renk çemberinde 0 ile 360 derece arasındaki açıdır, doygunluk rengin yüzde 0 ile 100 arasında ne kadar canlı olduğudur, parlaklık ise yüzde 0'da (siyah) başlayıp yüzde 50'de saf rengi geçerek yüzde 100'e (beyaz) kadar gider.
Hex kodu elle HSL'ye nasıl çevrilir?
Hex kodu kırmızı, yeşil ve mavi değerlere çevirip her birini 255'e bölün. Bu üç değerin en büyüğünü ve en küçüğünü bulun: parlaklık ikisinin ortalamasıdır, doygunluk (en büyük - en küçük) değerinin (1 - |2L - 1|) değerine bölünmesiyle bulunur, ton ise hangi kanalın en büyük olduğuna göre 0-360 derece aralığına ölçeklenerek elde edilir.
#36c gibi 3 haneli kısaltmayı destekliyor mu?
Evet. CSS kısaltmasında her hane iki kez tekrarlanır, yani #36c genişleyip #3366cc olur ve hsl(220, 60%, 50%) değerine dönüşür. 4 haneli biçim de aynı mantıkla çalışır, son hane alfa değeridir.
Şeffaflığı (HSLA) nasıl işliyor?
8 haneli bir hex kodu alfa değerini son iki hanesinde taşır. Bu bayt (0-255) 255'e bölünerek hsla()'nın beklediği 0-1 aralığındaki alfa değerine dönüştürülür ve üç ondalık basamağa yuvarlanır, böylece #3366cc80, hsla(220, 60%, 50%, 0.502) haline gelir.
HSL'yi HEX'e geri çevirebilir mi?
Evet. Sonucun altındaki HSL'den HEX'e satırını kullanın: ton (0-360) ile doygunluk ve parlaklık (0-100%) değerlerini girin, hex kodu anında karşınıza çıkar. Aralık dışındaki değerler otomatik olarak sınırlanır.
HSL, hex yerine neden kullanışlı?
HSL, insan tarafından okunabilir bir biçimdir: hex hanelerini tahmin etmeden L değerini artırarak bir rengi açabilir, S değerini azaltarak matlaştırabilir veya H değerini değiştirerek renk ailesini kaydırabilirsiniz. Bu da tutarlı paletler, hover durumları ve tasarım tokenları oluşturmak için idealdir.