Kombinasi Warna Website yang Enak Dilihat dan Menjual

Warna bekerja lebih cepat dari kata. Sebelum membaca satu kalimat pun, pengunjung sudah merasakan apakah halamanmu terasa premium, murah, ceria, atau serius, dan itu datang dari warna. Artikel ini membahas cara menyusun kombinasi warna yang enak dilihat sekaligus mendukung penjualan.

Kamu tidak perlu jadi desainer untuk ini. Satu rumus sederhana plus beberapa aturan kontras sudah cukup untuk hampir semua halaman jualan.

Rumus 60-30-10 yang selalu aman

Cara paling mudah menyusun palet adalah membagi tiga peran warna.

Pertama, 60 persen warna dominan sebagai latar. Untuk salespage, ini hampir selalu warna netral terang, putih atau abu sangat muda, supaya konten jadi bintangnya. Kedua, 30 persen warna sekunder untuk pemisah section, kartu, atau blok penegas. Ketiga, 10 persen warna aksen, dan ini yang paling penting, yaitu warna yang hanya dipakai untuk tombol aksi dan elemen yang mau kamu tunjuk.

Kunci dari rumus ini ada di angka 10-nya. Kalau warna aksen dipakai di mana-mana, tombol beli tidak lagi menonjol. Simpan warna paling mencolok di paletmu khusus untuk tombol order.

Kontras, aturan yang tidak bisa ditawar

Masalah warna paling umum di halaman jualan bukan kombinasi yang jelek, melainkan kontras yang kurang. Teks abu-abu muda di atas putih memang terlihat lembut, tapi di layar HP di bawah sinar matahari ia hilang.

Patokan praktisnya begini. Teks isi di atas latar terang pakai abu sangat gelap atau hitam lembut, bukan abu sedang. Teks di atas latar gelap pakai putih atau mendekati putih. Tombol aksi harus kontras terhadap warna sekitarnya, bukan hanya terhadap latar halaman.

Standar aksesibilitas web menyarankan rasio kontras minimal 4,5 banding 1 untuk teks biasa dan 3 banding 1 untuk teks besar. Kamu tidak perlu menghitungnya, cukup tes langsung di HP dengan kecerahan layar separuh. Kalau masih terbaca, kontrasmu aman.

Psikologi warna secara singkat

Setiap warna membawa asosiasi yang cukup konsisten di mata pembaca.

Warna	Asosiasi	Sering dipakai untuk
Biru	Percaya, tenang, profesional	Teknologi, keuangan, kesehatan
Hijau	Segar, alami, pertumbuhan	Produk sehat, halal, lingkungan
Merah	Urgensi, energi, berani	Promo, diskon, F&B
Oranye	Friendly, hangat, aksi	Tombol aksi, produk anak muda
Kuning	Ceria, optimis, perhatian	Produk anak, aksen promo
Ungu	Mewah, kreatif, spiritual	Kecantikan premium, produk spiritual
Hitam dan abu	Elegan, serius, eksklusif	Luxury, fashion pria, teknologi premium
Pink dan rose	Feminin, lembut, romantis	Skincare, produk wanita, wedding

Asosiasi ini tidak mutlak, tapi berguna sebagai titik awal. Biru dipakai hampir semua bank dan startup bukan karena kebetulan, melainkan karena terasa aman dan kredibel di hampir semua budaya.

Warna sesuai karakter produk

Gabungkan asosiasi warna dengan karakter produkmu.

Karakter produk	Latar	Aksen	Kesan
Wanita, skincare, kecantikan	Putih, krem, blush pucat	Rose, mauve, emas lembut	Lembut, bersih, feminin
Teknologi, software	Putih atau navy gelap	Biru elektrik, cyan	Modern, presisi, terpercaya
Anak dan keluarga	Putih hangat, kuning pucat	Oranye, hijau cerah, biru muda	Ceria, aman, playful
Serius, keuangan, B2B	Putih, abu muda	Navy, hijau tua	Stabil, kredibel, tenang
Premium, luxury	Putih, hitam, krem	Emas, cokelat tua	Eksklusif, dewasa
Perkakas, otomotif	Abu terang atau gelap	Oranye, kuning, merah	Kuat, tegas, fungsional
Umum, produk massal	Putih	Biru atau hijau	Netral, aman, universal

