Renk paleti seçimi: Fikirden hazır kodlara

Kerem Aydın·13 Temmuz 2026·⏱5 dk

Çevrimiçi olarak hızlıca bir renk paleti seçmek için renk çemberi tabanlı jeneratörleri (örneğin Adobe Color) veya hazır şema kütüphanelerini (Color Hunt) kullanın. Markanızın temel rengini belirleyin, bir kombinasyon şeması seçin (tamamlayıcı, analog veya monokromatik), erişilebilirlik için kontrastı kontrol edin ve değerleri web için HEX veya grafikler için RGB formatlarında kopyalayın.

Modern çevrimiçi araçlar, prototipleme aşamasında karmaşık grafik editörlerinin yerini almaktadır. Bu araçlar yalnızca uyumlu ton setleri oluşturmanıza olanak sağlamakla kalmaz, aynı zamanda CSS, Figma veya diğer tasarım sistemlerine doğrudan yapıştırılmaya hazır kodları anında elde etmenizi sağlar.

İçindekiler

Göreve göre araç seçimi
Uyumlu bir palet oluşturma kuralları
Erişilebilirlik ve kontrast kontrolü
Değerlerin dışa aktarılması: HEX, RGB ve CSS
Adım adım çalışma algoritması
Renk seçimindeki yaygın hatalar
SSS

Göreve göre araç seçimi

Farklı servisler farklı sorunları çözer. Seçim, elinizde zaten bir başlangıç rengi olup olmadığına veya sıfırdan mı başladığınıza bağlıdır.

Renk çemberi tabanlı jeneratörler

Adobe Color veya Coolors gibi araçlar, renk teorisini biliyorsanız veya tonları sıkı bir şekilde kontrol etmek istiyorsanız idealdir. Bir kural seçersiniz (üçlü, kare, bölünmüş tamamlayıcılık) ve servis matematiksel olarak kesin oranları hesaplar.

Kimler için: Web tasarımcıları, geliştiriciler, markalaşma ajansları.
Avantajı: Doygunluk ve parlaklık üzerinde tam kontrol.

Hazır palet kütüphaneleri

Color Hunt veya HueSnap gibi servisler küratörlü koleksiyonlar sunar. Deney yapmak için zamanınız yoksa veya hızlı ilhama ihtiyacınız varsa bu en iyi seçenektir.

Kimler için: SMM uzmanları, sunum hazırlayanlar, tasarımda yeni başlayanlar.
Avantajı: Tüm renkler görsel uyumluluk açısından zaten test edilmiştir.

Görselden türetme

Canva veya Image Color Picker gibi araçlar, bir fotoğrafı (ürün, iç mekan, doğa) yüklemenize ve baskın renkleri otomatik olarak ayıklamanıza olanak tanır.

Kimler için: E-ticaret siteleri, fotoğraf içeriğine odaklanan açılış sayfaları.
Avantajı: Palet, projenin görsel dizisiyle garantili bir şekilde uyum sağlar.

Başlangıç için Coolors.co kullanın. Beğendiğiniz renkleri kilitlemenize ve geri kalanını rastgele oluşturmanıza olanak tanır; bu da yaratıcılık ve sistem arasında denge bulmayı hızlandırır.

Uyumlu bir palet oluşturma kuralları

Dijital bir ürün için iyi bir palet nadiren eşit ağırlıklı renklerden oluşur. Genellikle 60-30-10 yapısı kullanılır:

%60 — Ana renk (arka plan, büyük alanlar). Genellikle nötr bir ton veya marka renginin çok açık bir versiyonudur.
%30 — İkincil renk (kartlar, kenar çubukları, başlıklar).
%10 — Vurgu rengi (CTA butonları, bağlantılar, bildirimler). En parlak ve en kontrastlı olandır.

Temel şema türleri

Şema türü	Açıklama	Nerede uygulanır
Monokromatik	Tek bir rengin tonları (farklı parlaklık/doygunluk).	Minimalizm, ciddiyetin önemli olduğu kurumsal portallar.
Analog	Çemberde yan yana duran 2–3 renk (örneğin mavi ve turkuaz).	Doğa temaları, sakin arayüzler, bloglar.
Tamamlayıcı	Birbirinin karşısındaki renkler (mavi ve turuncu).	Canlı açılış sayfaları, indirimler, butona dikkat çekme.
Üçlü	Eşit uzaklıkta üç renk.	Eğlence uygulamaları, çocuk siteleri, yaratıcı portfolyolar.

