Renk Dönüştürücü

Renk Kodu Çevirici (HEX, RGB, HSL, RGBA)

HEX, RGB, RGBA veya HSL formatındaki renk kodunu otomatik algılayıp tüm formatlara aynı anda dönüştürün. HEX'ten RGB'ye, RGB'den HEX'e, HSL dahil tüm yönlerde tek araçla çevirin.

Son güncelleme: Temmuz 2026

CSS renk kodu çevirici

HEX / RGB / HSL

Renk kodu girin.

Sonuç

Hesaplama sonucu

Birinci sonuç: -
İkinci sonuç: -
Üçüncü sonuç: -

Renk kodu çevirme nasıl çalışır?

Web ve tasarım dünyasında aynı renk farklı formatlarla ifade edilir. HEX (#RRGGBB), kırmızı, yeşil ve mavi kanallarını 16'lık sayı sisteminde iki haneyle yazar; CSS'te en yaygın kullanılan formattır. RGB, aynı üç kanalı 0-255 arası ondalık sayılarla ifade eder; JavaScript ve tasarım araçlarında sık görülür. HSL ise rengi ton (0-360 derece), doygunluk (%) ve açıklık (%) olarak tanımlar; bir rengin açık/koyu tonlarını türetmek için en pratik formattır.

Bu araç, girdiğiniz kodun formatını otomatik algılar: #FFF gibi kısa HEX, #RRGGBB, alpha kanallı #RRGGBBAA, rgb(255 99 71) veya rgba(255, 99, 71, 0.5) gibi CSS fonksiyon gösterimleri ve hsl(9, 100%, 64%) yazımları desteklenir. Dönüşüm önce girdiyi RGB ara değerine çevirir, oradan hedef formatların tamamını hesaplar; böylece HEX→RGB, RGB→HEX, HEX→HSL, HSL→RGB, RGBA→HEX gibi tüm yönler tek adımda elde edilir.

Alpha (saydamlık) kanalı taşıyan girdilerde değer korunur ve 8 haneli HEX (HEXA) ile rgba() çıktısı birlikte üretilir. Sonuç kartında her formatın metni ve rengin canlı önizlemesi gösterilir; değeri tek tıkla kopyalayabilirsiniz.

Hangi formatı ne zaman kullanmalı?

CSS yazarken kısa ve okunaklı olduğu için HEX tercih edilir; tasarım sistemlerinde token değerleri çoğunlukla HEX saklanır. Saydamlık gerekiyorsa rgba() veya 8 haneli HEX kullanılır. Bir rengin hover/aktif durum tonlarını üretmek, temayı açıp koyulaştırmak gibi işlemler için HSL en uygunudur çünkü yalnızca açıklık (L) değerini değiştirerek tutarlı ton aileleri elde edilir.

Erişilebilirlik kontrolü yaparken de dönüşüm gerekir: kontrast oranı hesapları RGB değerleri üzerinden yapılır. Tarayıcıların tamamı üç formatı da desteklediği için teknik bir zorunluluk değil, okunabilirlik ve iş akışı tercihi söz konusudur.

Kaynak ve doğruluk notu

Dönüşümler, CSS Color Module standardındaki formüllerle yapılır; HSL↔RGB çevrimi W3C'nin tanımladığı matematiksel dönüşümü izler. Yuvarlama nedeniyle HSL değerlerinde ±1 birimlik fark görülebilir; bu, görsel olarak ayırt edilemeyecek kadar küçüktür.

Örnek dönüşümler

#14B8A6 girildiğinde: RGB karşılığı rgb(20, 184, 166), HSL karşılığı yaklaşık hsl(173, 80%, 40%) olarak listelenir ve teal renk önizlemesi gösterilir.

rgba(37, 99, 235, 0.5) girildiğinde: 8 haneli HEX çıktısı #2563EB80 olur; alpha değeri korunur ve yarı saydam önizleme sunulur.

Sık sorulan sorular

Renk Kodu Çevirici (HEX, RGB, HSL, RGBA) hakkında kısa ve net yanıtlar.

HEX'ten RGB'ye nasıl çevirilir?

HEX kodun her iki hanesi bir renk kanalıdır ve 16'lık sistemden 10'luk sisteme çevrilir. Örneğin #2563EB için 25→37, 63→99, EB→235; sonuç rgb(37, 99, 235) olur. Araca HEX kodu yapıştırmanız yeterlidir.

RGB'den HEX'e nasıl çevirilir?

Her kanal 0-255 arası değer 16'lık sisteme çevrilip yan yana yazılır: rgb(255, 99, 71) → #FF6347. Araç bu dönüşümü otomatik yapar.

Kısa HEX (#FFF) destekleniyor mu?

Evet. #FFF gibi 3 haneli kodlar her hanenin tekrarlanmasıyla açılır (#FFFFFF) ve tüm formatlara çevrilir.

Saydamlık (alpha) kanalı destekleniyor mu?

Evet. rgba(...) ve 8 haneli HEXA (#RRGGBBAA) girdileri okunur; alpha değeri korunarak hem rgba hem HEXA çıktısı üretilir.

HSL ne işe yarar?

HSL rengi ton, doygunluk ve açıklık olarak ifade eder. Aynı rengin daha açık veya koyu tonunu üretmek için yalnızca L (lightness) değerini değiştirmek yeterlidir; bu yüzden tema ve palet çalışmalarında tercih edilir.

Geçersiz renk kodu girersem ne olur?

Araç formatı tanıyamadığında anlaşılır bir hata mesajı gösterir ve sonuç üretmez; kodun başındaki # işaretini ve değer aralıklarını kontrol edin.

Renk önizlemesi var mı?

Evet. Sonuç kartında dönüştürülen rengin canlı önizleme kutusu yer alır; saydam renklerde desen üzerinde gösterilir.

Bir rengi açmak veya koyulaştırmak istersem?

Bunun için ayrı bir aracımız var: Renk Açma / Koyulaştırma aracıyla bir rengin yüzde bazlı açık ve koyu tonlarını üretebilirsiniz.

Benzer hesaplamalar

Renk Kodu Çevirici (HEX, RGB, HSL, RGBA) ile birlikte kullanabileceğiniz diğer CalixLab araçları.