HEX'ten RGB'ye Renk Dönüştürücü

HEX Renk Kodu Nedir?

HEX renk kodu, web tasarımı ve dijital grafiklerde kullanılan altı karakterli alfanümerik bir dize, belirli bir renge temsil eder. Format #RRGGBB olarak takip edilir, burada her iki karakterli çift, üç ekatif ilkel renge ait yoğunluğunu temsil eder - kırmızı (RR), yeşil (GG) ve mavi (BB) - onaltılı (16 tabanlı) notaasyon kullanır. Her çift, 00 (sıfır yoğunluğu) ile FF (maksimum yoğunluk, ondalık olarak 255'e eşittir) arasında değişir.

HEX kodları, HTML ve CSS'de renkleri tanımlamak için adi renk kelimelerine bağımlı olmadan tanımlamak için ihtiyaç duyulduğundan ortaya çıktı. CSS şimdi rgb(), hsl() ve oklch() gibi birden fazla renk formatını desteklerken, HEX, ön uç geliştirme, tasarım el değişimi ve marka rehberliğinde en yaygın kullanılan notaiondur. Figma, Sketch, Adobe Photoshop ve Canva gibi araçlarda renk seçiciler, HEX değerini varsayılan olarak gösterir.

Altı karakterli HEX kodlarıyla temsil edilebilen benzersiz renklerin sayısı 16,777,216 (256 × 256 × 256) olarak hesaplanır. Bu, genellikle "Gerçek Renk" veya "24-bit renk" olarak adlandırılır ve çoğu modern ekranın renk derinliğini tutar. Her kanal 8 bit (bir bayt) alır ve üç kanal birlikte 24 bit renk verisi üretir.

HEX kodları, #ff8000 ve FF8000 aynı renge atıfta bulunabilir. Bazı stil rehberleri okunabilirlik için büyük harf kullanırken, CSS minifierler genellikle küçük harf kullanır - pratikte farkın önemi yoktur.

HEX'i RGB'ye Nasıl Dönüştürülür?

HEX renk kodunu RGB eşdeğerine dönüştürmek basittir. Bu, altı karakterli diziyi üç çift ve her çifti onaltılı (16 tabanlı) (onluk (10 tabanlı)) olarak dönüştürmekle ilgilidir. İşte adımlar:

1. Hash sembolünü kaldırın. HEX kodunun başlangıcında # varsa, kaldırın. Örneğin, #1A2B3C 1A2B3C olur.
2. Üç çifti ayırın. Kalan diziyi üç iki karakterli gruplara ayırın: 1A, 2B, 3C.
3. Her çifti ondalık yapın. Onaltılı (16 tabanlı) değer sistemini kullanın, ilk rakam 16 ile çarpın ve ikinci rakam ekleyin:
   • Kırmızı: 1A → (1 × 16) + 10 = 26
   • Yeşil: 2B → (2 × 16) + 11 = 43
   • Mavi: 3C → (3 × 16) + 12 = 60
4. RGB değerini yazın. Üç ondalık değeri birleştirin: rgb(26, 43, 60).

Onaltılı rakamlar ve ondalık eşdeğerleri: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. A'dan F'ye kadar olanları anımsamak, standart ondalık aritmetikten farklıdır.

Programatik dönüşüm için, çoğu dil, binalı fonksiyonlar sunar. JavaScript'te, parseInt("1A", 16) 26 döndürür. Python'da, int("1A", 16) aynı şeyi yapar. CSS kendiliğinden hem iki formatı destekler, böylece dönüşüm, renk kanallarını kodda manipüle etmek gerektiğinde (örneğin, parlaklığı ayarlamak, gradientler programatik olarak oluşturmak veya iki renge karıştırma) genellikle gereklidir.

3-Digit vs 6-Digit HEX Kodları

