Hex kodlarıyla 32 web sitesi renk şeması, We.Inc şablon tasarımlarından alınmış; artı dönüşen bir şemanın nasıl kurulacağı: eylemler için ayrılmış tek bir vurguyla sakin bir temel palet, sektöre göre örnekler ve erişilebilirlik kontrolleri.
Her yerde kazanan tek bir renk yoktur. En iyi düğme rengi, sayfanızla güçlü biçimde kontrast oluşturan ve başka hiçbir şey için kullanılmayan renktir, böylece göz doğrudan ona gider.
Yaygın bir yaklaşım, nötr bir temel (beyaz veya kırık beyaz ve koyu bir metin rengi), bir birincil marka rengi ve eylem çağrıları için bir vurgu, artı başarı ve hata mesajları için anlamsal renklerdir. Bundan fazlası genellikle görsel hiyerarşiyi zayıflatır.
Renk çağrışımları vardır ama kültüre, sektöre ve bağlama göre değişir ve birçok popüler iddia abartılmıştır. Dönüşümleri güvenilir biçimde etkileyen şey kontrast, okunabilirlik ve istediğiniz eylemin görsel olarak açık olup olmadığıdır.
Sanayi alıcıları netliğe ve güvene değer verir. Lacivert, kömür ve çelik grisi ile tek güçlü bir vurgu, çoğu zaman güvenlik turuncusu, sarı veya parlak bir mavi, kategoriye uyar. Şartname belgelerinin, teklif düğmelerinin ve telefon numaralarının vurguyu kullandığından emin olun, böylece bulunmaları kolay olur.
WebAIM'inki gibi bir kontrast denetleyicisi kullanın. WCAG 2.2 AA düzeyi, normal metin için en az 4.5:1, büyük metin ve düğme kenarlıkları ile form alanları gibi temel arayüz öğeleri için 3:1 kontrast ister.
Hiçbir tek renk en iyi dönüştürmez. Önemli olan bir düğmenin sayfasına karşı ne kadar öne çıktığıdır. Dönüştüren renk şemaları, sakin, tutarlı bir tabana ve yalnızca insanların yapmasını istediğiniz eylemler için ayrılmış tek bir yüksek kontrastlı vurguya sahip olanlardır.
Yani "hangi renk?" diye sormak yerine "en önemli düğmem sayfadaki hiçbir şeye benzemiyor mu?" diye sorun. Bu rehber, bu fikrin etrafında bir şemanın nasıl kurulacağını gösterir.
Bu paletler, We.Inc'in kendi şablon tasarımlarının kaynağından alınmıştır (önizleme çerçevesinin düz grilerini hariç tutarak her tasarımın önizlemesinde en çok kullanılan dört renk). Bunlar şablon tasarımlarıdır, müşteri siteleri değil; ve herhangi birinin nasıl dönüştürdüğü konusunda hiçbir iddiamız yoktur. Bir hex kodunu görmek ve RGB/HSL değerlerini almak için hex renk seçicisine kopyalayın ve kullanmadan önce herhangi bir metin-arka plan çiftini renk kontrast denetleyicisinde kontrol edin.
| We.Inc şablon tasarımı | Stil | Renkler (hex) | Şema |
|---|---|---|---|
| Atlas Builders | İnşaat / esnaf | #101d2c #0b1521 #f2a614 #d18f0a | Derin lacivert taban, kehribar eylem rengi |
| Summit Trades | Esnaf | #0e2436 #e4671e #16222e #f6eeec | Güvenlik turuncusuyla lacivert |
| Ironpeak Roofing | Çatı | #e4671e #0e2436 #17415f #16222e | Turuncu liderli, lacivert yapı |
| Ridgewater Plumbing | Tesisat | #b08544 #d8401f #f2ede3 #c9a063 | Sıcak kremde pirinç ve kırmızı |
| Sunward Solar | Güneş enerjisi | #0b1f3a #f5a524 #d98a0b #fff6e6 | Gece laciverdı ve güneş altını |
| Hookline Towing | Çekici | #0e0e0e #ffc400 #f4f1ea #161616 | Siyah ve yüksek görünürlük sarısı |
| Redline Auto Group | Otomobil galerisi | #e3262e #0e0f11 #eeeeee #17191c | Siyaha yakın üzerinde yarış kırmızısı |
| Maple Street Motors | Oto tamir | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Hardal ile orman yeşili |
| Freshpile Carpet Cleaning | Temizlik | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Kraliyet lacivertinde parlak sarı |
| Tideline Pressure Washing | Dış cephe temizliği | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Akuayla koyu lacivert |
| Mowline Lawn Care | Çim bakımı | #eef3e6 #c6f24e #0f1410 #1a2a17 | Açık yeşil taban, limon vurgusu |
| Fairway Lawn Co. | Peyzaj | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Krem, derin yeşil, yumuşak altın |
| Brightside Dental | Diş | #10312e #3f605c #0e5f57 #0a4841 | Sakin teal-yeşiller |
| Meadowpaw Veterinary | Veteriner | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Soluk nanede donuk teal |
| Vibrant Wellness | Sağlıklı yaşam kliniği | #25382c #eef2e6 #7c9a7e #3f6b4a | Adaçayı ve orman |
| Kinfolk Home Care | Ev bakımı | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Sıcak sarıyla çam yeşili |
| Lumora | Sağlık | #c8a97e #182c41 #0b1220 #0e1a26 | Kum altınıyla gece laciverdı |
| Sterling & Vance LLP | Hukuk bürosu | #8a93a2 #b08a4f #0b0e14 #f6eeec | Arduvaz, bronz ve mürekkep |
| Harborview Wealth Partners | Finansal danışmanlık | #102a43 #b08d57 #d9bf8f #faf8f4 | Fildişi üzerinde lacivert ve altın |
| Harborline Insurance Agency | Sigorta | #0f2742 #5fd3c9 #17a398 #0b1e33 | Tealliyle lacivert |
| Larkfield Partners | Danışmanlık | #1f4d3f #f4f1ea #14181c #4a5560 | Kâğıt üzerinde şişe yeşili |
| Keystone Realty | Gayrimenkul | #f6eeec #7a2e2a #59606b #e9f0ef | Kan kırmızısıyla allık taban |
| Lucia Trattoria | Restoran | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Zeytun-siyahla sıcak kum |
| Ember & Roast | Kafe / restoran | #ede6dc #c9642f #14100d #f6eeec | Yulaf, yanmış turuncu, espresso |
| Kilnhouse Coffee | Kahve dükkanı | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Kavurma kahvesi ve terrakota |
| Parcel No. 9 Wines | Şaraphane | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Gül pembesiyle kırmızı |
| Petalry Florist | Çiçekçi | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Erik ve tozlu pembe |
| Hollow Oak Farm Shop | Çiftlik dükkanı | #24301f #f6f1e4 #5e7f3a #e3a33b | Yosun, krem ve bal |
| Suds & Scruff | Evcil hayvan bakımı | #3b1740 #ffd84d #ff8fab #fff8e7 | Patlıcan, sarı ve pembe |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Mercanla viyole |
| Mast Security | Güvenlik | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Nanede grafit |
| Afterglow Sound | Etkinlikler / müzik | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavanta, pembe ve mor |
Bunların çoğunda göreceğiniz bir desen: çoğu, koyu veya açık bir tabanı tek doymuş vurguyla eşleştirir (kehribar, turuncu, sarı, limon veya mercan). Bu, aşağıda açıklanan "sakin taban, tek eylem rengi" yapısıyla aynıdır.
Renk psikolojisi makaleleri çoğu zaman mavinin güven, kırmızının aciliyet ve yeşilin büyüme anlamına geldiğini iddia eder. Genel çağrışımlarda bir miktar doğruluk vardır, ama kültüre, sektöre ve bağlama büyük ölçüde bağlıdırlar. Kırmızı bir ortamda uyarı, bir başkasında kutlamadır. Yeşil "git", "eko" veya "para" anlamına gelebilir.
İyi desteklenen şey, Von Restorff etkisi olarak da bilinen izolasyon etkisidir: çevresinden farklı bir öğenin fark edilme ve hatırlanma olasılığı daha yüksektir. Mavi-beyaz bir sayfadaki tek turuncudaki bir düğme fark edilir. Turuncuyla dolu bir sayfadaki aynı turuncu edilmez.
Bu size sektörler arasında geçerli iki kural verir:
İç mimarlar 60-30-10 bölünmesi kullanır ve web sitelerine iyi çevrilir:
| Pay | Rol | Tipik seçim |
|---|---|---|
| ~%60 | Arka plan ve temel | Beyaz, kırık beyaz, çok açık gri veya koyu temalar için derin koyu |
| ~%30 | Marka ve yapı | Üst bilgiler, gezinme, bölüm arka planları için birincil marka rengi |
| ~%10 | Vurgu / eylem | Düğmeler, önemli bağlantılar, tıklanmasını istediğiniz tek şey |
Koyu bir metin rengi (saf siyah yerine siyaha yakın veya koyu gri yaygındır) ve anlamsal renkler ekleyin: başarı için yeşil, hatalar için kırmızı, uyarılar için kehribar. Bu anlamsal renkleri ana düğmelerinizden uzak tutun ki bir "Şimdi satın al" düğmesi bir hatayla karıştırılmasın.
Bir logonuz varsa ana rengini birincil olarak alın. Yoksa kategorinize uyan (aşağıdaki tabloya bakın) ve birlikte yaşayacak kadar beğendiğiniz birini seçin.
Renk çarkına bakın. Tamamlayıcı renkler (birbirinin karşısındakiler) en güçlü patlamayı yaratır: mavi ve turuncu, mor ve sarı, teal ve mercan. Markanız maviyse, turuncu veya sıcak sarı bir vurgu, ikinci bir mavi tonundan çok daha fazla öne çıkar.
Bir arka plan, kartlar için bir yüzey rengi, bir kenarlık grisi ve bir metin rengi seçin. Bunlar işin çoğunu yapar ve sessiz olmalıdır.
Her metin ve düğme kombinasyonunu bir kontrast denetleyicisinden geçirin (WebAIM'inki ücretsizdir). WCAG 2.2 AA düzeyi şunları gerektirir:
Beyaz üzerinde düşük kontrastlı gri metin, web'deki en yaygın okunabilirlik sorunlarından biridir. İnsanlar teklifinizi okumakta zorlanıyorsa, düğme rengi pek önemli değildir.
Paletinizi açık havada bir telefonda, ucuz bir dizüstü ekranında ve siteniz destekliyorsa karanlık modda kontrol edin. Bir tasarımcının monitöründe zarif görünen renkler başka yerlerde solabilir.
Bunlar makul başlangıç noktalarıdır, kurallar değil. Her biri sessiz bir taban ve tek bir kontrastlı vurgu kullanır.
| Sektör | Taban ve birincil | Eylemler için vurgu | Neden işe yarar |
|---|---|---|---|
| İmalat / sanayi | Lacivert, kömür, çelik grisi | Güvenlik turuncusu veya sarısı | Ciddi ve güvenilir, görünür bir "Teklif isteyin" ile |
| Sağlık / diş | Beyaz, yumuşak mavi veya teal | Sıcak mercan veya yeşil | Temiz ve sakin, randevu düğmesi öne çıkar |
| Hukuk / finans | Derin lacivert veya orman yeşili, krem | Altın veya parlak mavi | Net bir iletişim eylemiyle geleneksel güven işaretleri |
| Restoranlar / yemek | Sıcak nötrler, derin kırmızı veya zeytin | Parlak sarı veya turuncu | İştah açıcı, belirgin bir "Sipariş" veya "Rezervasyon" ile |
| SaaS / teknoloji | Beyaz veya siyaha yakın, çivit veya mavi | Canlı yeşil, turuncu veya pembe | Net, yüksek kontrastlı bir "Ücretsiz başlayın" ile |
| Güzellik / sağlıklı yaşam | Allık, adaçayı, krem | Derin erik veya siyah | Yumuşak marka, kendinden emin randevu düğmesi |
| Ev hizmetleri (tesisat, klima, çatı) | Beyaz, koyu mavi | Kırmızı veya turuncu | Acil durumlar için aciliyet hissi veren arama düğmesi |
| E-ticaret / moda | Çoğunlukla beyaz ve siyah | Bir marka vurgusu | Rengi ürün fotoğraflarının taşımasına izin verir |
Özellikle imalatçılar için: alıcılar çoğu zaman bir ürün veya yetenekler sayfasına iner ve bir şartname belgesi veya teklif ister. "Teklif isteyin", "Şartname belgesini indirin" ve telefon numarasını o sayfalarda vurgu renkli tek öğeler yapın.
Yeşil logolu, yeşil başlıklı, yeşil ikonlu, yeşil hero arka planlı ve yeşil bir "Ücretsiz keşif alın" düğmeli bir peyzaj şirketi sitesi hayal edin. Her şey marka uyumlu ve düğme kayboluyor.
Düzeltme:
Markayla ilgili hiçbir şey değişmedi, ama eylem artık ekrandaki en görünür şey.
Yeterli trafiğiniz varsa düğme veya vurgu rengi üzerinde bir A/B testi yapın, ama bir seferde tek şeyi değiştirin ve anlamlı olacak kadar uzun çalışmasına izin verin. Düşük trafikli siteler çoğu zaman güvenilir bir sonuca ulaşamaz; onlar için daha basit kontroller işe yarar:
Renk, bir sayfanın dönüşmesini sağlayan şeyin bir parçasıdır; dönüşen açılış sayfası örnekleri dökümümüz gerisini kapsar. We.Inc ile "turuncu bir teklif düğmeli lacivert ve gri" gibi istediğiniz görünümü sohbette tarif edebilir, şablonlara göz atabilir ve sonra renkleri görsel olarak veya kodda ince ayarlayabilirsiniz.
Ücretsiz başlayın · Kredi kartı gerekmez