Ekstraktor Palet Warna Gambar gratis

Cara kerja

Ekstraksi warna berjalan sepenuhnya di browser Anda menggunakan algoritma klasterisasi k-means++ tulisan tangan yang diterapkan pada data piksel mentah yang dibaca dari Canvas API — tanpa server, tanpa library pihak ketiga. Gambar dan pengaturan jumlah-warna yang sama selalu menghasilkan palet yang sama karena algoritma menggunakan generator angka pseudo-acak deterministik (mulberry32) alih-alih Math.random.

1. 1
   Canvas membaca data piksel

   Gambar digambar ke elemen HTML Canvas di luar layar dan diturunkan sampelnya menjadi maksimal 200px pada sisi terpanjangnya. getImageData() dari Canvas API mengembalikan setiap piksel sebagai byte RGBA mentah, dan piksel yang sepenuhnya transparan (alpha < 128) dibuang sebelum klasterisasi dimulai.
2. 2
   k-means++ mengklasterkan piksel

   Inisialisator k-means++ menyemai sentroid secara deterministik, lalu algoritma mengulang hingga 20 kali: setiap piksel ditugaskan ke sentroid terdekatnya dalam ruang RGB, lalu sentroid dihitung ulang sebagai rata-rata semua piksel yang ditugaskan. Klaster yang runtuh menjadi nilai heksa yang sama digabungkan, sehingga setiap swatch dalam hasil unik.
3. 3
   Metadata per-warna dihitung

   Setiap sentroid dikonversi menjadi HEX, HSL, dan bagiannya dari total piksel (persentase). Luminansi relatif WCAG dihitung sesuai rumus standar, dan rasio kontras terhadap hitam maupun putih ditampilkan bersama setiap swatch.
4. 4
   Ekspor dan keluaran eyedropper

   Palet dapat disalin sebagai properti kustom CSS, variabel SCSS, cuplikan konfigurasi Tailwind, atau JSON. Eyedropper klik-untuk-sampel memetakan klik Anda pada pratinjau kembali ke koordinat piksel sumber yang tepat pada kanvas resolusi-penuh, menambahkan warna piksel itu ke daftar warna-terpilih terpisah. Strip palet PNG bisa diunduh via Canvas toBlob().

Alat terkait