Penganalisis Rasio Warna 60:30:10

Unggah gambar untuk mengelompokkan warna serupa, membandingkan keseimbangan utama/pendukung/aksen dengan 60:30:10, dan melihat sebaran warna aksen pada komposisi.

Terakhir diperbarui: 2026/04/02

Penganalisis Rasio Warna 60:30:10

Unggah gambar
Seret gambar ke sini atau klik untuk mengunggah
PNG, JPG, GIF, WebP · Maks. 10 MB · Analisis hanya di browser
Pratinjau gambar yang diunggah
Nama file
Ukuran
Dimensi
Opsi analisis
Jika ada area netral besar seperti latar putih atau hitam, bobotnya disesuaikan agar pembacaan warna utama tidak meleset.
Tampilkan kode warna
Periksa keseimbangan 60:30:10 Anda sekarang juga

Unggah gambar untuk mengelompokkan nuansa yang mirip dan menganalisis proporsi warna utama, pendukung, dan aksen beserta penempatan aksennya.

Sedang menganalisis keluarga warna dan penyebarannya…
Menunggu analisis Kecocokan 60:30:10
0 poin

Unggah gambar untuk melihat keluarga warna mana yang paling dekat ke angka 60 dan apakah warna aksennya sudah cukup kuat.

Utama menunggu Pendukung menunggu Aksen menunggu
Pratinjau analisis Gambar asli yang diunggah
Unggah gambar untuk menampilkan tampilan representatif di sini.
Gambar yang dianalisis
Rasio target vs rasio nyata
Analisis nyata
Utama Pendukung Aksen
Target 60:30:10
60% 30% 10%
Utama 0%
Pendukung 0%
Aksen 0%
Dampak netral 0%
Diagnostik warna aksen
Konsentrasi Menunggu
Ringkasan

Setelah analisis, Anda akan melihat apakah warna aksen terkonsentrasi di satu area atau menyebar luas.

Heatmap warna aksen akan muncul di sini.
Keluarga warna berdasarkan peran
Utama 60%
Pratinjau kartu utama

Setelah unggah, keluarga warna dengan area terbesar akan muncul di sini.

MenungguUtama
Pendukung 30%
Pratinjau kartu pendukung

Setelah unggah, keluarga warna yang berperan sebagai lapisan penghubung akan muncul di sini.

MenungguPendukung
Aksen 10%
Pratinjau kartu aksen

Setelah unggah, keluarga warna fokus dan kecenderungan penempatannya akan muncul di sini.

MenungguAksen
Kelompok warna serupa
Palet yang tersusun dari keluarga warna serupa akan ditampilkan di sini.
Interpretasi dan panduan perbaikan
  • Unggah gambar dan alat ini akan merangkum cara mendekatkannya ke komposisi 60:30:10.
Tabel analisis
Peran Nama keluarga Proporsi Kode utama Komentar
Tabel akan terisi setelah analisis selesai.
Apa yang diperhatikan alat ini
  • Utama 60% — Keluarga warna terbesar yang membentuk nada dasar gambar
  • Pendukung 30% — Lapisan penghubung di antara warna utama dan warna aksen
  • Aksen 10% — Warna dengan area kecil tetapi kuat sebagai titik fokus
  • Konsentrasi visual — Apakah warna aksen terkonsentrasi di satu titik atau menyebar ke seluruh gambar

Alat ini menganalisis gambar hanya di dalam browser. Aturan 60:30:10 bukan hukum mutlak, melainkan heuristik desain untuk membaca keseimbangan visual, dan dalam beberapa situasi rasio lain bisa lebih sesuai dengan tujuan gambar.

Apa itu Penganalisis Rasio Warna 60:30:10?

Penganalisis Rasio Warna 60:30:10 mengelompokkan warna-warna yang mirip dari gambar yang Anda unggah agar terlihat jelas keluarga warna mana yang membentuk dasar tampilan, mana yang berperan sebagai lapisan penghubung, dan mana yang menjadi titik fokus. Alat ini tidak sekadar mengambil tiga warna terbesar, tetapi menggabungkan nuansa yang berdekatan ke dalam satu keluarga agar hasilnya lebih dekat dengan kesan visual yang sebenarnya.

Hasil analisis menampilkan skor kedekatan terhadap komposisi 60% warna utama, 30% warna pendukung, dan 10% warna aksen. Anda juga bisa melihat keluarga warna mana yang paling dekat ke angka 60, apakah warna aksennya terlalu sedikit atau terlalu banyak, dan apakah aksen itu terkonsentrasi di satu area atau menyebar ke seluruh gambar. Cocok dipakai untuk presentasi, thumbnail, ilustrasi, UI web, dan analisis gambar referensi.

Kapan alat ini berguna

  • Analisis adegan animasi — Saat Anda ingin memahami kenapa sebuah adegan terasa stabil dan di mana warna fokus bekerja
  • Pemecahan referensi merek atau thumbnail — Saat Anda perlu mengurai struktur warna referensi menjadi persentase dan keluarga warna dengan cepat
  • Tinjauan mockup UI — Saat ingin mengecek apakah warna aksen pada tombol terlalu menyebar atau pemisahan warna utama dan pendukung masih lemah
  • Desain poster dan banner — Saat ingin menilai cepat apakah latar, area pendukung, dan titik aksen sudah terbagi dengan tepat
  • Studi color script — Saat Anda ingin mencatat kombinasi warna dan pola penempatan gambar ke dalam bahasa yang bisa dipakai ulang

