Aturan Warna 60-30-10: Cara Mudah Membuat Palet Seimbang
Aturan warna 60-30-10 membagi palet menjadi warna dominan, sekunder, dan aksen. Pelajari cara menerapkannya pada website, UI, dan grafis dengan tips praktis.
Kamu sudah memilih tiga warna favorit, tetapi desainnya masih terlihat ramai. Masalahnya biasanya bukan pada warnanya, melainkan pada seberapa banyak tiap warna dipakai. Aturan 60-30-10 adalah rasio sederhana untuk mengatasinya, dan bisa dipakai untuk ruangan, poster, aplikasi, hingga website.
Apa itu aturan 60-30-10
Aturan ini berasal dari dunia desain interior, tempat dekorator sudah lama memakainya untuk menyeimbangkan dinding, perabot, dan aksesori. Ideal Home menjelaskannya sebagai cara membagi palet ruangan agar tidak ada satu warna yang mendominasi berlebihan. Desainer lalu meminjam ide yang sama untuk layar:
60% warna dominan. Warna dasar yang menutupi sebagian besar permukaan, biasanya latar dan area luas. Warna ini menentukan suasana keseluruhan.
30% warna sekunder. Mendukung warna dominan dan menciptakan kontras, misalnya untuk kartu, sidebar, atau header.
10% warna aksen. Sentuhan kecil yang mencolok untuk menarik perhatian, khusus untuk tombol, tautan, ikon, dan sorotan penting.
Rasio ini meniru cara mata kita membaca sebuah tampilan: dasar yang tenang, struktur yang jelas, dan satu titik fokus. Panduan teori warna dari Interaction Design Foundation menjelaskan mengapa kontras dan hierarki sangat memengaruhi perhatian.
Cara menerapkannya pada desain UI dan web
1. Mulai dari 60%
Pilih warna yang kalem untuk latar. Warna netral seperti putih gading, abu-abu muda, atau biru dongker populer karena memberi ruang bagi konten. Pada gambar sampul di atas, biru tua menjadi warna utama halaman.
2. Bangun struktur dengan 30%
Gunakan warna sekunder untuk elemen yang mengelompokkan konten: bilah navigasi, kartu, panel, atau latar bagian. Warnanya harus cukup berbeda dari warna dominan agar area terpisah jelas, tetapi tidak terlalu mencolok.
3. Simpan 10% untuk aksi
Warna aksen ditempatkan pada hal yang ingin diklik atau diperhatikan, seperti tombol ajakan utama. Kalau aksen muncul di mana-mana, ia tidak lagi menjadi aksen. Sistem warna Material Design dari Google memakai logika serupa lewat peran primary, secondary, dan tertiary.
Tips praktis agar aturannya berhasil
Hitung warna netral sebagai warna. Putih, hitam, dan abu-abu bisa mengisi porsi 60%. Banyak antarmuka bersih yang sebagian besar netral, dengan satu warna brand sebagai 30% dan aksen cerah sebagai 10%.
Cek kontras sejak awal. Teks di atas warna 60% dan 30% harus tetap mudah dibaca. Uji pasangan warna dengan WebAIM Contrast Checker, lalu baca panduan kami tentang aturan kontras warna yang wajib diketahui desainer.
Manfaatkan tint dan shade. Kamu tidak perlu menambah warna baru untuk variasi. Versi lebih terang dan lebih gelap dari tiga warna yang sama membuat palet tetap kompak.
Cari opsi dengan cepat. Alat seperti Adobe Color membantu membuat set warna komplementer atau analog, lalu tinggal dibagi ke peran 60, 30, dan 10.
Lakukan tes menyipitkan mata. Buramkan pandangan atau perkecil desainnya. Kamu tetap harus melihat satu warna utama, satu warna pendukung, dan satu titik fokus yang jelas.
Kapan aturan ini boleh dilanggar
60-30-10 adalah titik awal, bukan hukum mutlak. Dashboard data mungkin butuh lebih banyak warna untuk grafik, dan brand yang ceria bisa menaikkan porsi aksen. Sebagian desainer memakai pola 60-30-5-5 untuk menambah aksen kedua yang lebih kecil. Yang penting hierarkinya tetap jelas, prinsip yang juga berlaku untuk tata letak seperti dibahas dalam tips komposisi visual kami.
Palet yang baik bukan soal memilih warna yang sempurna, tetapi memberi setiap warna tugas yang jelas.
Jelajahi lebih lanjut
Warna dan huruf bekerja bersama. Padukan aturan ini dengan tips memadukan font agar desainmu terasa profesional dari atas sampai bawah, atau lihat karya kreatif yang kami bangun di Ryuartistry.