Perhatikan bahwa warna tombol tidak harus mengikuti warna brand. Kalau brandmu biru dan seluruh halaman biru, tombol oranye justru bekerja lebih baik karena kontras. Tombol aksi bertugas menonjol, bukan menyatu.

Mengatur ritme warna antar section

Halaman panjang butuh ritme visual supaya pembaca tahu sedang berpindah topik. Cara paling mudah adalah menggilir latar putih dan latar abu sangat muda antar section besar, tanpa mengubah warna aksen.

Section gelap boleh dipakai sekali atau dua kali untuk momen penting seperti penawaran utama atau testimoni kuat, karena perubahan drastis ke gelap otomatis menarik perhatian. Tapi jangan lebih dari itu, ritme terang-gelap yang zig-zag membuat halaman terasa tidak stabil.

Kesalahan warna yang sering terjadi

• Terlalu banyak warna. Batasi satu warna aksen utama, tambahan warna hanya untuk kebutuhan fungsional seperti harga coret.
• Gradient ramai tanpa alasan. Latar polos hampir selalu lebih mudah dibaca daripada latar gradient.
• Warna brand diterapkan membabi buta, termasuk untuk latar gelap pekat yang membuat teks panjang sulit dibaca.
• Teks penting seperti harga dan garansi diberi warna tipis. Justru elemen ini yang harus paling kontras.
• Warna tombol beda-beda di tiap section. Satu warna aksi untuk semua tombol beli.
• Section gelap dan terang bergantian tanpa pola, membuat halaman terasa tambal sulam.

Palet warna yang baik membuat tombol beli terlihat seperti satu-satunya tempat yang wajar untuk diklik.

Cara mulai menyusun paletmu

Mulai dari produk dan audiensnya, bukan dari warna favoritmu. Tentukan satu kesan utama yang harus dirasakan pengunjung, misalnya bersih untuk skincare atau kuat untuk perkakas, lalu pilih warna aksen dari tabel di atas.

Setelah itu susun palet tiga warna, satu latar netral, satu warna sekunder untuk pemisah section, satu warna aksen untuk tombol. Uji di halaman panjang dan perhatikan apakah matamu nyaman membaca dari atas sampai bawah.

Di page builder Temonjo, tiap elemen punya pengaturan warna teks dan latar sendiri, jadi kamu bisa mencoba beberapa palet di satu halaman percobaan sebelum memutuskan. Kombinasikan dengan font yang tepat dari panduan font sesuai karakter produk supaya kesannya konsisten.

Contoh palet siap pakai

Tiga palet ini bisa langsung kamu tiru. Semuanya mengikuti rumus 60-30-10.

Palet pertama untuk produk umum dan teknologi, latar putih, sekunder abu sangat muda untuk pemisah section, aksen biru untuk tombol. Palet kedua untuk produk feminin dan kecantikan, latar putih hangat atau krem, sekunder blush pucat, aksen rose tua untuk tombol. Palet ketiga untuk produk maskulin dan promo, latar abu terang, sekunder putih, aksen oranye untuk tombol.

Catat kode warna pilihanmu dan pakai konsisten di semua elemen. Konsistensi dua warna yang disiplin lebih kuat daripada lima warna yang dipakai acak.

Pertanyaan yang sering ditanyakan

Warna apa yang paling aman untuk tombol beli?

Warna yang paling kontras terhadap latar halamanmu. Oranye, hijau, dan merah umum dipakai karena menonjol di atas latar netral. Yang penting satu warna tombol dipakai konsisten di seluruh halaman.

Berapa banyak warna ideal dalam satu halaman?

Tiga peran warna sudah cukup, satu warna latar dominan, satu warna sekunder untuk pemisah section, dan satu warna aksen untuk tombol aksi. Tambahan warna hanya untuk kebutuhan fungsional.

Apakah latar gelap bagus untuk salespage?

Bisa, terutama untuk produk teknologi atau premium, tapi teksnya harus benar-benar terang dan kontras. Untuk produk umum dan audiens luas, latar terang lebih aman untuk keterbacaan.