Fitur utama

  • Pengelompokan otomatis nuansa serupa — Bahkan variasi halus disatukan dalam satu keluarga warna agar hasilnya lebih dekat dengan apa yang ditangkap mata.
  • Skor kedekatan 60:30:10 — Menunjukkan dengan skor dan kalimat singkat seberapa dekat gambar dengan pembagian ideal.
  • Kartu warna utama, pendukung, dan aksen — Setiap kartu merangkum warna representatif, proporsi, karakter, dan saran perbaikan.
  • Heatmap warna aksen — Memudahkan Anda melihat apakah warna aksen terkonsentrasi di satu titik atau tersebar di seluruh gambar.
  • Mode pengurang pengaruh latar — Membantu mengoreksi pembacaan saat latar putih atau area netral besar mengganggu hasil.
  • Lihat kode HEX/RGB/HSL — Ubah kode warna representatif ke format yang Anda butuhkan lalu salin langsung.

Cara menggunakannya

  1. Unggah gambar — Unggah adegan, thumbnail, poster, atau tangkapan UI yang ingin Anda analisis.
  2. Pilih mode analisis — Jika gambar memiliki latar putih atau hitam yang besar, sebaiknya biarkan mode bawaan pengurang pengaruh latar tetap aktif.
  3. Tinjau skor dan peran — Mulailah dari skor di bagian atas dan proporsi warna utama, pendukung, serta aksen.
  4. Lihat heatmap dan saran — Periksa di mana aksen berkumpul dan apakah perlu dikurangi atau diperkuat.
  5. Pakai kodenya — Ambil nilai HEX, RGB, atau HSL dari kartu dan keluarga warna untuk kebutuhan desain Anda.

Bagaimana analisisnya bekerja?

Alat ini terlebih dahulu mengecilkan gambar untuk sampling, mengabaikan piksel transparan, membentuk kelompok warna, lalu menggabungkan nuansa yang berdekatan. Dari kelompok warna representatif itu, alat ini membagi peran warna utama, pendukung, dan aksen, lalu menghitung luas area yang ditempati masing-masing.

Warna aksen tidak dipilih sekadar sebagai warna terbesar ketiga. Alat ini memprioritaskan kelompok yang luasnya lebih kecil tetapi punya saturasi dan kontras cukup tinggi untuk menarik perhatian. Setelah itu gambar dibagi ke dalam grid untuk mengukur di mana aksen muncul dan apakah titik fokusnya terkumpul atau justru menyebar.

Hasil ini adalah alat bantu interpretasi. Alat ini tidak otomatis memahami narasi adegan, pencahayaan, kedalaman, atau niat merek, jadi keputusan desain akhir tetap sebaiknya dilihat bersama konteks visualnya.

Pertanyaan yang sering diajukan

Apakah aturan 60:30:10 harus diikuti secara mutlak?

Tidak. Aturan 60:30:10 adalah heuristik untuk menilai keseimbangan visual dengan cepat. Tergantung niat adegan, pembagian seperti 70:20:10 atau 50:35:15 bisa saja lebih cocok. Gunakan alat ini sebagai titik acuan, bukan aturan mutlak.

Kenapa warna yang mirip dikelompokkan, bukan hanya mengambil tiga warna terbesar?

Pada gambar nyata, satu keluarga warna sering berisi banyak variasi kecerahan dan saturasi. Jika hanya tiga warna terbesar yang diambil, biru langit dan biru keabu-abuan bisa terlihat seolah punya peran berbeda padahal secara visual masih satu keluarga. Karena itu alat ini mengelompokkan nuansa yang mirip agar pembacaannya lebih natural.

Apakah hasil bisa terasa aneh pada gambar berlatar putih?

Bisa. Latar putih, hitam, atau area netral besar lainnya dapat membuat porsi warna utama tampak lebih dominan daripada kesan visual aslinya. Dalam kasus seperti itu, mode bawaan untuk mengurangi pengaruh latar membantu mendekatkan hasil ke impresi yang sebenarnya.

Bagaimana cara membaca heatmap warna aksen?

Heatmap menunjukkan di mana warna aksen paling banyak terkumpul. Jika aksen berkumpul di satu sisi atau satu titik fokus, arah pandangan biasanya terasa lebih jelas. Jika aksen menyebar merata ke seluruh gambar, titik fokus bisa melemah. Pada gambar berbasis pola atau tekstur, sedikit penyebaran masih bisa terasa wajar, jadi tetap lihat hasilnya bersama konteksnya.

Apakah gambar yang diunggah disimpan di server?

Tidak. Analisis berjalan hanya di browser dan gambar yang diunggah tidak disimpan di server. Karena itu alat ini lebih aman dipakai untuk meninjau draft internal atau gambar kerja yang sensitif.

Opini Anonim 1

Komentar yang mengganggu pengguna lain atau mengulang pesan yang sama dapat disembunyikan atau dihapus sesuai pedoman moderasi kami.

Sisa karakter: 120

Belum ada komentar. Jadilah yang pertama memberi pendapat.