HEX Renk Kodu Nedir ve Nasıl Kullanılır?

Web sitesi tasarlıyorsunuz. Tasarımcı size "şu rengi kullan" diyor ve bir kod veriyor: #3A5F7D

Bu garip görünen harf-sayı kombinasyonu ne anlama geliyor? İşte HEX renk kodu!

Bu rehberde, HEX kodlarının ne olduğunu, nasıl çalıştığını ve pratik hayatta nasıl kullanacağınızı detaylıca öğreneceksiniz.

HEX Renk Kodu Nedir?

HEX (hexadecimal - onaltılık sistem) renk kodu, dijital ortamlarda renkleri tanımlamak için kullanılan bir sistemdir. 6 haneli bir kod ile 16 milyondan fazla rengi temsil edebilir.

Temel Yapı

#RRGGBB
 │ │ │
 │ │ └── Blue (Mavi) - 00 ile FF arası
 │ └──── Green (Yeşil) - 00 ile FF arası
 └────── Red (Kırmızı) - 00 ile FF arası

Örnek:

#FF0000 = Kırmızı
#00FF00 = Yeşil
#0000FF = Mavi
#FFFFFF = Beyaz
#000000 = Siyah

Neden HEX?

Bilgisayarlar ikili sistem (binary) ile çalışır: 0 ve 1. HEX, bu ikili sistemi insanlar için daha okunabilir hale getirir.

Binary → HEX Dönüşümü:

Binary:       11111111 00000000 00000000
Hexadecimal:  FF       00       00
HEX Code:     #FF0000 (Kırmızı)

6 hane yerine 24 hane yazmak zorunda kalmıyoruz!

---

HEX Kodu Nasıl Okunur?

