Bir web sitesinde her rengin bir görevi vardır: arka plan, metin, butonlar, bağlantılar ve uyarılar. Bu 12 palet buna göre hazırlandı: açık veya koyu bir arka plan, okunaklı bir metin rengi ve butonlar için bir vurgu rengi. HEX kodlarını doğrudan CSS dosyana veya site oluşturucuna kopyala.
Temiz mavi SaaS
Neredeyse beyaz arka plan, çok koyu mavi metin ve canlı mavi butonlar.
Sade kurumsal
Hukuk büroları, danışmanlık firmaları veya sanayi şirketleri için.
Sıcak e-ticaret
Turuncu, satın alma butonlarını sıcak bir arka plan üzerinde öne çıkarır.
Yeşilli karanlık mod
Katmanlı koyu arka planlar, açık metin ve eylemler için yeşil vurgu.
Doğal ve organik
Doğal ürün mağazaları, bostanlar veya sağlıklı yaşam için.
Samimi pastel
Sıcak; koyu gri-mavi metnin okunmasını garanti eder.
Kırmızılı editoryal
Bloglar, dergiler ve haber siteleri için; kırmızı bağlantıları ve başlıkları işaretler.
Teknolojik mor
Dijital ürünlerde, online kurslarda ve yapay zekâ araçlarında yaygın.
Turkuaz ve mercan
Birbirini tamamlayan iki vurgu: biri butonlar, biri uyarılar için.
Koyu lüks
Fotoğrafların ön planda olduğu oteller, restoranlar veya premium markalar için.
Sağlık ve iyi yaşam
Temiz ve sakin; klinikler ve terapiler için iyi.
Kum ve petrol yeşili
Hem sıcak hem ciddi; turizm, emlak veya kafeler için.
HEX kodunu kopyalamak için bir renge dokun. Kalem simgesi, paleti değiştirebilmen için editörde açar.
60-30-10 kuralını uygula
Baskın rengi (genellikle arka plan) sayfanın yaklaşık %60'ında, ikincil rengi %30'unda (bölümler, kartlar, üst menü) ve vurgu rengini kalan %10'da kullan. Vurgu rengini butonlara ve bağlantılara ayır; böylece kullanıcı nereye tıklayacağını bilir.
Metin kontrastını kontrol et
WCAG erişilebilirlik yönergeleri normal metin için en az 4,5:1 kontrast ister. Beyaz üzerinde açık gri şık görünür ama okuması zordur, özellikle güneş altında telefonda. Yayınlamadan önce bir kontrast kontrol aracı kullan.
Durumlar ve uyarılar için renk belirle
Marka paletinin yanında bir web sitesinin hata (kırmızı), başarı (yeşil) ve uyarı (sarı veya turuncu) renklerine de ihtiyacı vardır. Paletinle uyumlu tonlar seç ve formlarda ve mesajlarda hep aynı şekilde kullan.