Tanpa unggah, 100% lokal, tanpa akun

Ekstraktor Palet Warna

Unggah gambar untuk mengekstrak warna dominannya. Dapatkan kode HEX untuk setiap swatch, salin dengan satu klik. Semuanya berjalan di browser Anda.

Cara kerja Ekstrak palet warna

Color Palette Extractor menganalisis gambar Anda dan mengidentifikasi warna yang paling dominan secara visual menggunakan algoritma k-means clustering yang dijalankan terhadap data piksel dalam Canvas. Hasilnya adalah sekumpulan swatch warna dengan nilai HEX yang dapat Anda salin satu per satu. Tidak ada byte gambar yang meninggalkan browser Anda; pengambilan sampel piksel berjalan secara lokal di Web Worker sehingga thread utama tetap responsif.

Pengekstrakan mengelompokkan ratusan ribu warna piksel individual menjadi sejumlah kecil kluster yang representatif. Jumlah warna keluaran dapat dikonfigurasi sehingga Anda dapat mengekstrak palet ketat lima warna atau kumpulan yang lebih luas dari dua belas warna. Ini berguna untuk dengan cepat mengambil warna merek dari logo, mengidentifikasi nada dominan foto untuk papan suasana, atau memeriksa warna apa yang muncul dalam gambar yang diunggah pengguna.

Ditulis oleh Bastien Sulyan

Cara menggunakan Ekstrak palet warna, langkah demi langkah

  1. Jatuhkan gambar Anda ke area unggah atau klik untuk mencari.
  2. Atur jumlah warna yang ingin Anda ekstrak (biasanya 5 hingga 12).
  3. Klik Ekstrak. Pengelompokan piksel berjalan secara lokal di Web Worker.
  4. Lihat swatch warna yang dihasilkan dan nilai HEX-nya.
  5. Klik swatch mana pun untuk menyalin kode HEX-nya ke clipboard.

Kasus penggunaan umum

  • Seorang desainer mengekstrak palet dominan dari foto merek untuk memastikan materi pemasaran baru cocok dengan kisah warna yang ada.
  • Seorang pengembang mengidentifikasi warna utama dalam avatar yang diunggah pengguna untuk menghasilkan warna aksen UI yang cocok secara dinamis.
  • Seorang seniman membangun papan suasana referensi dengan mengekstrak palet dari beberapa gambar referensi dan membandingkan kode HEX yang diekstrak.
  • Seorang blogger mengambil lima nada dominan dari foto header untuk memilih warna teks dan tombol pelengkap untuk tata letak posting.

Pertanyaan yang sering diajukan

Bagaimana cara kerja algoritma ekstraksi warna?

Alat ini membaca semua nilai piksel dari gambar melalui Canvas.getImageData(), mendownsample untuk kecepatan, lalu menjalankan k-means clustering. Setiap centroid kluster menjadi salah satu warna keluaran. K-means mengelompokkan piksel berdasarkan kedekatan warna sehingga nada visual dominan muncul sebagai warna centroid.

Apakah mengekstrak warna memerlukan pengunggahan gambar?

Tidak. Pengambilan sampel piksel terjadi di dalam Web Worker di browser Anda. Gambar dibaca dari disk lokal Anda, digambar ke OffscreenCanvas, dan array piksel diproses di memori. Data tidak meninggalkan perangkat Anda.

Mengapa warna yang diekstrak terlihat sedikit berbeda dari yang saya lihat dalam gambar?

Centroid k-means merepresentasikan rata-rata matematis dari kluster warna piksel. Warna yang sangat umum tetapi sedikit bervariasi (langit biru dengan sedikit variasi gradien) akan menghasilkan centroid yang merupakan rona rata-rata daripada nilai piksel tertentu yang dapat Anda tunjuk. Hasilnya adalah rata-rata representatif, bukan sampel piksel tertentu.

Bisakah saya mengekstrak palet dari foto dengan transparansi?

Piksel sepenuhnya transparan (alpha = 0) dikecualikan dari pengelompokan untuk menghindari wilayah transparan yang membiaskan warna yang diekstrak ke hitam atau putih tergantung pada isian latar belakang Canvas. Piksel semi-transparan disertakan dalam sampel yang diberi bobot berdasarkan nilai alpha-nya.

Format apa yang digunakan untuk kode warna?

Alat ini menghasilkan kode HEX (seperti #3A7BD5). Jika Anda membutuhkan RGB, HSL, atau format lain, salin nilai HEX ke alat Color Converter, yang menerima HEX dan mengonversi ke semua model warna umum.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat gambar