Renk Kodu Çevirici
HEX, RGB veya HSL alanlarından birine değer girin, diğerleri otomatik güncellensin.
HEX, RGB, HSL Nedir?
Web tasarımında ve CSS'te renkler genellikle üç farklı formatta yazılır. HEX (#2563eb gibi), rengi 16'lık tabanda kırmızı-yeşil-mavi bileşenleriyle ifade eder ve en kompakt, en sık kullanılan formattır. RGB (rgb(37, 99, 235) gibi), aynı üç bileşeni 0-255 arasında ondalık sayı olarak yazar, insan gözüyle okunması biraz daha kolaydır. HSL (hsl(220, 83%, 53%) gibi) ise rengi ton (hue), doygunluk (saturation) ve parlaklık (lightness) olarak tanımlar — bir rengin tonunu koruyup sadece açıklığını/koyuluğunu değiştirmek istediğinizde en pratik format budur.
Nasıl Kullanılır?
Üç alan grubundan (HEX, RGB, HSL) herhangi birine değer girdiğinizde, diğer ikisi ve renk önizlemesi otomatik olarak güncellenir. Renk seçici (soldaki kare) ile de görsel olarak renk seçebilirsiniz. Alt kısımdaki "Kopyala" butonlarıyla istediğiniz formattaki kodu tek tıkla panoya kopyalayıp doğrudan CSS dosyanıza yapıştırabilirsiniz.
Örnek Dönüşüm
#2563eb (WebHesap'ın marka mavisi), RGB'de rgb(37, 99, 235) değerine, HSL'de ise hsl(220, 83%, 53%) değerine karşılık gelir. Bu üç değer aynı rengi ifade eder, yalnızca gösterim biçimi farklıdır.
Sıkça Sorulan Sorular
HEX, RGB ve HSL renk kodları arasındaki fark nedir?
Üçü de aynı rengi farklı şekilde ifade eder. HEX, rengi #rrggbb şeklinde 16'lık (hexadecimal) tabanda üç bileşenle (kırmızı, yeşil, mavi) gösterir ve CSS/tasarım araçlarında en yaygın kullanılan formattır. RGB, aynı üç bileşeni 0-255 arasında ondalık sayılarla ifade eder. HSL ise rengi ton (hue, 0-360 derece), doygunluk (saturation, %) ve parlaklık (lightness, %) olarak tanımlar; bir rengi koyulaştırmak veya açmak istediğinizde HSL'de sadece "lightness" değerini değiştirmek yeterlidir.
Bu araç renklerimi veya girdiğim verileri bir sunucuya gönderiyor mu?
Hayır. Tüm dönüşümler tarayıcınızda, JavaScript ile anında hesaplanır. Hiçbir veri sunucuya gönderilmez.
HSL'de doygunluk (saturation) ve parlaklık (lightness) ne işe yarar?
Doygunluk (S), rengin ne kadar "canlı" veya "gri" olduğunu belirler: %0 tamamen gridir, %100 en canlı halidir. Parlaklık (L) ise rengin ne kadar açık veya koyu olduğunu belirler: %0 siyah, %100 beyaz, %50 rengin "saf" halidir. Bu iki değeri ayrı ayrı kontrol edebilmek, HSL'i özellikle tema ve renk paleti oluştururken pratik yapar.
3 haneli kısa HEX kodları (örn. #f00) destekleniyor mu?
Evet. #f00 gibi 3 haneli kısaltılmış HEX kodları, her hane tekrarlanarak (f→ff, 0→00) otomatik olarak 6 haneli tam forma (#ff0000) genişletilir ve buna göre hesaplanır.
RGBA veya HSLA gibi saydamlık (alpha) değerini de hesaplıyor mu?
Hayır, bu araç şu an yalnızca opak (saydamlık içermeyen) HEX, RGB ve HSL değerlerini destekler. Alpha kanalı (RGBA/HSLA) kapsam dışıdır.