1. Hashtag (#) İşareti

Her HEX kodu # ile başlar. Bu, "ben bir renk koduyum" anlamına gelir.

2. 6 Haneli Kod

6 hane, 3 çift halinde gruplanır:

• İlk 2 hane: Kırmızı (Red)
• Ortadaki 2 hane: Yeşil (Green)
• Son 2 hane: Mavi (Blue)

3. Hexadecimal (Onaltılık) Sistem

Normal sayı sistemi 10 rakam kullanır: 0-9
HEX sistemi 16 karakter kullanır: 0-9 ve A-F

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Değerler:

• 0 = En düşük (0)
• F = En yüksek (255)
• FF = Maksimum yoğunluk (255)
• 00 = Minimum yoğunluk (0)

Örnek Okuma: #3A5F7D

#3A5F7D
 │ │ │
 │ │ └── 7D (Mavi = 125)
 │ └──── 5F (Yeşil = 95)
 └────── 3A (Kırmızı = 58)

Sonuç: Orta yoğunlukta mavi, düşük kırmızı ve yeşil = Deniz mavisi tonu

---

HEX vs RGB: Fark Nedir?

HEX ve RGB aynı rengi farklı şekilde ifade eder.

RGB (Red, Green, Blue)

rgb(58, 95, 125)

• 3 sayı (0-255 arası)
• Virgülle ayrılmış
• Okunması kolay

HEX

#3A5F7D

• 6 haneli kod
• Kompakt
• Web'de standart

Dönüşüm

RGB → HEX:

rgb(58, 95, 125)
│    │   │
│    │   └── 125 → 7D (hex)
│    └────── 95 → 5F (hex)
└────────── 58 → 3A (hex)

Sonuç: #3A5F7D

HEX → RGB:

#3A5F7D
│  │  │
│  │  └── 7D → 125 (decimal)
│  └───── 5F → 95 (decimal)
└──────── 3A → 58 (decimal)

Sonuç: rgb(58, 95, 125)

Hangisi Daha İyi?

| Özellik | HEX | RGB | |---------|-----|-----| | Kompakt | ✅ Kısa | ❌ Uzun | | Okunabilirlik | ❌ Zor | ✅ Kolay | | Web standart | ✅ Evet | ⚠️ Desteklenir | | Şeffaflık | ❌ Yok* | ✅ rgba() | | Popülerlik | ✅ Çok yaygın | ⚠️ Orta |

*HEX'te şeffaflık için 8 haneli versiyon var: #3A5F7D80

Sonuç: Web tasarımda HEX daha popüler, programlamada RGB daha okunaklı.

---

HEX Renk Kodları Nasıl Kullanılır?

1. Web Tasarım (HTML/CSS)

HTML:

<p style="color: #3A5F7D;">Bu metin mavi.</p>

<div style="background-color: #F5F5F5;">
  Bu kutu açık gri zemine sahip.
</div>

CSS:

.button {
  background-color: #2563EB;
  color: #FFFFFF;
  border: 2px solid #1E40AF;
}

.header {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
}

CSS Variables (Modern):

:root {
  --primary-color: #2563EB;
  --secondary-color: #8B5CF6;
  --background: #F9FAFB;
}

.button {
  background-color: var(--primary-color);
}

2. Grafik Tasarım

Photoshop:

1. Color Picker'ı aç

2. kutusuna HEX kodunu yapıştır

3. Renk ayarlanır

Figma:

1. Renk seçiciyi aç
2. HEX input'una kodu gir
3. Enter

Canva:

1. Eleman seç → Color
2. • ikonuna tıkla
3. HEX kodunu gir

3. Programlama

JavaScript:

const primaryColor = '#2563EB';

element.style.backgroundColor = primaryColor;

// Canvas
ctx.fillStyle = '#3A5F7D';
ctx.fillRect(0, 0, 100, 100);

Python (Matplotlib):

import matplotlib.pyplot as plt

plt.plot(x, y, color='#3A5F7D')
plt.bar(x, y, color='#2563EB')

React:

const Button = () => (
  <button style={{ 
    backgroundColor: '#2563EB',
    color: '#FFFFFF' 
  }}>
    Tıkla
  </button>
);

4. Mobil Uygulama

Android (XML):

<color name="primary">#2563EB</color>
<color name="background">#F9FAFB</color>

iOS (Swift):

let primaryColor = UIColor(hex: "#2563EB")

5. Boya ve Fiziksel Uygulamalar

Sorun: HEX dijitaldir, fiziksel boyalar RAL kullanır.

Çözüm: WhtColor ile HEX'i RAL'e çevirin!

Örnek:

HEX: #3A5F7D
→ WhtColor
→ RAL 5024 (Pastel Mavi)
→ Boya mağazasına git
→ "RAL 5024 istiyorum"

---

Kısa HEX Kodları (3 Hane)

Bazı HEX kodları 3 haneli yazılabilir (kısayol):

#F00 = #FF0000 (Kırmızı)
#0F0 = #00FF00 (Yeşil)
#00F = #0000FF (Mavi)
#FFF = #FFFFFF (Beyaz)
#000 = #000000 (Siyah)

Kural: Her hane çift yazılır.

#3A5 → #33AA55
#C9F → #CC99FF

Ne zaman kullanılır?

• Her çift aynıysa (örn: #FFAA00 → #FA0)
• Kod kısalığı önemliyse

Ama dikkat: #3A5F7D gibi kodlar kısaltılamaz!

---

Popüler HEX Renk Kodları

Temel Renkler

| Renk | HEX | RGB | |------|-----|-----| | Kırmızı | #FF0000 | rgb(255, 0, 0) | | Yeşil | #00FF00 | rgb(0, 255, 0) | | Mavi | #0000FF | rgb(0, 0, 255) | | Sarı | #FFFF00 | rgb(255, 255, 0) | | Cyan | #00FFFF | rgb(0, 255, 255) | | Magenta | #FF00FF | rgb(255, 0, 255) |

Nötr Tonlar

| Renk | HEX | Kullanım | |------|-----|----------| | Beyaz | #FFFFFF | Arka plan | | Siyah | #000000 | Metin | | Açık Gri | #F5F5F5 | Arka plan | | Orta Gri | #9CA3AF | Border | | Koyu Gri | #374151 | Metin |

Modern UI Renkleri

| Marka/Stil | Renk | HEX | |------------|------|-----| | Tailwind Blue | Primary | #3B82F6 | | Tailwind Purple | Secondary | #8B5CF6 | | GitHub Green | Success | #10B981 | | Warning Yellow | Uyarı | #F59E0B | | Error Red | Hata | #EF4444 |

Trend Renkler (2024)

| Renk | HEX | Açıklama | |------|-----|----------| | Sage Green | #9CAF88 | Doğal, huzurlu | | Terracotta | #E07A5F | Toprak, sıcak | | Moody Blue | #3D5A80 | Derin, dramatik | | Warm Beige | #F4DFD3 | Yumuşak, nötr | | Coral Pink | #FF6B9D | Canlı, feminen |

---

HEX Renk Kodu Nasıl Bulunur?

Yöntem 1: WhtColor ile (Önerilen!)

Görselden HEX Bulma:

1. whtcolor.com aç
2. Görseli yükle (Pinterest, Instagram, kendi fotoğrafın)
3. Damlalık ile rengi seç
4. HEX kodunu kopyala

Süre: 30 saniye
Doğruluk: %99
Bonus: RGB ve RAL kodunu da alırsın!

Yöntem 2: Browser DevTools

Chrome/Firefox:

1. Web sayfasında rengi beğendiğiniz elemente sağ tık
2. "Inspect" (İncele)
3. Styles sekmesinde renk kutusuna tıkla
4. HEX kodu gösterilir

Ekran Rengini Alma:

1. F12 → Console
2. Color Picker'ı aç
3. Ekrandan herhangi bir yeri seç (eyedropper)
4. HEX kodunu kopyala

Yöntem 3: Photoshop/Figma

Photoshop:

• Eyedropper Tool (I)
• Renge tıkla
• Color Picker'da HEX kodu görünür

Figma:

• Eleman seç
• Fill → Color
• HEX değeri altta

Yöntem 4: Online Araçlar

Popüler Siteler:

• htmlcolorcodes.com
• color-hex.com
• Adobe Color

Ama WhtColor daha iyi çünkü:

• ✅ Görselden direkt bulur
• ✅ RAL kodunu da verir (boya için!)
• ✅ 213 RAL renk veritabanı

---

HEX Renk Dönüştürme

HEX → RGB

Manuel Hesaplama:

#3A5F7D

1. Çiftleri ayır: 3A, 5F, 7D
2. Hex'i decimale çevir:
   3A (hex) = 58 (decimal)
   5F (hex) = 95 (decimal)
   7D (hex) = 125 (decimal)

Sonuç: rgb(58, 95, 125)

JavaScript ile:

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

hexToRgb('#3A5F7D'); // "rgb(58, 95, 125)"

RGB → HEX

Manuel Hesaplama:

rgb(58, 95, 125)

1. Her değeri hex'e çevir:
   58 (decimal) = 3A (hex)
   95 (decimal) = 5F (hex)
   125 (decimal) = 7D (hex)

2. Birleştir: #3A5F7D

JavaScript ile:

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}

rgbToHex(58, 95, 125); // "#3a5f7d"

HEX → RAL

Sorun: HEX dijital, RAL fiziksel. Direkt dönüşüm yok!

Çözüm: WhtColor'un HEX to RAL converter'ı

1. HEX kodunu gir: #3A5F7D
2. Delta-E algoritması çalışır
3. En yakın RAL'i bulur: RAL 5024

Neden "en yakın"?

• RAL'de sadece 213 renk var
• HEX'te 16 milyon+ renk var
• %100 eşleşme nadiren olur
• WhtColor en yakın tonu bulur (Delta-E < 2)

---

HEX Renk Seçerken Dikkat Edilmesi Gerekenler

1. Kontrast (Erişilebilirlik)

Sorun: Açık mavi (#93C5FD) üzerine beyaz metin (#FFFFFF) okunamaz!

WCAG Standartları:

• AA: Minimum kontrast oranı 4.5:1
• AAA: Önerilen kontrast 7:1

Araçlar:

• WebAIM Contrast Checker
• Chrome DevTools (built-in)

Örnek:

/* Kötü - Düşük kontrast */
background: #93C5FD;
color: #FFFFFF; /* Kontrast: 2.1:1 ❌ */

/* İyi - Yüksek kontrast */
background: #2563EB;
color: #FFFFFF; /* Kontrast: 8.6:1 ✅ */

2. Ekran Farkları

Aynı HEX kodu farklı ekranlarda farklı görünür:

• MacBook Retina → Parlak, canlı
• Windows monitör → Mat, sönük
• Telefon (AMOLED) → Çok parlak
• Eski monitör → Soldurma

Çözüm:

• Birden fazla cihazda test et
• %100 doğruluk için fiziksel renk örneği kullan

3. Print vs Web

HEX web içindir! Baskı için CMYK kullanılır.

Web (#HEX) → Print (CMYK):

#2563EB (Mavi)
→ CMYK: C:85 M:60 Y:0 K:0

Sorun: RGB (ekran) daha geniş renk gamı. CMYK'de bazı parlak renkler mat görünür.

Çözüm:

• Baskı işinde Pantone veya CMYK kullan
• HEX'i sadece web/dijital için kullan

4. Karanlık Mod (Dark Mode)

Aynı HEX kodu light/dark modda farklı etki yapar:

/* Light mode için */
.button-light {
  background: #2563EB; /* Güzel mavi */
  color: #FFFFFF; /* Beyaz metin - okunur */
}

/* Dark mode için UYGUN DEĞİL! */
.button-dark {
  background: #2563EB; /* Çok parlak! Göz yorar */
  color: #FFFFFF; /* Düşük kontrast */
}

/* Dark mode için optimize */
.button-dark-optimized {
  background: #1E40AF; /* Daha koyu mavi */
  color: #E5E7EB; /* Yumuşak beyaz */
}

---

Pratik Örnekler ve Kullanım Senaryoları

Senaryo 1: Web Sitesi Tasarımı

Müşteri: "Mavi bir site istiyorum"

Tasarımcı ne yapar?

1. Ana mavi seç:

   • Primary: #2563EB

2. Varyasyonlar oluştur:

   --blue-50: #EFF6FF;   /* Çok açık (arka plan) */
   --blue-100: #DBEAFE;  /* Açık (hover) */
   --blue-500: #2563EB;  /* Ana renk */
   --blue-600: #1D4ED8;  /* Koyu (aktif) */
   --blue-900: #1E3A8A;  /* Çok koyu (metin) */
   

3. Kullanım:

   .button {
     background: var(--blue-500);
   }
   .button:hover {
     background: var(--blue-600);
   }
   .background {
     background: var(--blue-50);
   }
   

Senaryo 2: Marka Kimliği

Şirket: Teknoloji startup'ı, modern, güvenilir imaj

Renk Paleti:

Primary (Mavi):   #2563EB  - Güven
Secondary (Mor):  #8B5CF6  - İnovasyon
Success (Yeşil):  #10B981  - Başarı
Warning (Sarı):   #F59E0B  - Dikkat
Error (Kırmızı):  #EF4444  - Hata
Neutral (Gri):    #6B7280  - Denge

Kullanım:

• Logo: Primary + Secondary gradient
• CTA butonlar: Primary
• Başarı mesajları: Success
• Hata mesajları: Error

Senaryo 3: Pinterest'ten Evinize

Durum: Pinterest'te duvar rengi beğendiniz

1. Görseli WhtColor'a yükle
2. HEX kodunu al: #9CAF88 (Sage Green)
3. RAL'e çevir: RAL 6021 (Pastel Yeşil)
4. Boya mağazasına:
   "RAL 6021 istiyorum, mat, 10 litre"

---

Sık Sorulan Sorular

HEX kodu neden # ile başlar?

# işareti, "bu bir HEX renk kodudur" göstergesidir. Web standartlarında (CSS) zorunludur.

Tarihi:
1990'larda HTML/CSS geliştirilirken, renk kodlarını tanımlamak için # seçildi. Alternatif gösterimler de vardı (rgb(), hsl()) ama HEX en popüler oldu.

Büyük/küçük harf fark eder mi?

Hayır! HEX kodları case-insensitive'dir:

background: #2563EB;  /* Aynı */
background: #2563eb;  /* Aynı */
background: #2563Eb;  /* Aynı */

Genel kullanım:

• Büyük harf: #FF0000 (daha okunaklı)
• Küçük harf: #ff0000 (daha yaygın)

HEX kodunda şeffaflık olur mu?

Evet! 8 haneli HEX kodunda son 2 hane opacity (saydamlık) belirtir:

#2563EBFF  (Tamamen opak - %100)
#2563EB80  (Yarı saydam - %50)
#2563EB00  (Tamamen şeffaf - %0)

Ama 8 haneli HEX tüm browserlarda çalışmaz. Güvenli alternatif:

background: rgba(37, 99, 235, 0.5); /* %50 saydam */

HEX ile kaç farklı renk yapılabilir?

16,777,216 renk!

Hesaplama:

• Her kanal (R, G, B): 256 değer (00-FF)
• Toplam: 256 × 256 × 256 = 16,777,216

İnsan gözü: ~10 milyon renk ayırt edebilir.
HEX: 16 milyon+ renk destekler.

Yeterli? Kesinlikle!

Named colors (isimli renkler) var mı?

Evet! CSS'te 140 isimli renk var:

color: red;          /* #FF0000 */
color: blue;         /* #0000FF */
color: tomato;       /* #FF6347 */
color: dodgerblue;   /* #1E90FF */
color: mediumpurple; /* #9370DB */

Ama profesyoneller HEX kullanır çünkü:

• ✅ Kesin renk kontrolü
• ✅ Özel tonlar
• ✅ Tutarlılık

WhtColor neden RAL da veriyor?

Sorun: HEX dijital, fiziksel boya işe yaramaz.

Çözüm: WhtColor her HEX için en yakın RAL kodunu bulur.

Örnek:

Pinterest'te renk beğendiniz
→ WhtColor: HEX #9CAF88
→ WhtColor: RAL 6021 (en yakın)
→ Boya mağazasına: "RAL 6021 istiyorum"

Avantaj:
HEX'ten RAL'e dönüşüm Delta-E algoritması ile yapılır (bilimsel, hassas).

---

Sonuç ve Özet

HEX renk kodları, dijital dünyada renkleri tanımlamanın en popüler yoludur.

Öğrendikleriniz:

• ✅ HEX nedir? (#RRGGBB formatı)
• ✅ Nasıl okunur? (0-F, 16'lık sistem)
• ✅ RGB ile farkı (aynı renk, farklı gösterim)
• ✅ Nerede kullanılır? (Web, mobil, tasarım)
• ✅ Nasıl bulunur? (WhtColor, DevTools, Photoshop)
• ✅ Nasıl dönüştürülür? (HEX ↔ RGB ↔ RAL)

Pratik İpuçları:

• Web tasarımda HEX kullan (standart)
• Fiziksel boya için RAL'e çevir
• Kontrast kontrolü yap (erişilebilirlik)
• Birden fazla ekranda test et

Hemen Deneyin:
WhtColor'a herhangi bir görsel yükleyin, HEX kodunu saniyeler içinde bulun!

---

İlgili Yazılar

• RAL Renk Sistemi Nedir?
• Pinterest'ten Renk Bulma
• En Popüler 10 RAL Renk Kodu
• RAL 9016 Detaylı İnceleme

Etiketler: #HEX #RenkKodu #WebTasarım #RGB #RAL

---