Renklerin Sessiz Dili

Bir web sitesine girdiğinizde, daha tek bir kelime okumadan ona dair bir his oluşur içinizde. Güven mi, soğukluk mu, enerji mi, huzur mu? Bu hissi yaratan şey çoğu zaman tipografi ya da metin değil, ekranı dolduran renklerdir.

Biz Hitit Medya olarak Next.js ile siteler kurarken mühendisliğe tutkuyla odaklanırız. Ama renklerin de bir dili, bir matematiği ve insanların zihninde bıraktığı derin izler olduğunu biliriz. İşte bu yazı, o dilin grameri: renk kodlarıyla, uyumlu paletlerle ve gerçek örneklerle.

30 SANİYEDE ÖZET

İyi bir web paleti rastgele seçilmez; renk çemberi üzerindeki ilişkilerden doğar. Tek bir ana renk, bir ikincil renk, bir vurgu rengi ve nötr bir iskelet (60-30-10 kuralı) ile denge kurulur. Her rengin bir psikolojisi vardır: mavi güven, yeşil denge, kırmızı enerji verir. Ama estetik tek başına yetmez; metin ile zemin arasında WCAG 4.5:1 kontrastı sağlanmalı, renk körlüğü düşünülmelidir. Renk, sanat ile mühendisliğin tam buluştuğu yerdir.

Mühendislik ve Sanatın Buluştuğu Yer

Web tasarımında çoğu konuşma performans, kod kalitesi ve SEO üzerine döner. Bunlar hayati. Ama bir sitenin ilk 50 milisaniyede bıraktığı izlenimin büyük kısmını renk belirler. Araştırmalar, insanların bir ürün hakkındaki ilk yargısının önemli bir bölümünü yalnızca renge dayandırdığını gösteriyor.

Renk, ölçülebilir bir mühendislik problemi (kontrast oranları, erişilebilirlik, ekranlar arası tutarlılık) ile sezgisel bir sanat problemini (duygu, marka kimliği, denge) aynı anda barındırır. Bizim için iyi tasarım, bu ikisini ayırmaz. Pixel-perfect bir arayüz, doğru renk diliyle konuşmadığı sürece eksiktir.

Renklerin Psikolojisi: Her Rengin Bir Sesi Var

Renkler kültürel ve kişisel çağrışımlar taşır. Bir markanın hangi rengi seçeceği, vermek istediği duyguyla doğrudan ilgilidir. İşte web'de en sık kullanılan renkler, kodları ve bıraktıkları izlenim:

Kırmızı #EF4444

Enerji, aciliyet, iştah, tutku. CTA butonları ve indirim rozetlerinde güçlü.

Turuncu #F97316

Sıcaklık, samimiyet, harekete geçme. Davetkâr ve enerjik markalar.

Sarı #FACC15

Neşe, dikkat, iyimserlik. Vurguda güçlü ama metinde kontrastı zordur.

Yeşil #10B981

Güven, denge, büyüme, doğa, onay. Hitit Medya'nın marka rengi.

Mavi #3B82F6

Güven, kurumsallık, sakinlik, teknoloji. En güvenli kurumsal renk.

Mor #8B5CF6

Yaratıcılık, lüks, premium, hayal gücü. Teknoloji ve butik markalar.

Siyah #0A0A0A

Zarafet, güç, lüks, minimalizm. Premium ve sofistike duruş.

Gri #6B7280

Denge, profesyonellik, nötrlük. Asıl renkleri öne çıkaran iskelet.

Bu çağrışımlar mutlak kurallar değil, başlangıç noktalarıdır. Bir bankanın mavisi ile bir çocuk markasının mavisi aynı tonda olmaz. İşin sırrı, doğru rengi seçtikten sonra onu doğru tonlarda ve doğru oranlarda kullanmaktır.

Renk Çemberi ve Uyum Şemaları

Renk uyumunun bilimi renk çemberinde gizlidir. Çember, renkleri ton (hue) sırasına göre dizer. Birbiriyle uyumlu paletler, bu çember üzerindeki belirli geometrik ilişkilerden doğar. İşte en çok kullanılan altı şema ve hemen kullanabileceğiniz renk kodları:

