Web Siteniz İçin İyi Bir Renk Paleti Nasıl Seçilir?

Bir web sitesine ilk girdiğimizde, tek bir kelime okumadan önce renkleri görürüz. Doğru seçilmiş bir palet siteyi profesyonel ve güvenilir gösterir; rastgele seçilmiş renkler ise içerik ne kadar iyi olursa olsun dağınık bir izlenim bırakır. İyi bir palet oluşturmak için tasarımcı olmana gerek yok, birkaç basit kurala uyman yeterli.

Bir paletin üç parçası

• Ana renk: Markanı temsil eder. Logo, başlıklar ya da geniş alanlarda kullanılır.
• Vurgu rengi: Dikkat çekmek istediğin yerler içindir: düğmeler, bağlantılar, önemli etiketler.
• Nötr renkler: Arka planlar, metinler, çizgiler. Beyaz, açık gri, koyu lacivert gibi tonlar. Sitenin büyük bölümü aslında bu renklerden oluşur.

Örneğin Zenka Dijital'de ana renk lacivert, vurgu rengi logomuzdaki mavi, nötr renkler de beyaz ve açık gri tonları.

60-30-10 kuralı

İç mimarlıktan gelen bu kural, renkleri dengeli dağıtmanın kolay bir yoludur:

• %60 baskın renk (genellikle nötr arka plan),
• %30 ikincil renk (menü, kartlar, bölüm arka planları),
• %10 vurgu rengi (düğmeler ve bağlantılar).

Vurgu rengini her yere serpiştirirsen "vurgu" olmaktan çıkar. Az kullanıldığında daha çok dikkat çeker.

Az renk, çok ton

Yeni başlayanların sık yaptığı hata çok fazla farklı renk kullanmaktır. Bunun yerine bir ya da iki renk seç ve onların açık ve koyu tonlarını üret. Açık bir mavi arka plan, normal mavi bir düğme ve koyu mavi bir üzerine gelme (hover) rengi; hepsi aynı aileden olduğu için uyumlu görünür.

Okunabilirliği asla feda etme

Bir palet ne kadar güzel olursa olsun, metin okunmuyorsa işe yaramaz. Metin rengiyle arka plan arasındaki farka kontrast denir. Erişilebilirlik standardı (WCAG) şunları önerir:

• Normal boyuttaki metinler için en az 4.5:1,
• Büyük başlıklar ve düğme, simge gibi arayüz öğeleri için en az 3:1 kontrast oranı.

Açık gri zemin üzerine açık gri yazı şık görünebilir ama birçok kişi için okunmaz. Renklerini seçtikten sonra WebAIM Contrast Checker gibi ücretsiz bir araçla kontrol et.

Anlamlı renkleri unutma

Kullanıcılar bazı renklere belirli anlamlar yükler: yeşil başarı, kırmızı hata, sarı uyarı. Bu "durum renklerini" paletine baştan ekle ve tutarlı kullan. Vurgu rengin kırmızıysa, hata mesajlarının fark edilebilmesi için farklı bir yol düşünmen gerekir.

Koyu tema = ters çevrilmiş renkler değil

Koyu tema yapacaksan renkleri sadece tersine çevirmek yetmez. Saf siyah (#000) yerine çok koyu lacivert ya da gri tonlar göze daha yumuşak gelir. Vurgu renginin de koyu zeminde biraz daha açık bir tonunu kullanman gerekir, yoksa okunabilirlik düşer.

Renkleri kodda düzenli tut

Renklerini CSS değişkenleri olarak tek bir yerde tanımlarsan, hem tutarlı kalırlar hem de değiştirmek kolaylaşır:

:root {
  --renk-arkaplan: #F6F7FB;
  --renk-metin: #0F1B3D;
  --renk-vurgu: #156CB8;
}

.dugme {
  background-color: var(--renk-vurgu);
}

Koyu tema için sadece bu değişkenlerin değerlerini değiştirmen yeterli olur.

İlham almak için ücretsiz araçlar

• Coolors: Tek tuşla uyumlu paletler üretir.
• Adobe Color: Renk çarkı üzerinden uyum kurallarıyla palet oluşturur.
• WebAIM Contrast Checker: İki rengin kontrast oranını hesaplar.

Paletini seçtikten sonra küçük bir deneme sayfasında başlık, paragraf, düğme ve kartları bir arada görerek test et. Renkler tek başına değil, birlikte güzel görünmeli.