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

Renk Kodları Nedir? HEX, RGB ve HSL

Ekranlardaki renkler; kırmızı (R), yeşil (G) ve mavi (B) ışığın karışımıyla oluşur. Web tasarımı, grafik, mobil uygulama ve baskı öncesi hazırlıkta aynı rengi farklı yazım biçimleriyle ifade edebilirsiniz. Renk dönüştürücü, bu biçimler arasında hatasız çeviri yapmanızı sağlar. Bir tasarım dosyasından aldığınız HEX kodunu CSS'te HSL'ye çevirmek ya da bir müşterinin verdiği RGB değerini HEX'e dönüştürmek en sık karşılaşılan senaryolardır.

• HEX: Her kanal iki onaltılık basamakla yazılır. 3 haneli kısa yazım (#F60) her basamağı ikiye katlar ve #FF6600 anlamına gelir.
• RGB: Üç kanalın 0-255 arası onluk değerleridir. 0 kanalın kapalı, 255 tam açık olduğunu gösterir.
• HSL: Ton (hue, renk çemberindeki derece), doygunluk (saturation) ve açıklık (lightness) değerleridir. İnsan gözüne daha sezgiseldir; bir rengi koyulaştırmak için yalnızca açıklığı düşürmek yeterlidir.

HEX, RGB ve HSL Nasıl Dönüştürülür?

HEX'ten RGB'ye

HEX kodu ikişerli üç parçaya ayrılır ve her parça onaltılıktan onluk tabana çevrilir. Formül: değer = ilk basamak × 16 + ikinci basamak (A=10, B=11, C=12, D=13, E=14, F=15).

RGB'den HSL'ye

Renk Dönüştürme Örnekleri

Örnek 1: #FF5733 rengini RGB'ye çevirme

FF = 15 × 16 + 15 = 255, 57 = 5 × 16 + 7 = 87, 33 = 3 × 16 + 3 = 51. Sonuç: rgb(255, 87, 51). HSL karşılığı hsl(11, 100%, 60%) olur; en büyük kanal kırmızı, ton 11° (kırmızıya yakın turuncu), açıklık (255 + 51) ÷ 2 ÷ 255 = %60'tır.

Örnek 2: rgb(37, 99, 235) değerini HEX'e çevirme

37 = 2 × 16 + 5 → 25; 99 = 6 × 16 + 3 → 63; 235 = 14 × 16 + 11 → EB. Sonuç: #2563EB. HSL karşılığı hsl(221, 83%, 53%), yani canlı bir mavidir.

Örnek 3: Gri tonları

#808080 kodunda üç kanal da 128'dir. Kanallar eşit olduğunda d = 0 olur; doygunluk %0, ton anlamsızdır. Sonuç rgb(128, 128, 128) ve hsl(0, 0%, 50%), yani tam orta gridir.

Örnek 4: Mor tonu

#8B5CF6 kodu 8B = 139, 5C = 92, F6 = 246 olduğundan rgb(139, 92, 246) ve hsl(258, 90%, 66%) değerine denk gelir. Bu rengin koyu bir versiyonu için HSL'de açıklığı %66'dan %45'e indirmeniz yeterlidir; HEX ile aynı işlem için üç kanalı ayrı ayrı hesaplamanız gerekirdi.

Sık Kullanılan Renkler

Hangi Durumda Hangi Biçim?

• HEX: CSS, tasarım araçları ve marka rehberlerinde en yaygın biçimdir; kısa ve kopyalaması kolaydır.
• RGB: Programlama dillerinde piksel işlemleri ve yarı saydam renkler (rgba()) için uygundur.
• HSL: Aynı rengin açık/koyu varyasyonlarını, hover durumlarını ve tema paletlerini üretmek için en pratik biçimdir.

Sık Yapılan Hatalar

• Yuvarlama farkları: HSL değerleri tam sayıya yuvarlandığı için HEX → HSL → HEX dönüşümünde bir kanalda ±1 fark çıkabilir. Orijinal rengi mümkünse HEX olarak saklayın.
• Kısa HEX'i yanlış açmak: #F60, #F60000 değil #FF6600 demektir.
• Alfa kanalını unutmak: Saydamlık için 8 haneli HEX (#RRGGBBAA) veya rgba() kullanılır; bu araç saydamlıksız çalışır.
• Doygunluk ve açıklığı karıştırmak: Açıklık %100 olduğunda doygunluk ne olursa olsun renk beyazdır, %0'da ise siyahtır.
• Erişilebilirlik kontrolünü atlamak: Metin ve arka plan renkleri arasında yeterli kontrast bulunmalıdır. WCAG yönergeleri normal metin için en az 4,5:1 kontrast oranı önerir.
• Ekran ile baskı farkını göz ardı etmek: RGB ekran için, baskı için ise genellikle CMYK kullanılır; aynı kod basılı üründe farklı görünebilir.

Birlikte Kullanabileceğiniz Araçlar

Tasarım sürecinde kullanacağınız metinlerin uzunluğunu kelime sayacı ile kontrol edebilir, görselleri Data URI olarak gömmek için Base64 aracını kullanabilir, hesap ve oturum bilgileriniz için şifre üretici ile güvenli parola üretebilirsiniz. Renk erişilebilirliği ve kontrast oranları hakkında W3C WCAG hızlı başvuru sayfasına bakabilirsiniz.