Anadolu parsı maskotumuz renk çemberindeki tonları incelerken — Renk çemberi: her uyumlu paletin doğduğu yer.

1. Monokromatik (Tek Renk, Çok Ton)

Tek bir rengin açıktan koyuya tonları. Son derece zarif, sakin ve hata yapması zor bir şemadır. Kurumsal ve minimal siteler için idealdir.

#064E3B

#047857

#10B981

#6EE7B7

#D1FAE5

2. Analog (Komşu Renkler)

Çemberde yan yana duran renkler. Doğada sık görülür (gün batımı, orman), bu yüzden göze çok rahat gelir. Huzurlu ve uyumlu bir his verir.

#0EA5E9

#06B6D4

#14B8A6

#10B981

#84CC16

3. Tamamlayıcı (Komplementer)

Çemberde tam karşı karşıya duran iki renk. Maksimum kontrast ve canlılık verir. Bir CTA butonunu zeminden ayırmak için mükemmeldir; ama büyük alanlarda dengeli kullanılmalıdır.

#1D4ED8

#3B82F6

#F8FAFC

#FB923C

#F97316

4. Ayrık Tamamlayıcı (Split-Complementary)

Bir ana renk ve karşısındaki rengin iki komşusu. Tamamlayıcının canlılığını verir ama gerilimi yumuşatır. Yeni başlayanlar için en güvenli "cesur" şemadır.

#2563EB

#E2E8F0

#F59E0B

#EF4444

#0F172A

5. Üçlü (Triadik)

Çemberi üçe bölen, eşit aralıklı üç renk. Çok canlı ve dengeli sonuçlar verir. Genellikle biri baskın, ikisi vurgu olarak kullanılır. Yaratıcı ve enerjik markalar için harikadır.

#3B82F6

#EC4899

#84CC16

#F9FAFB

#111827

6. Dörtlü (Tetradik)

İki tamamlayıcı çiftten oluşan zengin bir şema. Çok renk sunduğu için en zoru budur; başarı için birini baskın seçip diğerlerini dengelemek gerekir.

#6366F1

#14B8A6

#F43F5E

#F59E0B

#F8FAFC

60-30-10 Kuralı: Dengenin Formülü

İç mimariden gelen bu altın oran, web tasarımında da işe yarar. Bir paleti üç orana böler ve gözün yorulmadan dolaşacağı bir denge kurar:

60
Baskın renk (%60)
Genellikle nötr bir zemin: arka plan, geniş alanlar. Sayfanın havasını belirler.
→ Beyaz, açık gri, koyu lacivert gibi sakin bir taban
30
İkincil renk (%30)
Kartlar, bölümler, başlıklar. Baskın renkle kontrast oluşturur, hiyerarşi kurar.
→ Marka renginiz ya da onun bir tonu
10
Vurgu rengi (%10)
Sadece en kritik yerlerde: CTA butonu, bağlantılar, aktif durumlar. Az olduğu için güçlüdür.
→ Dikkat çeken canlı bir aksan

60% Zemin

30% Marka

10%

Web İçin Hazır Paletler

Teoriyi pratiğe dökelim. Aşağıda farklı sektör ve duygular için, doğrudan kullanabileceğiniz beş palet var. Her biri bir ana, bir ikincil, bir vurgu, bir yüzey ve bir metin rengi içerir:

Kurumsal Güven · Finans, hukuk, danışmanlık

#1E3A8A

#3B82F6

#F59E0B

#F8FAFC

#0F172A

Doğal & Taze · Sağlık, sürdürülebilirlik, teknoloji (bizim ruhumuz)

#065F46

#10B981

#34D399

#F9FAFB

#111827

Premium Minimal · Lüks, moda, portföy

#0A0A0A

#1F2937

#9CA3AF

#FFFFFF

#E5E7EB

Sıcak & Davetkâr · Yeme-içme, eğitim, çocuk

#9A3412

#F97316

#FACC15

#FFFBEB

#1C1917

Modern Teknoloji · SaaS, yapay zeka, startup

#4338CA

#6366F1

#22D3EE

#F5F3FF

