Palet Warna

Palet warna untuk aplikasi mobile

Dalam aplikasi, warna menunjukkan apa yang bisa disentuh, apa yang sedang aktif, dan apa yang berhasil atau gagal. 12 palet ini berisi latar, permukaan, warna utama, dan teks sesuai jenis aplikasinya, dengan kode HEX yang bisa Anda bawa ke Figma, Flutter, SwiftUI, atau React Native.

Fintech biru dan hijau

Biru untuk kepercayaan dan hijau untuk saldo serta transaksi berhasil.

Delivery oranye

Oranye menonjolkan tombol pesan dan promo.

Kesehatan dan wellness

Tenang; untuk aplikasi janji temu dokter, kebiasaan, atau pemantauan.

Dark mode ungu

Latar abu-abu sangat gelap, bukan hitam pekat, dengan aksen ungu muda.

Sosial pink dan ungu

Untuk media sosial, kencan, atau kreator konten.

Produktivitas minimalis

Sangat mudah dibaca; untuk to-do list dan tools kerja.

Edukasi kuning

Ceria dan jelas; untuk aplikasi belajar bahasa atau e-learning.

Fitness energik

Lime dan merah di latar gelap; untuk latihan dan metrik.

Meditasi lavender

Lembut dan menenangkan; untuk tidur, meditasi, atau jurnal pribadi.

Travel toska dan pasir

Mengingatkan pada pantai dan matahari; untuk booking dan panduan wisata.

Makanan segar hijau

Untuk supermarket online, resep, atau gizi.

Belanja premium

Netral dan elegan; biarkan foto produk jadi pusat perhatian.

Ketuk warna untuk menyalin kode HEX-nya. Ikon pensil membuka palet di editor untuk mengubahnya.

Tentukan warna status sejak awal

Setiap aplikasi butuh warna untuk error, sukses, peringatan, dan informasi. Pilih warna yang serasi dengan palet Anda dan jangan pakai warna error untuk hal lain, seperti tombol brand. Sertakan ikon atau teks agar pesannya jelas tanpa hanya mengandalkan warna.

Desain juga dark mode-nya

Sebagian besar ponsel mendukung dark mode dan banyak pengguna mengaktifkannya. Membalik warna saja tidak cukup: pakai abu-abu sangat gelap alih-alih hitam pekat, dan turunkan sedikit saturasi aksen agar tidak terlihat "bergetar" di atas latar.

Cek kontras dan area sentuh

Menurut WCAG, teks harus punya kontras minimal 4,5:1 dengan latarnya. Tombol harus terlihat berbeda saat aktif, ditekan, atau nonaktif. Uji aplikasi di luar ruangan dan dengan kecerahan rendah, seperti cara banyak orang memakainya.

Warna dalam palet ini

Putih AsapPutihPutih LinenOranyeHitam ArangBroken WhiteHijau PinusHitam EboniPutih SaljuPlatinumBiru PrusiaGadingAmberKuning NeonChampagneBiru Tiffany

Pertanyaan umum

Berapa banyak warna yang ideal untuk aplikasi?

Umumnya satu warna utama, satu warna sekunder opsional, warna netral untuk latar dan teks, serta empat warna status: error, sukses, peringatan, dan informasi.

Warna apa untuk tombol utama aplikasi?

Warna utama brand Anda, selama kontrasnya baik dengan latar. Pakai hanya untuk aksi terpenting di setiap layar.

Palet lainnya: Desain

Jelajahi lagi