Renk Dönüştürücü — HEX, RGB ve HSL
Herhangi bir rengi HEX, RGB ve HSL arasında dönüştürün ve kodu anında kopyalayın — tasarımcılar için ücretsiz araç.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)Dönüştürme yerelde yapılır
Duyurulmamış markalar için güvenli
Hesap yok
Güvenli bağlantı
Nasıl çalışır
- 1
Bir renk girin
HEX kodu yapıştırın, RGB değerleri yazın ya da HSL ayarlayın — elinizde hangisi varsa.
- 2
Diğer gösterimleri okuyun
Kalan ikisi, ortaya çıkan rengin örneğiyle birlikte anında güncellenir.
- 3
İhtiyacınız olanı kopyalayın
Stil dosyanızın, tasarım aracınızın ya da marka belgenizin kullandığı gösterimi alın.
Neden bu araç
Üç gösterim bir arada
Birini değiştirdikçe HEX, RGB ve HSL eşzamanlı kalır — kontrol için ikinci kez dönüştürmeye gerek yok.
HSL’de düzenleyin, HEX ile teslim edin
HSL üzerinde akıl yürütebileceğiniz modeldir; HEX ise çoğu stil dosyasının ve tasarım belgesinin hâlâ istediği biçim.
Canlı renk örneği
Renk siz yazarken çizilir, böylece hex dizesindeki bir yazım hatası anında görünür.
Tek tıkla kopyalama
CSS’inizin, Tailwind yapılandırmanızın ya da tasarım aracınızın beklediği dizeyi doğru biçimlendirilmiş olarak alın.
Hiçbir şey yüklenmez
Dönüştürme tarayıcınızda yapılan bir aritmetiktir — hiçbir değer hiçbir yere gönderilmez.
Hesapsız ve ücretsiz
Kayıt yok, dönüştürme sınırı yok, hiçbir şeye basılan filigran yok.
HEX, RGB ve HSL aynı rengi farklı biçimde tarif eder
Üç gösterim de aynı ekran renklerini adresler; farkları sayının nasıl düzenlendiğindedir ve belirli bir iş için hangisinin daha kullanışlı olduğunu belirleyen de bu düzendir. HEX üç değeri derli toplu bir dizede paketler — `#3B82F6`, on altılık tabanda yazılmış kırmızı 59, yeşil 130, mavi 246 demektir. RGB bu üç kanalı doğrudan belirtir. HSL ise aynı bilgiyi ton (hangi renk, 0–360 arası bir açı), doygunluk (ne kadar canlı, %0–100) ve açıklık (ne kadar aydınlık, %0–100) olarak yeniden yapılandırır. Aralarındaki dönüşüm hiçbir şey kaybettirmez: `#3B82F6`, `rgb(59, 130, 246)` ve `hsl(217, 91%, 60%)` üç ayrı biçimde yazılmış aynı renktir.
Öğrenmeye değer olan neden HSL’dir
HEX ve RGB üzerinde akıl yürütmek zordur, çünkü rengi değiştirmek gördüğünüzle bariz bir ilişkisi olmayan üç sayıyı aynı anda değiştirmek demektir. RGB’de bir maviyi açmak isterseniz üç kanalı da tahmine dayalı miktarlarda yükseltmeniz gerekir. HSL’de aynı düzenleme tek sayıdır: açıklığı yükseltin. Marka renginin daha soluk bir sürümünü mü istiyorsunuz? Doygunluğu düşürün, gerisine dokunmayın. Temelden biraz koyu bir üzerine gelme durumu mu lazım? Açıklıktan on çıkarın. HSL’nin bir renk ölçeği kurmanın pratik yolu olmasının sebebi de budur: tonu ve doygunluğu sabit tutun, açıklığı adımlayın; aile deneme yanılmayla değil, kuruluş gereği tutarlı kalır.
Hangi gösterim nerede kullanılıyor
HEX tasarım teslimatına hâkimdir: marka kılavuzları, Figma ve çoğu stil dosyası renkleri hâlâ altı haneli kodlarla belirtir; bir müşterinin ya da matbaanın size göndereceği en olası biçim de budur. RGB, kanalların programatik olarak işlenmesi gereken yerlerde ve saydamlık söz konusu olduğunda `rgba()` biçiminde görünür. HSL ise CSS’te elle yazılan biçim olarak giderek yaygınlaşıyor; çünkü bakımı üstlenen kişi `hsl(217, 91%, 60%)` ifadesini okuyup bunun orta açıklıkta doygun bir mavi olduğunu anlar, oysa `#3B82F6` ekrana çizilene kadar ona hiçbir şey söylemez. Yaygın bir akış, tasarlarken HSL’de düşünmek ve teslim belgesi için HEX’e dönüştürmektir — bu araç tam da o dönüşümü anlık yapmak için var.
Dönüştürücü olmadan bir HEX kodunu okumak
Altı haneli bir HEX kodu üç çifttir: kırmızı, yeşil, mavi; her biri `00` ile `FF` (0 ile 255) arasında. Gözle tanımaya değer iki desen vardır. Üç çift de eşitse — `#333333`, `#CCCCCC` — renk nötr bir gridir ve değer yükseldikçe açılır. Bir çift belirgin biçimde baskınsa, renk o kanaldır: `#CC3333` kırmızı, `#33CC33` yeşil okunur. Bu, çizilmeden önce bariz bir hatayı yakalamaya yeter; ama iki rengin birbirine yakın olup olmadığına karar vermeye yetmez — işte orada HSL’ye dönüştürüp üç bileşeni karşılaştırmak, hex dizelerine bakmaktan hızlıdır.
Rengi dönüştürmek, işe yaradığını doğrulamak değildir
Bir dönüştürücü rengin ne olduğunu söyler, arka planı üzerinde okunup okunmadığını değil. Bunlar ayrı sorulardır ve ikincisinin görüşü değil eşiği vardır: WCAG, normal gövde metni için en az 4,5:1 kontrast oranı ister. Bir renk çifti tamamen marka uyumlu olup yine de bu eşikte kalabilir. Dönüştürdüğünüz renk metin taşıyacaksa — ya da metnin kendisiyse — bağlanmadan önce çifti kontrast denetleyicisinden geçirin. Benzer biçimde, tek bir rengi dönüştürmek yerine bir renk kümesi kuruyorsanız, palet üreteci tonlar arasındaki ilişkiler üzerinden çalışır; bu, tek başına dönüştürmenin ele almadığı bir konudur.
Alfa, saydamlık ve sekiz haneli biçim
HEX’in de RGB’nin de saydam varyantları vardır: sekiz haneli HEX sona iki karakterlik alfa ekler, `rgba()` ise 0 ile 1 arasında dördüncü bir değer alır. Bu araç, marka belgelerinin, tasarım dosyalarının ve stil bildirimlerinin ezici çoğunluğunun kullandığı opak altı haneli biçimi dönüştürür. Saydamlık gerekiyorsa, katı rengi burada dönüştürüp alfa kanalını stil dosyanızda ekleyin — böylece temel renk tek doğruluk kaynağı olarak kalır ve her kullanım kendi opaklığını belirler; palete birbirinin neredeyse aynısı düzinelerce yarı saydam varyant gömmek yerine.
Kaçınılması gereken yaygın hatalar
- Bir rengi RGB kanallarını düzenleyerek ayarlamak. RGB’de rengi açmak ya da soluklaştırmak, üç sayıyı tahmine dayalı miktarlarda değiştirmek demektir. HSL’ye dönüştürün, istediğinizi tarif eden tek bileşeni değiştirin, sonra geri dönüştürün.
- Renk ölçeğini gözle ton seçerek kurmak. Tonu ve doygunluğu sabit tutup HSL’de açıklığı adımlamak tutarlı bir aile üretir; hex kodlarını elle seçmek ise tonu kayan ve ortası çamurlu görünen bir aile üretir.
- Dönüştürülmüş bir rengin erişilebilir olduğunu varsaymak. Dönüştürme aritmetiktir ve okunabilirlik hakkında hiçbir şey söylemez — gövde metni için çiftin yine 4,5:1’i geçmesi gerekir, bunu da yalnızca bir kontrast denetimi söyler.
- Bir hex kodunu diyez işareti olmadan ya da onunla, tersini bekleyen bir alana kopyalamak. İki biçim de yaygındır ve hiçbiri evrensel kabul görmez; varsaymak yerine aracınızın ne istediğine bakın.
- Bir ekran renginin aynen basılmasını beklemek. HEX, RGB ve HSL hepsi bir ekranın yaydığı ışığı tarif eder; baskı ise CMYK mürekkepleri kullanır ve canlı ekran renklerinin — özellikle doygun mavi ve yeşillerin — birebir mürekkep karşılığı yoktur.
Karşılaştırma
| KeroTools | Tasarım yazılımı | Arama motoru dönüştürücüleri | |
|---|---|---|---|
| HEX, RGB, HSL bir arada | Üçü de canlı | Var | Genelde tek seferde biri |
| Değerler sunucuya gider | Asla | Hayır | Sıklıkla |
| Canlı renk örneği | Var | Var | Bazen |
| Hesap ya da lisans | İkisi de değil | Lisans gerekir | İkisi de değil |
| Çevrimdışı çalışır | İlk yüklemeden sonra | Evet | Hayır |
| Maliyet | Ücretsiz | Ücretli | Ücretsiz |
Özellikler
HEX giriş ve çıkış
Altı haneli gösterim, baştaki diyez işaretiyle ya da onsuz.
RGB giriş ve çıkış
0 ile 255 arası üç kanal, CSS’in doğrudan kabul ettiği biçimde.
HSL giriş ve çıkış
Derece cinsinden ton, yüzde olarak doygunluk ve açıklık — tasarımcıların gerçekten düşündüğü model.
Canlı renk önizlemesi
Bir örnek, güncel değeri gösterir; hatalar gözle yakalanır.
Çift yönlü
Üçünden herhangi birini düzenleyin, diğer ikisi izler; sabit bir kaynak alan yoktur.
Kopyalamaya hazır dizeler
Çıktı, temizlik gerektirmeden doğrudan CSS’e yapışacak şekilde biçimlendirilir.
Kurulum yok
İndirilecek ya da kurulacak bir şey yok — web sayfasında çalışır.
Arapça ve RTL uyumlu
Sekiz dilde tam arayüz, sağdan sola Arapça dahil.
Varsayılan olarak güvenli
HTTPS üzerinden sunulur, dosya takibi ve üçüncü taraf yüklemesi yoktur.
Kimler kullanıyor
Ön yüz geliştiricileri
Tasarımcının HEX teslimatını, stil dosyasında bakımı daha kolay olan HSL değerlerine çevirmek.
Tasarımcılar
Bir marka rengini HSL’de okuyup aynı ton ailesinde kalan açık ve koyu varyantlar kurmak.
Pazarlamacılar ve marka sahipleri
Tek bir marka renginden, her platformun tema düzenleyicisinin istediği gösterimi elde etmek.
Tema düzenleyen herkes
Bir araçtan alınan rengi, farklı bir biçim bekleyen bir alana uydurmak.
Sıkça Sorulan Sorular
Hayır. Her şey tarayıcınızda yerel çalışır — hiçbir şey yüklenmez, saklanmaz veya paylaşılmaz.
Evet — tamamen ücretsiz, hesap ve sınır yok.