32 skema warna website dengan kode hex dari desain template We.Inc, plus cara membangun skema yang mengonversi: palet dasar yang tenang dengan satu aksen yang disediakan untuk aksi, contoh per industri, dan pemeriksaan aksesibilitas.
Tidak ada satu warna yang menang di mana pun. Warna tombol terbaik adalah yang kontras kuat dengan halaman Anda dan tidak dipakai untuk hal lain, sehingga mata langsung tertuju ke sana.
Pendekatan umum adalah satu dasar netral (putih atau off-white dan satu warna teks gelap), satu warna merek utama, dan satu aksen untuk ajakan bertindak, plus warna semantik untuk pesan sukses dan error. Lebih dari itu biasanya melemahkan hierarki visual.
Asosiasi warna memang ada, tapi bervariasi menurut budaya, industri, dan konteks, dan banyak klaim populer dilebih-lebihkan. Yang secara andal memengaruhi konversi adalah kontras, keterbacaan, dan apakah aksi yang Anda inginkan terlihat jelas secara visual.
Pembeli industri menghargai kejelasan dan kepercayaan. Navy, arang, dan abu-abu baja dengan satu aksen kuat, sering oranye safety, kuning, atau biru cerah, cocok untuk kategori ini. Pastikan lembar spesifikasi, tombol penawaran, dan nomor telepon memakai warna aksen agar mudah ditemukan.
Pakai contrast checker seperti milik WebAIM. WCAG 2.2 level AA meminta kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar serta elemen antarmuka kunci seperti border tombol dan kolom formulir.
Tidak ada satu warna yang paling mengonversi. Skema warna yang mengonversi adalah yang punya dasar tenang dan konsisten serta satu aksen kontras tinggi yang disediakan hanya untuk aksi yang Anda ingin orang lakukan.
Jadi alih-alih bertanya "warna apa?", tanyakan "apakah tombol terpenting saya terlihat tidak seperti apa pun di halaman ini?" Panduan ini menunjukkan cara membangun skema di sekitar gagasan itu.
Palet-palet ini diambil dari sumber desain template milik We.Inc sendiri (empat warna yang paling sering dipakai dalam pratinjau setiap desain, tidak termasuk abu-abu polos dari bingkai pratinjau). Ini adalah desain template, bukan situs pelanggan, dan kami tidak mengklaim bagaimana masing-masing mengonversi. Salin kode hex ke hex color picker untuk melihatnya dan mendapatkan nilai RGB/HSL, serta periksa setiap pasangan teks-pada-latar belakang di color contrast checker sebelum Anda memakainya.
| Desain template We.Inc | Gaya | Warna (hex) | Skema |
|---|---|---|---|
| Atlas Builders | Konstruksi / perdagangan | #101d2c #0b1521 #f2a614 #d18f0a | Dasar navy tua, warna aksi amber |
| Summit Trades | Perdagangan | #0e2436 #e4671e #16222e #f6eeec | Navy dengan oranye safety |
| Ironpeak Roofing | Atap | #e4671e #0e2436 #17415f #16222e | Dipimpin oranye, struktur navy |
| Ridgewater Plumbing | Ledeng | #b08544 #d8401f #f2ede3 #c9a063 | Kuningan dan merah di atas krem hangat |
| Sunward Solar | Surya | #0b1f3a #f5a524 #d98a0b #fff6e6 | Biru tengah malam dan emas matahari |
| Hookline Towing | Towing | #0e0e0e #ffc400 #f4f1ea #161616 | Hitam dan kuning visibilitas tinggi |
| Redline Auto Group | Dealer mobil | #e3262e #0e0f11 #eeeeee #17191c | Merah balap di atas hampir hitam |
| Maple Street Motors | Bengkel mobil | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Hijau hutan dengan mustard |
| Freshpile Carpet Cleaning | Kebersihan | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Kuning cerah di atas navy kerajaan |
| Tideline Pressure Washing | Kebersihan eksterior | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Navy tua dengan aqua |
| Mowline Lawn Care | Perawatan rumput | #eef3e6 #c6f24e #0f1410 #1a2a17 | Dasar hijau pucat, aksen lime |
| Fairway Lawn Co. | Lansekap | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Krem, hijau tua, emas lembut |
| Brightside Dental | Gigi | #10312e #3f605c #0e5f57 #0a4841 | Teal-hijau yang tenang |
| Meadowpaw Veterinary | Veteriner | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Teal redup di atas mint pucat |
| Vibrant Wellness | Klinik wellness | #25382c #eef2e6 #7c9a7e #3f6b4a | Sage dan hutan |
| Kinfolk Home Care | Perawatan rumah | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Hijau pinus dengan kuning hangat |
| Lumora | Kesehatan | #c8a97e #182c41 #0b1220 #0e1a26 | Navy tengah malam dengan emas pasir |
| Sterling & Vance LLP | Firma hukum | #8a93a2 #b08a4f #0b0e14 #f6eeec | Slate, perunggu, dan tinta |
| Harborview Wealth Partners | Konsultasi keuangan | #102a43 #b08d57 #d9bf8f #faf8f4 | Navy dan emas di atas gading |
| Harborline Insurance Agency | Asuransi | #0f2742 #5fd3c9 #17a398 #0b1e33 | Navy dengan teal |
| Larkfield Partners | Konsultansi | #1f4d3f #f4f1ea #14181c #4a5560 | Hijau botol di atas kertas |
| Keystone Realty | Properti | #f6eeec #7a2e2a #59606b #e9f0ef | Dasar blush dengan oxblood |
| Lucia Trattoria | Restoran | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Pasir hangat dengan olive-hitam |
| Ember & Roast | Kafe / restoran | #ede6dc #c9642f #14100d #f6eeec | Oat, oranye terbakar, espresso |
| Kilnhouse Coffee | Kedai kopi | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Coklat panggang dan terrakota |
| Parcel No. 9 Wines | Winery | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Claret dengan ros |
| Petalry Florist | Florist | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Plum dan pink berdebu |
| Hollow Oak Farm Shop | Toko pertanian | #24301f #f6f1e4 #5e7f3a #e3a33b | Lumut, krem, dan madu |
| Suds & Scruff | Perawatan hewan peliharaan | #3b1740 #ffd84d #ff8fab #fff8e7 | Aubergine, kuning, dan pink |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Ungu dengan koral |
| Mast Security | Keamanan | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Grafit dengan mint |
| Afterglow Sound | Acara / musik | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavender, pink, dan ungu |
Pola yang akan Anda lihat di semua desain itu: sebagian besar memadukan dasar gelap atau pucat dengan satu aksen jenuh (amber, oranye, kuning, lime, atau koral). Itu adalah struktur "dasar tenang, satu warna aksi" yang sama yang dijelaskan di bawah.
Artikel psikologi warna sering mengklaim biru berarti kepercayaan, merah berarti urgensi, dan hijau berarti pertumbuhan. Ada sedikit kebenaran dalam asosiasi umum itu, tapi sangat bergantung pada budaya, industri, dan konteks. Merah adalah peringatan di satu konteks dan perayaan di konteks lain. Hijau bisa berarti "jalan," "eco," atau "uang."
Yang punya dukungan kuat adalah isolation effect, juga dikenal sebagai efek Von Restorff: sebuah item yang berbeda dari sekitarnya lebih mungkin diperhatikan dan diingat. Sebuah tombol yang menjadi satu-satunya warna oranye di halaman biru-putih akan diperhatikan. Oranye yang sama di halaman penuh oranye tidak.
Itu memberi Anda dua aturan yang berlaku di semua industri:
Desainer interior memakai pembagian 60-30-10, dan itu diterjemahkan dengan baik ke situs web:
| Porsi | Peran | Pilihan umum |
|---|---|---|
| ~60% | Latar dan dasar | Putih, off-white, abu-abu sangat terang, atau gelap pekat untuk tema gelap |
| ~30% | Merek dan struktur | Warna merek utama untuk header, navigasi, latar bagian |
| ~10% | Aksen / aksi | Tombol, tautan kunci, satu hal yang ingin Anda buat orang klik |
Tambahkan warna teks gelap (mendekati hitam atau abu-abu gelap, bukan hitam murni, adalah umum) dan warna semantik: hijau untuk sukses, merah untuk error, amber untuk peringatan. Jauhkan warna semantik itu dari tombol utama Anda agar tombol "Beli sekarang" tidak tertukar dengan error.
Jika Anda punya logo, ambil warna utamanya sebagai primer. Jika tidak, pilih satu yang cocok dengan kategori Anda (lihat tabel di bawah) dan yang cukup Anda sukai untuk dipakai lama.
Lihat roda warna. Warna komplementer (berlawanan satu sama lain) menciptakan pop terkuat: biru dan oranye, ungu dan kuning, teal dan koral. Jika merek Anda biru, aksen oranye atau kuning hangat akan menonjol jauh lebih banyak dibanding corak biru kedua.
Pilih latar, warna permukaan untuk kartu, abu-abu border, dan warna teks. Ini melakukan sebagian besar pekerjaan dan seharusnya tenang.
Jalankan setiap kombinasi teks dan tombol lewat contrast checker (punya WebAIM gratis). WCAG 2.2 level AA meminta:
Teks abu-abu kontras rendah di atas putih adalah salah satu masalah keterbacaan paling umum di web. Jika orang kesulitan membaca penawaran Anda, warna tombol nyaris tidak penting.
Cek palet Anda di ponsel di luar ruangan, di layar laptop murah, dan di dark mode jika situs Anda mendukungnya. Warna yang terlihat halus di monitor desainer bisa pudar di tempat lain.
Ini adalah titik awal yang masuk akal, bukan aturan. Masing-masing memakai dasar yang tenang dan satu aksen kontras.
| Industri | Dasar dan primer | Aksen untuk aksi | Mengapa berhasil |
|---|---|---|---|
| Manufaktur / industri | Navy, arang, abu-abu baja | Oranye safety atau kuning | Serius dan bisa diandalkan, dengan "Minta penawaran" yang terlihat |
| Kesehatan / gigi | Putih, biru lembut atau teal | Koral hangat atau hijau | Bersih dan tenang, tombol booking menonjol |
| Hukum / keuangan | Navy tua atau hijau hutan, krem | Emas atau biru cerah | Sinyal kepercayaan tradisional dengan aksi kontak yang jelas |
| Restoran / makanan | Netral hangat, merah tua atau olive | Kuning cerah atau oranye | Menggugah selera, dengan "Pesan" atau "Reservasi" yang jelas |
| SaaS / teknologi | Putih atau hampir hitam, indigo atau biru | Hijau, oranye, atau pink cerah | Rapi, dengan "Mulai gratis" berkontras tinggi |
| Kecantikan / wellness | Blush, sage, krem | Plum tua atau hitam | Merek yang lembut, tombol booking yang percaya diri |
| Jasa rumah tangga (ledeng, HVAC, atap) | Putih, biru tua | Merah atau oranye | Tombol panggilan yang terasa mendesak untuk darurat |
| Ecommerce / fashion | Sebagian besar putih dan hitam | Satu aksen merek | Membiarkan foto produk membawa warnanya |
Khusus untuk manufaktur: pembeli sering mendarat di halaman produk atau kapabilitas dan ingin lembar spesifikasi atau penawaran. Buat "Minta penawaran," "Unduh lembar spesifikasi," dan nomor telepon menjadi satu-satunya elemen berwarna aksen di halaman itu.
Bayangkan situs perusahaan lansekap dengan logo hijau, heading hijau, ikon hijau, latar hero hijau, dan tombol "Dapatkan estimasi gratis" hijau. Semuanya sesuai merek, dan tombolnya menghilang.
Perbaikannya:
Tidak ada yang berubah dari mereknya, tapi aksinya sekarang jadi hal paling terlihat di layar.
Jika Anda punya trafik yang cukup, jalankan A/B test pada warna tombol atau aksen, tapi ubah satu hal pada satu waktu dan biarkan berjalan cukup lama agar bermakna. Situs bertrafik rendah sering tidak bisa mencapai hasil yang andal; untuk mereka, pemeriksaan yang lebih sederhana berfungsi:
Warna adalah satu bagian dari yang membuat halaman mengonversi; ulasan kami tentang contoh landing page yang mengonversi membahas sisanya. Dengan We.Inc Anda bisa mendeskripsikan tampilan yang Anda inginkan lewat chat, seperti "navy dan abu-abu dengan tombol penawaran oranye," jelajahi template, lalu sempurnakan warnanya secara visual atau lewat kode.
Mulai gratis · Tanpa kartu kredit