Jelajah Visual #4: Sihir Warna & Psikologi User
Bukan Cuma Soal "Cantik", Tapi Soal Mengendalikan Emosi User
Oleh: InterfaceGenius
- Cara milih warna yang nggak bikin sakit mata
- Rumus rahasia komposisi warna (60-30-10)
- Panduan Dark Mode & Aksesibilitas
Warna Adalah Komunikasi Bawah Sadar
Sebelum user baca teks tombol "Beli", otaknya sudah merespons warna merah tombol itu dalam hitungan milidetik.
Emosi
Warna bisa bikin tenang, lapar, atau panik dalam sekejap
Fungsi
Membedakan mana tombol aktif, mana yang mati, dan mana pesan error
Intinya: Kalau warnamu kacau, user bakal bingung (dan kabur).
Lupakan Hex Code, Pakai HSB!
Jangan menghafal kode #FF0023. Desainer pro mikir pakai HSB (Hue, Saturation, Brightness):
- Hue (H): Jenis warnanya (Merah, Biru, Hijau)
- Saturation (S): Seberapa "ngejreng" warnanya (0 = Abu-abu, 100 = Neon)
- Brightness (B): Terang atau gelapnya
Trik: Mau bikin variasi warna? Kunci Hue-nya, mainkan S dan B-nya.
Setiap Warna Punya "Rasa"
Gunakan sesuai industri dan tujuanmu:
Biru
Kepercayaan, Teknologi, Aman (Bank, Sosmed)
Merah
Urgensi, Bahaya, Nafsu Makan, Diskon (Error state, F&B)
Hijau
Sukses, Uang, Alam (Fintech, Health)
Hitam/Putih
Mewah, Eksklusif, Minimalis (Fashion)
Ingat: Konteks itu raja. Ungu di aplikasi meditasi = Tenang. Ungu di e-commerce = Promo janda bolong?
The Golden Rule: 60-30-10
Jangan pakai semua warna sekaligus. Bagi porsinya:
1
60% Warna Netral
Background (Putih/Abu-abu lembut). Ini kanvasmu.
2
30% Warna Brand
Warna utama identitas (misal: Biru). Buat Header, Judul, atau Card.
3
10% Warna Aksen (Action)
Warna yang paling kontras (misal: Oranye/Kuning). KHUSUS buat tombol CTA.
Hasilnya: Mata user otomatis fokus ke yang 10% (Tombol Beli).
Jangan Bikin User Menyipitkan Mata
Desain bagus tapi nggak terbaca = Sampah.
Contrast Ratio
Pastikan tulisan kontras dengan background. Jangan pakai teks abu-abu muda di atas putih.
Cek WCAG
Gunakan plugin "Contrast" di Figma. Targetkan nilai minimal AA (4.5:1) untuk teks normal.
Buta Warna
Jangan cuma andalin warna buat error. Tambahkan Icon atau Teks. (Merah saja nggak cukup, user buta warna lihatnya abu-abu).
Warna yang Punya Tugas Khusus
Di UI, warna itu rambu lalu lintas:
Success (Hijau)
Transaksi berhasil, data tersimpan
Warning (Kuning/Oranye)
Hati-hati, password lemah, kuota mau habis
Error (Merah)
Gagal login, koneksi putus, hapus data
Info (Biru)
Ada fitur baru, status netral
Tips: Selalu sediakan 4 warna ini di palet "System" kamu, terpisah dari warna Brand.
Gelap Bukan Berarti Hitam Legam
Mau bikin Dark Mode? Jangan asal invert warna.
01
Hindari #000000
Pakai abu-abu gelap (#121212) biar nggak bikin mata lelah (smearing)
02
Kurangi Saturasi
Warna cerah di mode terang bakal nyolok banget di mode gelap. Turunin saturasinya biar lebih pastel/soft
03
Elevasi
Di mode gelap, bayangan (shadow) nggak kelihatan. Gunakan warna abu-abu yang lebih terang untuk menunjukkan lapisan (layer) di atasnya
Nama Warna Itu Penting!
Jangan namain warna sesuka hati. Gunakan Semantic Naming:
❌ Salah
- Dark-Blue
- Red-500
- Light-Grey
(Kalau rebranding ganti warna jadi ungu, namanya jadi aneh)
✅ Benar
- Primary-Action
- Surface-Background
- Text-Muted
- State-Error
Ini bikin developer gampang ganti tema (Theming) tanpa ngacak-ngacak kodingan
Warna Adalah Emosi yang Terlihat
Warna yang tepat bisa menaikkan konversi dan bikin user betah. Warna yang salah bisa bikin user uninstall.
Cheat Sheet Palet (Mulai dari sini):
Primary
#3B82F6 (Royal Blue)
Neutral
#F3F4F6 (Cool Grey)
Success
#10B981 (Emerald)
Error
#EF4444 (Red)
Warning
#F59E0B (Amber)
Next Topic: Jelajah Visual #5: Tipografi yang Berbicara. (Coming Soon!)