CSS, her üç çiftin de aynı rakamlardan oluştuğunda 3-dije HEX formatını (#RGB) bir kolaylık olarak destekler. Bu kısayolda, her bir rakam çiftleştirilir. Örneğin:

• #F80 #FF8800 → rgb(255, 136, 0) olarak genişletilir
• #FFF #FFFFFF → rgb(255, 255, 255) olarak genişletilir
• #000 #000000 → rgb(0, 0, 0) olarak genişletilir
• #09C #0099CC → rgb(0, 153, 204) olarak genişletilir
• #A3F #AA33FF → rgb(170, 51, 255) olarak genişletilir

3-dije notasyon, 16.7 milyon renkten sadece 4.096 (16 × 16 × 16) renk oluşturabilir, bu nedenle her renk temsil edilemez. Genellikle CSS dosyalarında kısaltma değer verildiğinde basit veya bilinen renkler için kullanılır.

CSS, 4-dije (#RGBA) ve 8-dije (#RRGGBBAA) HEX kodlarını da destekler. Alpha (görünürlüğü) kanalı için HEX kodunun aynı mantığı uygulanır: FF tam olarak opak ve 00 tam olarak opak. Örneğin, #FF880080 renk rgb(255, 136, 0) 50% görünürlikte temsil eder. Converterımız, standard 3- ve 6-dije formatlarını odaklanmaktadır; eğer bir alpha kanalı içeren bir kod girerseniz, sadece RGB bölümünü işleyecektir.

HEX to RGB Referans Tablosu

Aşağıdaki, web tasarımı, CSS adlandırılmış renkler ve popüler marka paletleri için en sık kullanılan renkleri kapsayan bir referans tablosu bulunmaktadır:

CSS, toplamda 147 adlandırılmış renk tanımlarını destekler, her biri karşılık gelen HEX değeri ile. Adlandırılmış renkler prototipleme için konforlu olsa da, profesyonel projeler genellikle HEX veya RGB değerleri için kesinlik ve tarayıcılar ve tasarım araçları arasında tutarlılık için tercih eder.

Popüler Marka Renkleri – HEX ve RGB Değerleri

Geliştiriciler ve tasarımcılar, mockup'lar, entegrasyonlar ve stil kılavuzları için popüler marka renklerinin tam HEX ve RGB değerlerini ihtiyaç duyabilir. Aşağıdaki, en sık talep edilen marka renkleri için hızlı bir referanstır:

Marka kılavuzları genellikle HEX, RGB, CMYK ve Pantone gibi farklı formatlarda renkleri belirtir. Marka renklerini CSS'de uygularken, her zaman resmi marka kaynak sayfasını doğrulayın. Renkler ekranlar arasında hafifçe değişebilir, bu nedenle kod tutarlılığı önemlidir.

Renk Modelleri Karşılaştırması: HEX, RGB, HSL, ve CMYK

Herhangi bir araç ve medyada daha verimli çalışmak için hangi renk modelini kullanmak gerektiğini anlamak size yardımcı olur:

HEX ve RGB matematiksel olarak aynıdır — aynı renk uzayını farklı notasyon kullanarak temsil eder. Aralarında çeviri basit bir 16 tabanlı 10 tabanlı çevirme ile precision veya gamut farklılıkları olmadan yapılır. HSL, RGB'yi bir silindirik koordinat sistemine dönüştürerek, renk, yoğunluk ve parlaklık bağımsız olarak düşünmeyi kolaylaştırır. CMYK, basım için kullanılan bir eksiştirici renk modelidir ve RGB renklerini (ve tersi) temsil edemez, bu nedenle RGB ve CMYK arasında yaklaşık çeviri yapılır.

Modern CSS (Seviye 4), color() fonksiyonu ve yeni renk uzayları gibi oklch() ve display-p3 gibi geniş renk gamutlu ekranlar için kabul görmeye başlamaktadır. Ancak HEX ve RGB, web uyumluluğu için temel ve tüm kullanılan tarayıcılar tarafından desteklenmektedir.

HEX ve RGB'nin CSS ve JavaScript'te Kullanımı

Her iki değer de CSS'de geçerlidir ve aynı sonucu üretir. Her formatın nasıl kullanıldığını gösteren pratik örnekler burada verilmiştir:

CSS deklarasyonları:

/* HEX notasyonu */
body { background-color: #1A2B3C; }

/* RGB notasyonu */
body { background-color: rgb(26, 43, 60); }

/* RGB ile alpha (transparan) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — boşluk ayrılmış sintaksis */
.card { color: rgb(26 43 60 / 80%); }

JavaScript çeviri fonksiyonları:

// HEX'den RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB'den HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

HTML Canvas API ile çalışırken, renkler genellikle dize olarak ayarlanmalıdır. Her ikisi de "#FF8000" ve "rgb(255, 128, 0)" fillStyle ve strokeStyle için çalışır. Ancak getImageData() metodu, 0–255 aralığındaki bir dizi (RGBA) olarak piksel verilerini döndürür, bu nedenle RGB piksel seviyesinde manipülasyon için doğal formattır.

CSS özel özellikleri (değişkenler) için, HEX değerleri genellikle basitlik için saklanır:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* rgba() ile kullanmak için */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Bu, runtime'da formatlar arasında çeviri yapmadan dinamik olarak opaklık uygulayabilmek için bir popüler teknik olan, raw RGB kanal değerlerini CSS değişkeni olarak saklamaktır.

Uygunluk ve Renk Kontrastı

HEX'i RGB'ye dönüştürmek, erişilebilirlik uyumluluğu için renk kontrast oranlarını hesaplamak için genellikle ilk adım. Web İçerik Erişilebilirlik Kılavuzu (WCAG), normal metin için 4.5:1, büyük metin (18px+ kalın veya 24px+ normal) için 3:1 kontrast oranını gerektirir.

Renk kontrastı formülüne göre, her renk için relative luminans hesaplanması gerekir, bu da lineer RGB değerlerinden hesaplanır. Adımlar:

1. HEX'i RGB'ye (her kanal için 0-255) dönüştürün.
2. Her kanalı 0-1'e normalize edin: 255'e bölün.
3. sRGB lineerleştirme formülünü uygulayın: değer 0.04045'den küçük ise 12.92'ye bölün; aksi takdirde ((değer + 0.055) / 1.055) ^ 2.4 hesaplayın.
4. Luminans hesaplayın: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
5. İki renk arasındaki kontrast oranını hesaplayın: (L1 + 0.05) / (L2 + 0.05), burada L1 daha parlak renk.

Renk değerleri, erişilebilirlik kontrast hesaplamasının her aşamasında temel girdi olarak görünüyor. Araçlar gibi WebAIM Kontrast Kontrolü, Chrome DevTools renk seçicisi ve axe erişilebilirlik tarayıcıları, bu dönüştürmeyi iç içe çalıştırır.

Tasarımcılar için hızlı bir kural: karanlık metin, açık arka plan (veya tersi) ile en az 125'luk luminans farkı ve en az 500'lük renk farkı (R, G, B kanallarının mutlak farkının toplamı) ile genellikle WCAG AA standartlarını geçer.