Hexadecimal Renk Kodlarının Arkasındaki Matematik
Bir HEX renk kodu, aslında üç ayrı sayıyı sıkıştırılmış biçimde gösteren bir kestirme yoldur. Bu sayılar kırmızı, yeşil ve mavi kanallarının 0–255 aralığındaki değerlerini temsil eder. HEX, bu değerleri ondalık (decimal) sistem yerine on altılık (hexadecimal/hex) sistemde yazar. İnsanların alışkın olduğu 0–9 rakamlarına ek olarak A–F harflerini kullanan bu sistem, tek bir haneyle 0–15 arasını ifade edebilir.
Altı haneli bir HEX kodu #RRGGBB biçimindedir: ilk iki hane kırmızı, ortadaki iki hane yeşil, son iki hane mavi kanalını verir. Örneğin #4f46e5 kodunda: kırmızı kanal 4f, yeşil kanal 46, mavi kanal e5 ile gösterilir. Üç haneli kısaltma (#RGB) ise her bir kanalın tek haneyle yazılmasıdır ve sistem tarafından otomatik olarak genişletilir: #abc → #aabbcc. Bu genişletme işlemi, her haneyi iki kez yazmaktan ibarettir ve matematiksel olarak kanal değerini 16 ile çarpıp üzerine kendisini eklemekle eşdeğerdir.
Bu sayfada yapılan dönüşüm tamamen deterministiktir. Herhangi bir yuvarlama, kırpma veya yaklaştırma söz konusu değildir. Sekiz haneli HEX kodları (alfa kanalı içeren, örneğin #4f46e580) bu sayfada işlenmez; sayfa yalnızca altı veya üç haneli girdiler bekler. Bu kısıtlama bilinçli bir tasarım kararıdır: amaç, saf HEX‑RGB dönüşümünü odakta tutmaktır.
RGB: Ekranın Üç Temel Işık Kanalı
RGB, katkılı (additive) bir renk modelidir. Kırmızı, yeşil ve mavi ışık kaynaklarının birleşimiyle diğer tüm renkler oluşur. Her kanal 0 (tamamen kapalı) ile 255 (tamamen açık) arasında bir tamsayı değeri alır. Bu 256 seviye, toplamda 256³ = 16.777.216 farklı renk üretir; bu da tipik bir 8‑bit renk derinliğidir.
HEX kodundaki her iki hane, bu 256 seviyeden birini temsil eder. 00 en düşük (0), ff en yüksek (255) değeri gösterir. Dönüşümün formülü basittir: her bir çift basamaklı hex sayıyı ondalığa çevirmek için sol haneyi 16 ile çarpıp sağ haneyi ekleyin. Örneğin 4f için: 4 × 16 + 15 = 64 + 15 = 79. Bu işlem her kanal için ayrı ayrı yapılır ve sonuçta rgb(79, 70, 229) elde edilir.
Bu sayfadaki dönüşümün en önemli özelliği, RGB değerlerinin kaynaksız ve geri döndürülebilir olmasıdır. Yani #4f46e5 her zaman rgb(79, 70, 229) verir ve bu üç sayı tekrar hex’e çevrildiğinde aynı kodu üretir. Algoritmik bir hata veya renk uzayı dönüşümü söz konusu olmadığı için sonuç her durumda kesindir.
HEX'ten RGB'ye Dönüşüm Adım Adım
Bir HEX kodunu RGB’ye çevirmek için şu adımlar izlenir:
- Kodu temizleyin. Baştaki
#işareti varsa kaldırın. Kod üç haneliyse her haneyi ikiye katlayarak altı haneye genişletin. Örneğin#abc→#aabbcc. - Kanal çiftlerini ayırın. Altı haneli kodu ikişerli gruplara bölün:
RR,GG,BB. - Her çifti ondalığa çevirin.
RRiçin:R₁ × 16 + R₂. BuradaR₁sol hanenin,R₂sağ hanenin sayısal değeridir (A=10, B=11, C=12, D=13, E=14, F=15). - Çıkan üç tamsayıyı RGB üçlüsü olarak yazın. Örneğin
rgb(79, 70, 229).
Örnek 1: Tam altı haneli kod
HEX: #1E90FF (Dodger Blue)
Kırmızı: 1E → 1 × 16 + 14 = 30
Yeşil: 90 → 9 × 16 + 0 = 144
Mavi: FF → 15 × 16 + 15 = 255
RGB: rgb(30, 144, 255)
Örnek 2: Üç haneli kısaltma
HEX: #abc
Genişlet: #aabbcc
Kırmızı: aa → 10 × 16 + 10 = 170
Yeşil: bb → 11 × 16 + 11 = 187
Mavi: cc → 12 × 16 + 12 = 204
RGB: rgb(170, 187, 204)
Örnek 3: Gri tonlar
HEX: #808080 (orta gri)
Kırmızı: 80 → 8 × 16 + 0 = 128
Yeşil: 80 → 128
Mavi: 80 → 128
RGB: rgb(128, 128, 128)
Bu üç örnek, dönüşümün her durumda aynı mantıkla çalıştığını gösterir.
Sık Yapılan Hatalar ve Edge Case'ler
Bu sayfada girdi doğrulaması belirli kurallara göre çalışır. Geçersiz bir HEX kodu girildiğinde şu hata mesajı görüntülenir: "Lütfen #4f46e5 veya #abc gibi bir hex rengi girin."
En yaygın hatalar şunlardır:
- Sekiz haneli HEX girilmesi: Sayfa yalnızca altı veya üç haneli kodları kabul eder. Sekiz haneli (RGBA) kodları işlemez. Kullanıcı yanlışlıkla
#4f46e580yazarsa hata alır. - Geçersiz karakter kullanımı: HEX kodları yalnızca 0–9 rakamları ve A–F (büyük/küçük fark etmez) harflerini içerebilir.
#G12345gibi bir giriş kabul edilmez. - Eksik veya fazla karakter: Dört haneli
#1234, beş haneli#12345gibi girişler doğru formata uymaz. - Boşluk veya özel karakter:
# 4f46e5veya#4f46e5!geçerli değildir.
Üç haneli kodların genişletilmesi otomatik olarak yapılır. Kullanıcının #abc yazması yeterlidir; sayfa arka planda #aabbcc haline getirir ve RGB’yi buna göre hesaplar. Bu genişletme işlemi, her kanalın değerini 16 ile çarpıp üzerine kendisini ekleyerek yapılır. Örneğin #f00 → #ff0000, yani saf kırmızıya dönüşür.
HEX kodunu manuel olarak girmek istemeyen kullanıcılar için sayfada bir renk seçici de bulunur. Renk seçiciden seçilen renk, otomatik olarak HEX alanına yazılır ve tüm diğer alanlar güncellenir.
HEX ve RGB: Hangi Durumda Hangisini Kullanmalı?
CSS’te bir rengi belirtmek için hem HEX hem de RGB kullanılabilir. Örneğin color: #ff6600 ile color: rgb(255, 102, 0) aynı rengi verir. Tarayıcılar ikisini de aynı şekilde yorumlar.
HEX’in avantajı daha kısa olmasıdır: altı karakter bir RGB’nin 10–12 karakterine kıyasla daha az yer kaplar. Bu nedenle CSS dosyalarında sıkça tercih edilir. Ancak JavaScript’te bir canvas API’si veya WebGL kullanırken genellikle RGB değerlerine ihtiyaç duyulur. Örneğin fillStyle özelliğine 'rgb(79, 70, 229)' vermek, HEX’i ayrıştırmaktan daha doğrudandır.
Tasarım araçlarında (Figma, Sketch, Adobe XD) renkler genellikle HEX olarak kopyalanır, ancak bu araçların çoğu RGB değerlerini de ayrıca gösterir. Bir renk paleti oluştururken veya renkleri programlı olarak değiştirirken her kanalın sayısal değerine erişmek gerekebilir.
CSS rgba() işlevi, HEX’in sağlamadığı bir alfa kanalı ekler. Ancak bu sayfanın odağı HEX‑RGB dönüşümü olduğu için alfa kanalı burada işlenmez.
Renk Teorisi ve Erişilebilirlikte RGB'nin Rolü
RGB değerleri, bir rengin parlaklığını ve kontrastını hesaplamak için doğrudan kullanılabilir. WCAG (Web Content Accessibility Guidelines) başarı kriterleri, metin ve arka plan arasındaki kontrast oranını belirler. Bu oran, renklerin lüminans değerlerinden hesaplanır.
Göreceli lüminans formülü şöyledir:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Burada R, G ve B değerleri önce 0–1 aralığına normalize edilir (0–255 → 0–1), ardından her kanalın gamma düzeltmesi yapılır (linear RGB’ye dönüşüm). Normal kullanımda bu hesaplamalar otomatik araçlarla yapılır; ancak elinizde RGB değerleri varsa kontrast oranını manuel olarak da hesaplayabilirsiniz.
Örneğin, bir metin rengi #1a1a1a (rgb(26, 26, 26)) ile arka plan rengi #ffffff (rgb(255, 255, 255)) arasındaki kontrast oranı yaklaşık 15.9:1'dir — bu, normal metin için AA (4.5:1) ve AAA (7:1) seviyelerini rahatlıkla karşılar.
HEX kodları, bu tür hesaplamalar için önce RGB’ye çevrilmelidir. İşte bu noktada sayfamızın sağladığı anlık dönüşüm, erişilebilirlik denetimleri yapan geliştiriciler için vazgeçilmezdir.
Sıkça Sorulan Sorular
1. #FFF neye dönüşür?
#FFF, üç haneli bir kısaltmadır ve #FFFFFF olarak genişletilir. Bu da rgb(255, 255, 255) yani beyaz renge karşılık gelir.
2. Neden sekiz haneli HEX kodları çalışmıyor?
Sekiz haneli kodlar (örneğin #FF0000FF) bir alfa kanalı içerir. Bu sayfa yalnızca altı haneli renk kodları ve üç haneli kısaltmalar için tasarlanmıştır. Alfa kanalını işlemez.
3. RGB değerleri yuvarlanır mı?
Hayır. HEX’ten RGB’ye dönüşüm tamamen matematiksel olduğu için sonuç her zaman tam sayıdır. Yuvarlama, kırpma veya yaklaştırma yapılmaz. Örneğin #4f46e5 her zaman rgb(79, 70, 229) verir.
4. HEX kodunu ellerimle nasıl çevirebilirim?
Her bir çift haneyi ayrı ayrı çevirin: sol haneyi 16 ile çarpın, sağ haneyi ekleyin. A=10, B=11, C=12, D=13, E=14, F=15 olarak kullanın. Üç haneli kodlarda önce her haneyi ikiye katlayın.
5. Renk seçici kullanarak da dönüşüm yapabilir miyim?
Evet. Sayfada bulunan renk seçiciye tıklayarak bir renk seçebilirsiniz. Seçtiğiniz renk otomatik olarak HEX alanına yazılır ve tüm diğer renk formatları (RGB, HSL, HSV, CMYK, LAB) anlık olarak güncellenir.
6. Sayfaya girdiğim veriler kaydediliyor mu?
Hayır. Tüm dönüşümler sadece kendi tarayıcınızda gerçekleşir. Hiçbir veri sunucuya gönderilmez veya depolanmaz.