Beyaz zemin üzerinde metin için saf siyah (#000000) kullanımından kaçının. Bu, gözleri yoran aşırı kontrast yaratır. Koyu gri kullanın (örneğin #1A1A1A veya #333333).

Erişilebilirlik ve kontrast kontrolü

Metnin okunamadığı güzel bir palet işe yaramaz. WCAG (Web İçeriği Erişilebilirlik Yönergeleri) standartları, metin ve arka plan arasında belirli bir kontrast oranı gerektirir.

AA Seviyesi (minimum): Normal metin için en az 4.5:1 kontrast.
AAA Seviyesi (gelişmiş): En az 7:1 kontrast.

WebAIM Contrast Checker gibi ücretsiz kontrol araçlarını veya Figma/Chrome DevTools içindeki yerleşik araçları kullanın. "Pass" (Geçti) veya "Fail" (Kaldı) kararını almak için arka plan ve metin HEX kodlarını girin.

Değerlerin dışa aktarılması: HEX, RGB ve CSS

Palet onaylandığında, bunu çalışan projeye aktarmanız gerekir. Çevrimiçi jeneratörler genellikle birkaç dışa aktarma formatı sunar.

HEX (Onaltılık)

#RRGGBB formatı. Web geliştirme (HTML/CSS) için standarttır.

Örnek: #4F46E5 (doygun çivit mavisi).
Nerede kullanılır: Site stilleri, oluşturuculardaki (Tilda, Webflow) tema ayarları, SVG grafikleri.

RGB (Kırmızı, Yeşil, Mavi)

rgb(R, G, B) formatı. Dijital grafikte ve bazı düzenleme programlarında kullanılır.

Örnek: rgb(79, 70, 229).
Nerede kullanılır: Photoshop, mobil geliştirme (iOS/Android yerel renkler), Canvas API.

CSS Değişkenleri

Tasarım sistemleri için modern standart. Sitenin temasını birkaç satır kod değiştirerek değiştirmenize olanak tanır.

:root {
  --color-primary: #4F46E5;
  --color-secondary: #10B981;
  --color-text-main: #1F2937;
}

Birçok servis (örneğin Coolors), paleti doğrudan hazır CSS kodu olarak veya ortam değişkenlerine aktarmak için JSON dosyası olarak dışa aktarmanıza olanak tanır.

Adım adım çalışma algoritması

Ruh halini belirleyin. Referansları (moodboard) toplayın. Güven mi (mavi), enerji mi (kırmızı/turuncu) yoksa çevre dostuluğu mu (yeşil) uyandırmak istiyorsunuz?
Temel rengi sabitleyin. Markanın zaten bir logosu varsa, ana rengi ile başlayın.
Tamamlayıcıları oluşturun. Palet jeneratörüne gidin, temel HEX kodunu girin ve bir kombinasyon kuralı seçin (örneğin "Tamamlayıcı").
Parlaklığı ayarlayın. Arka plan renklerini daha açık, vurgu renklerini daha doygun hale getirin. Metin için en az bir çok açık ve bir çok koyu tonunuz olduğundan emin olun.
Kontrastı kontrol edin. "Metin-arka plan" çiftlerini erişilebilirlik kontrolcüsünden geçirin.
Dışa aktarın. HEX kodlarını bir tabloya veya CSS dosyasına kopyalayın. Gelecekte bakımı kolaylaştırmak için bunlara renge göre (--red, --blue) değil, işlevsel olarak (--btn-bg, --text-error) isim verin.

Renk seçimindeki yaygın hatalar

Çok fazla vurgu. Her şey parlaksa, hiçbir şey öne çıkmaz. Vurgu rengi ekranın %10'undan fazlasını kaplamamalıdır.
Öğe durumlarının ignor edilmesi. Hover (fareyle üzerine gelme) veya giriş hatası için renk seçmeyi unuttunuz mu? Ana renge %10–15 karartma veya aydınlatma ekleyin.
Renk körlüğü. Erkeklerin yaklaşık %8'i renk algısı bozukluğuna sahiptir. Bilgileri sadece renkle kodlamayın (örneğin "hata" durumunu sadece kırmızı çerçeve ile belirtmeyin). Anlamı bir simge veya metinle tekrarlayın.
Kültüre uygun olmama. Beyaz renk Avrupa'da saflığın sembolüdür, bazı Asya ülkelerinde ise yasın. Hedef kitlenizin coğrafyasını dikkate alın.

SSS

Bir palette 5'ten fazla renk kullanılabilir mi? Evet, ancak genellikle ek renkler ana renklerin tonlarıdır (daha açık/koyu). Arayüz için 1–2 ana, 1 vurgu rengi ve bir dizi nötr gri ton yeterlidir.

HEX ve RGB arasındaki fark nedir? Web için fark yoktur, birbirlerinin yerine kullanılabilirler. HEX daha kısadır ve kodda okunması daha kolaydır. RGBA ile çalışıyorsanız veya grafik editörlerinde çalışıyorsanız RGB gereklidir.

Mevcut bir logoya uygun renk nasıl seçilir? Logoyu Image Color Picker veya Canva gibi bir araca yükleyin. En belirgin rengi ana renk olarak seçin ve ardından görsel gürültü yaratmamak için etrafında monokromatik veya analog bir şema oluşturun.

Yeni başlayanlar için en iyi araç hangisidir? Color Hunt. Burada hiçbir şeyi ayarlamanız gerekmez: sadece beğendiğiniz hazır paleti seçin ve kodları kopyalayın.