Palet Warna dari Gambar
Ekstrak warna dominan dari foto dengan clustering k-means, lihat persentase cakupan tiap warna, lalu salin kode HEX, variabel CSS, atau JSON.
Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.
Apa itu Palet Warna dari Gambar?
Alat ini menemukan warna-warna utama sebuah gambar dan menampilkannya sebagai palet, diurutkan berdasarkan seberapa luas area gambar yang dicakup setiap warna. Pilih antara 2 hingga 12 warna lalu salin sebagai kode HEX, CSS custom properties, atau JSON dengan nilai RGB dan persentasenya.
Cara menggunakan Palet Warna dari Gambar
- Letakkan, pilih, atau tempel gambar.
- Pilih Jumlah warna.
- Baca bilah palet dan daftar berisi HEX, RGB, dan persentase setiap warna.
- Salin satu kode HEX, atau gunakan Salin sebagai variabel CSS, Salin sebagai JSON, atau Salin daftar HEX.
Contoh
40×20 image split into red, green, blue and white quadrants, 4 colors
#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%
Kapan menggunakan Palet Warna dari Gambar
Gunakan untuk menyusun skema warna dari foto atau karya seni, menyesuaikan tema situs web dengan gambar hero, atau menganalisis citra visual sebuah merek. Rata-rata klaster bisa sedikit berbeda dari piksel mana pun; untuk membaca warna satu piksel secara tepat, gunakan Pengambil Warna Gambar.
Cara kerja Palet Warna dari Gambar
Gambar diperkecil hingga maksimal 256 px pada sisi terpanjangnya dan piksel yang sepenuhnya transparan diabaikan. Piksel yang tersisa dikelompokkan dengan clustering k-means di ruang RGB: pusat awal dipilih secara deterministik (piksel yang paling dekat dengan warna rata-rata, lalu berulang kali piksel yang paling jauh dari semua pusat terpilih), dan hingga 12 iterasi menugaskan ulang piksel serta memindahkan setiap pusat ke rata-rata klasternya. Setiap warna palet adalah rata-rata klaster; persentasenya adalah porsi piksel dalam klaster tersebut.
Kasus Penggunaan Umum
- Membuat tema warna situs web dari foto header.
- Mengambil warna merek dari logo atau foto produk.
- Membuat variabel CSS untuk mood board design system.
- Membandingkan keseimbangan warna beberapa gambar.
Catatan Keamanan
Gambar didekode, diproses, dan di-encode secara lokal di browser Anda dengan Canvas API. Tidak ada yang diunggah ke server.
Pertanyaan Umum
Mengapa warnanya sedikit berbeda dari gambar?
Setiap warna palet adalah rata-rata dari sekelompok piksel yang mirip, sehingga mungkin tidak persis sama dengan piksel mana pun, terutama pada foto dengan gradasi.
Apakah saya akan mendapatkan palet yang sama setiap kali?
Ya. Algoritmanya memakai seeding deterministik, sehingga gambar dan jumlah warna yang sama selalu menghasilkan palet yang sama.
Apakah piksel transparan ikut dihitung?
Tidak. Piksel dengan opasitas di bawah 50% diabaikan, sehingga logo di atas latar transparan hanya menghasilkan warna logonya.