#1E1B4B

Anadolu parsı maskotumuz uyumlu bir renk paletini swatch kartlarıyla diziyor — Doğru palet, tek tek güzel renklerden değil, birlikte konuşan renklerden oluşur.

Erişilebilirlik: Renk Yetmez, Kontrast Şarttır

Burası işin mühendislik tarafı. Bir palet ne kadar şık olursa olsun, metin okunmuyorsa başarısızdır. WCAG (Web İçeriği Erişilebilirlik Yönergeleri) metin ile zemin arasındaki kontrast oranını net rakamlarla tanımlar:

4.5:1

Normal boyutlu metin için WCAG AA minimum kontrast oranı.

WCAG 2.2 · 1.4.3

3:1

Büyük metin (18.66px+ kalın / 24px+) ve arayüz bileşenleri için AA minimum.

WCAG 2.2 · 1.4.11

7:1

WCAG AAA hedefi: en yüksek okunabilirlik, en geniş kitle.

WCAG 2.2 · 1.4.6

~%8

Erkeklerde kırmızı-yeşil renk körlüğü oranı. Tek başına renge güvenmeyin.

Renk körlüğü istatistiği

Aradaki farkı gözle görmek en iyisi. Aşağıdaki iki kutu aynı yeşil zemin üzerinde: soldaki açık gri metin AA'da kalır, sağdaki koyu metin rahatça geçer.

Düşük kontrast (zor okunur)

Açık metin, açık zemin: göz yorar, AA'da kalır.

Yüksek kontrast (net okunur)

Koyu metin, açık zemin: rahat okunur, AAA'ya yaklaşır.

