Renk, e-ticaret sitelerinin dönüşüm oranını, marka algısını ve kullanıcı deneyimini doğrudan etkileyen en güçlü tasarım unsurudur. Araştırmalar, tüketicilerin %85'inin satın alma kararında rengin belirleyici olduğunu göstermektedir. Doğru renk paleti ile güven oluşturabilir, duyguları yönlendirebilir ve satışlarınızı artırabilirsiniz.
1. Renk Kodu Sistemleri
| Sistem | Format | Örnek | Kullanım Alanı |
|---|
| HEX | #RRGGBB | #1a1a2e, #f5c542 | Web tasarım, CSS, tema ayarları |
| RGB | rgb(R, G, B) | rgb(26, 26, 46) | CSS, dijital tasarım |
| RGBA | rgba(R, G, B, A) | rgba(26, 26, 46, 0.8) | Şeffaflık gereken yerler |
| HSL | hsl(H, S%, L%) | hsl(240, 28%, 14%) | Renk varyantları oluşturma |
| CMYK | C, M, Y, K | 43, 43, 0, 82 | Baskı (kartvizit, ambalaj) |
| Pantone | PMS kodu | PMS 2765 C | Profesyonel baskı, marka rehberi |
HEX Kodu Nasıl Okunur?
- # işareti + 6 karakter (0-9 ve A-F)
- İlk 2 hane = Kırmızı, ortadaki 2 = Yeşil, son 2 = Mavi
- #000000 = Siyah, #FFFFFF = Beyaz, #FF0000 = Kırmızı
- Kısaltma: #FFF = #FFFFFF, #333 = #333333
2. Renk Psikolojisi
| Renk | Duygu / Anlam | E-Ticarette Kullanım | Örnek Marka |
|---|
| 🔴 Kırmızı | Aciliyet, tutku, enerji, heyecan | CTA butonları, indirim, Black Friday | Netflix, YouTube, Coca-Cola |
| 🟠 Turuncu | Güven, sıcaklık, eylem çağrısı | "Sepete Ekle" butonu, kampanya | Amazon, Etsy, Fanta |
| 🟡 Sarı | İyimserlik, dikkat, mutluluk | Uyarı, öne çıkan metin, vurgu | IKEA, Snapchat, McDonald's |
| 🟢 Yeşil | Güven, doğa, büyüme, sağlık | Organik, doğal, "stokta", başarı | Starbucks, Spotify, WhatsApp |
| 🔵 Mavi | Güven, güvenlik, profesyonellik | Finans, teknoloji, kurumsal | Facebook, PayPal, Samsung |
| 🟣 Mor | Lüks, yaratıcılık, premium | Premium ürünler, kozmetik | Cadbury, Twitch, Yahoo |
| 🩷 Pembe | Romantizm, yumuşaklık, kadınsı | Kozmetik, moda, Anneler Günü | Victoria's Secret, Barbie |
| ⚫ Siyah | Lüks, güç, sofistike, minimal | Premium, lüks marka, moda | Chanel, Nike, Apple |
| ⚪ Beyaz | Temizlik, sadelik, alan | Arka plan, boşluk, minimalizm | Apple, Tesla, Muji |
3. E-Ticaret İçin Renk Paleti Oluşturma
60-30-10 Kuralı
| Oran | Rol | Kullanım | Örnek |
|---|
| %60 | Ana renk (dominant) | Arka plan, büyük alanlar | Beyaz veya açık gri |
| %30 | İkincil renk | Başlıklar, sidebar, kartlar | Marka ana rengi |
| %10 | Vurgu rengi (accent) | CTA butonları, linkler, badge'ler | Kontrastlı parlak renk |
Palet Yapısı
| Renk Türü | Açıklama | Örnek HEX |
|---|
| Ana marka rengi | Logo ve kimliğin temel rengi | #1a1a2e |
| İkincil renk | Ana rengi destekleyen tamamlayıcı | #16213e |
| Vurgu rengi | CTA, buton, önemli alan | #f5c542 |
| Başarı | "Stokta", onay, tamamlandı | #27ae60 |
| Uyarı | Dikkat, son stok, kampanya sonu | #f39c12 |
| Hata | Hata mesajı, iade, stoksuz | #e74c3c |
| Arka plan | Sayfa arka planı | #ffffff / #f8f9fa |
| Metin | Gövde metin rengi | #333333 / #1a1a2e |
4. Sektöre Göre Renk Önerileri
| Sektör | Önerilen Renkler | Neden? |
|---|
| Moda / Giyim | Siyah, beyaz, gold, minimal | Sofistike, ürün odaklı alan |
| Elektronik / Tech | Mavi, siyah, beyaz, gri | Güven, profesyonellik, temizlik |
| Gıda / Yemek | Kırmızı, yeşil, turuncu, kahve | İştah açıcı, doğallık, sıcaklık |
| Kozmetik / Güzellik | Pembe, mor, gold, nude | Zarafet, lüks, kadınsı enerji |
| Sağlık / Organik | Yeşil, beyaz, mavi, toprak | Doğallık, güven, sağlık |
| Çocuk / Oyuncak | Canlı renkler, sarı, turuncu, mavi | Eğlence, mutluluk, enerji |
| Lüks / Premium | Siyah, gold, koyu yeşil, bordo | Prestij, ayrıcalık, kalite |
| Spor / Fitness | Turuncu, kırmızı, siyah, neon | Enerji, hareket, motivasyon |
Profesyonel E-Ticaret Tasarımı Beekod ile
Markanızın renk paletine uygun, modern ve dönüşüm odaklı e-ticaret sitesi oluşturun.
Ücretsiz Deneyin
5. Renk Araçları
| Araç | Fiyat | Özellik |
|---|
| Coolors.co | Ücretsiz / Pro | Palet oluşturma, kilitleme, trend paletler, HEX/RGB dışa aktarma |
| Adobe Color | Ücretsiz | Renk tekerleği, uyum kuralları, trend, erişilebilirlik kontrolü |
| Color Hunt | Ücretsiz | Hazır palet koleksiyonları, beğeni sıralaması |
| Muzli Colors | Ücretsiz | İki renk seç → tam palet oluştur, gradient |
| Paletton | Ücretsiz | Monokromatik, tamamlayıcı, triadik palet oluşturucu |
| Realtime Colors | Ücretsiz | Canlı web sitesi önizleme ile renk testi |
| Contrast Checker (WebAIM) | Ücretsiz | WCAG erişilebilirlik kontrast oranı kontrolü |
| Canva Renk Paleti | Ücretsiz | Fotoğraftan renk çıkarma, palet oluşturma |
6. CTA Buton Renkleri
| Renk | Dönüşüm Etkisi | Ne Zaman? |
|---|
| 🟠 Turuncu | En yüksek CTR — sıcak, enerjik | "Sepete Ekle", "Satın Al" |
| 🟢 Yeşil | Güven — doğal, rahat | "Devam Et", "Ücretsiz Dene" |
| 🔴 Kırmızı | Aciliyet — dikkat çekici | "Son Fırsat", "İndirimli Al" |
| 🔵 Mavi | Güven — kurumsal, güvenli | "Bilgi Al", "Kaydol" |
| ⚫ Siyah | Premium — lüks ürün | "Satın Al", lüks segmentte |
- #1 Kural: CTA butonu arka plandan net ayrılmalı — kontrast zorunlu
- A/B test: Renk değişikliği tek başına dönüşümü %10-20 artırabilir
7. Erişilebilirlik ve Kontrast
- WCAG 2.1 AA: Normal metin kontrast oranı en az 4.5:1
- Büyük metin: 18px+ metin için minimum 3:1 kontrast
- Araç: WebAIM Contrast Checker — iki renk girin, oran görün
- Renk körlüğü: Sadece renge dayalı bilgi vermeyin — ikon + metin ekleyin
- Kötü örnek: Açık gri metin (#aaa) beyaz arka plan (#fff) üzerinde = okunamaz
- İyi örnek: Koyu gri metin (#333) beyaz arka plan (#fff) üzerinde = 12.6:1 kontrast ✅
8. Dark Mode Tasarımı
| Öğe | Light Mode | Dark Mode |
|---|
| Arka plan | #ffffff | #121212 veya #1a1a2e |
| Kart arka plan | #f8f9fa | #1e1e2e veya #2d2d44 |
| Metin | #333333 | #e0e0e0 |
| Başlık | #1a1a2e | #ffffff |
| Vurgu | #f5c542 | #f5c542 (aynı kalabilir) |
| Kenarlık | #e0e0e0 | #333333 |
- Saf siyah (#000) kullanmayın — göz yorar. #121212 veya #1a1a2e tercih edin
- Saf beyaz metin kullanmayın — %87 opaklık (#e0e0e0) daha rahat
9. Sık Yapılan Hatalar
| Hata | Sonuç | Çözüm |
|---|
| Çok fazla renk kullanmak | Kaotik, profesyonellik eksik | 3-5 renklik tutarlı palet |
| CTA ile arka plan aynı ton | Buton kaybolur, tıklama düşer | Yüksek kontrast CTA rengi |
| Erişilebilirlik ihmal | Kötü okunabilirlik, yasal risk | WCAG kontrast kontrolü yapın |
| Marka rengiyle uyumsuzluk | Güven kaybı, kimlik zayıflığı | Logo renkleriyle uyumlu palet |
| Trende kapılmak | Kısa ömürlü tasarım | Zamansız ana renk + trend vurgu |
| Dark mode'u düşünmemek | Koyu temada okunamaz site | Çift palet tasarlayın |
Sonuç
Renk seçimi, e-ticaret sitenizin başarısında kritik bir rol oynar. Renk psikolojisini anlayın, sektörünüze uygun palet oluşturun, 60-30-10 kuralını uygulayın ve erişilebilirlik kontrollerini ihmal etmeyin. Coolors veya Adobe Color gibi ücretsiz araçlarla dakikalar içinde profesyonel paletinizi oluşturabilirsiniz.