Bir başka altın kural: asla saf siyahı (#000000) saf beyazın (#FFFFFF) üzerine koymayın. Bu kombinasyon gözde titreşim yaratır ve uzun okumada yorar. Bunun yerine #0A0A0A ile #FAFAFA gibi hafif yumuşatılmış tonlar kullanın; daha profesyonel ve daha rahat bir okuma sunar.

En Sık Yapılan Renk Hataları

Çok fazla renk

Her bölüme farklı bir canlı renk koymak sayfayı kakofoniye çevirir. 60-30-10 kuralına sadık kalın; bir vurgu rengi yeter.

Sadece renge güvenmek

Hata mesajını yalnızca kırmızıyla, başarıyı yalnızca yeşille göstermek renk körü kullanıcıları dışlar. Renge mutlaka ikon veya metin ekleyin.

Düşük kontrastlı "şık" gri

Açık gri metin minimalist görünür ama okunmaz. Estetik uğruna erişilebilirlikten ödün vermeyin.

Markadan kopuk renkler

Her sayfada farklı bir renk dünyası güveni zedeler. Renk, marka kimliğinin en hızlı tanınan parçasıdır; tutarlı olun.

Hitit Medya'da Renk ve Kod Birlikte Çalışır

Bizim için renk, tasarımcının son anda eklediği bir süs değil, mimarinin parçasıdır. Next.js projelerimizde renkleri tek tek elle yazmayız; tasarım jetonları (design tokens) ve CSS değişkenleri olarak tanımlarız. Böylece tek bir yerden değişen bir marka rengi, tüm siteye saniyeler içinde, tutarlı biçimde yayılır. Açık/koyu tema desteği de bu yapıyla doğal olarak gelir.

Her paleti yayına almadan önce mühendislik tarafından geçiririz: kontrast oranlarını otomatik test eder, renk körlüğü simülasyonuyla (Viénot modeli) paletin herkes için okunaklı kaldığını doğrularız. Estetik ile erişilebilirlik arasında seçim yapmayız; tıpkı hız ile güzellik arasında yapmadığımız gibi. Renk uyumunuzu canlı sitenizde Tasarım Denetimi aracımızla siz de ölçebilirsiniz.

Anadolu parsı maskotumuz bir yanda kod bir yanda ressam paletiyle mühendislik ve sanatı dengeliyor — Bir yanda kod, bir yanda palet: iyi web tasarımı ikisini de ister.

Sonuç: Renk Bir Tercih Değil, Bir Karardır

Renk uyumu şans işi değildir. Renk çemberinin geometrisi, psikolojinin sezgisi ve erişilebilirliğin matematiği bir araya geldiğinde ortaya hem güzel hem de işleyen bir arayüz çıkar. Doğru palet, markanızı tek bakışta tanıtır, güven verir ve kullanıcıyı yormadan yönlendirir.

Markanızın renk dilini, tıpkı kodu kurduğumuz titizlikle birlikte kuralım: bizimle iletişime geçin.

Ücretsiz · Canlı Sitenizde Deneyin

Renk ve tasarım uyumunuzu saniyeler içinde test edin

Hitit Medya olarak tasarımı yalnızca anlatmayız, ölçeriz. Canlı adresinizi girin; renk uyumu, kontrast, tipografi ve teknik kaliteyi anında görün.

01Tasarım DenetimiRenk uyumu, WCAG kontrastı ve arayüz metrikleri→02SEO AnaliziMeta yapısı, başlık hiyerarşisi ve teknik SEO skoru→03Responsive TestMobil, tablet ve masaüstünde anlık görünüm→04EEAT AnaliziDeneyim, uzmanlık, otorite ve güvenilirlik skoru→

Tüm araçlar ücretsizdir, kayıt gerekmez.

Kaynaklar ve Referanslar

Adobe Color

Renk çemberi üzerinden uyum şemalarını (analog, triadik, tamamlayıcı) canlı üreten araç.

WCAG 2.2 · Kontrast

W3C'nin metin-zemin kontrast oranı standartları ve resmi açıklamaları.

Refactoring UI

Pratik arayüz ve renk paleti kararları için geliştirici odaklı rehber.

Coolors

Saniyeler içinde uyumlu palet üreten ve dışa aktaran popüler palet aracı.

Sıkça Sorulan Sorular

01Bir web sitesinde kaç renk kullanılmalı?

Genel kural 60-30-10'dur: bir baskın (nötr) renk, bir ikincil (marka) renk ve bir vurgu rengi. Buna nötr gri tonlarını ve metin rengini ekleyin. Üç ana renkten fazlası çoğu sitede dağınıklık yaratır.

02Hangi renk en çok güven verir?

Mavi ve yeşil genel olarak en güven veren renklerdir; mavi kurumsallık ve teknolojiyle, yeşil denge ve doğayla ilişkilendirilir. Ancak doğru renk sektöre ve hedef kitleye bağlıdır: bir lüks markası için siyah, bir çocuk markası için sıcak tonlar daha doğru olabilir.

03HEX renk kodu nedir?

HEX, bir rengi #RRGGBB biçiminde tanımlayan altılı bir koddur. İlk iki hane kırmızı, ortadaki iki hane yeşil, son iki hane mavi yoğunluğunu 00 ile FF (0-255) arasında belirtir. Örneğin #10B981 Hitit Medya yeşilidir. Web'de RGB ve HSL gösterimleri de kullanılır.

04Metin ile zemin arasındaki kontrast neden bu kadar önemli?

Yetersiz kontrast metni okunmaz hale getirir, görme zorluğu yaşayan kullanıcıları dışlar ve mobilde güneş altında siteyi kullanılamaz kılar. WCAG, normal metin için en az 4.5:1 oran ister. İyi kontrast aynı zamanda erişilebilirlik ve E-E-A-T sinyalleriyle dolaylı olarak SEO'ya da katkı sağlar.

05Marka rengimi nasıl seçmeliyim?

Sektörünüzü, hedef kitlenizi ve uyandırmak istediğiniz duyguyu belirleyin. Tek bir güçlü marka rengi seçip etrafına nötr bir gri-beyaz iskelet kurmak en güvenli yoldur. Seçtiğiniz rengin açık/koyu tonlarını üretin ve her kombinasyonu kontrast açısından test edin. Hitit Medya olarak bu süreci sizinle birlikte, hem estetik hem mühendislik gözüyle yürütüyoruz.

#UI

Web Tasarımında Renklerin Uyumu Nasıl Olmalıdır?

#UI

Web Tasarımında Renklerin Uyumu Nasıl Olmalıdır?