Ekstrak Gradient Gambar

Tool berjalan dalam tiga tahap. (1) Gambar di-downscale ke max 200x200 (untuk kecepatan) dan digambar ke canvas tersembunyi. (2) Nilai R, G, B tiap pixel di-kuantisasi dengan bit-shift (2-bit, 3-bit, atau 4-bit per channel) supaya warna serupa bergabung ke "bucket" — 2-bit memberi 64 bucket (8 per channel), 3-bit memberi 512, 4-bit memberi 4096. (3) Peta frekuensi menghitung berapa banyak pixel jatuh ke tiap bucket, lalu 40 bucket teratas di-cluster dengan 8-iterasi K-means ke jumlah centroid yang diminta. Langkah K-means menggabungkan bucket yang terlalu terwakili dan memecah yang kurang terwakili untuk memberikan palet yang merata. Akhirnya, persentase tiap warna output adalah jumlah pixel di bucket yang bergabung ke centroid-nya. Seluruh pipeline berjalan di JS pada data pixel canvas, tanpa WebAssembly, tanpa jaringan.

Tergantung gambar. Untuk foto dan gradient kompleks, 3-bit (sedang, default) memberi 5-10 warna dominan berbeda dengan transisi halus. Untuk ilustrasi flat-design, poster, atau seni logo, 2-bit (rendah) memberi palet ter-posterisasi 3-6 warna kuat. Untuk lukisan detail atau foto dengan banyak nuansa halus, 4-bit (tinggi) memberi differensiasi lebih halus tapi mungkin termasuk warna near-duplikat. Kalau hasilnya terlihat "terlalu sedikit" warna, naikkan granularitas; kalau terlihat "terlalu banyak serupa" warna, turunkan. Juga, lebih banyak warna (selector atas) plus granularitas lebih tinggi adalah yang paling detail; lebih sedikit warna plus granularitas lebih rendah adalah yang paling diabstraksi. Coba 3 warna di 2-bit untuk tampilan Bauhaus, atau 10 warna di 4-bit untuk spektrum penuh.

Preview memakai background CSS linear-gradient atau radial-gradient, dengan satu color stop per warna palet, didistribusikan merata dari 0% ke 100% gradient. Opsi "Linear 90°" berjalan kiri-ke-kanan (default), "45°" berjalan dari kiri-bawah ke kanan-atas, "180°" berjalan dari bawah-ke-atas, dan "Radial" menggunakan circle dengan warna pertama di tengah dan terakhir di tepi. Download PNG me-render gradient yang sama ke canvas 1200x480 via canvas createLinearGradient / createRadialGradient, lalu export sebagai PNG dengan toBlob standar. Download CSS menyimpan file .css dengan class .gradient yang bisa kamu paste ke proyek mana pun.

Ya. Ekstraktor adalah JavaScript murni sisi client yang di-inline di HTML. Tidak ada panggilan jaringan, tidak ada upload API, tidak ada analitik, tidak ada CDN. Gambar kamu dimuat via FileReader (yang membaca file dari disk lokal kamu) dan digambar ke canvas tersembunyi, lalu data pixel diproses lokal. Salinan yang di-downscale, palet, gradient, dan PNG yang di-export semua di-generate di browser. Kamu bisa ekstrak warna dari foto privat, logo pelanggan, atau gambar produk proprietary tanpa data apa pun yang ditransmisikan. Satu-satunya operasi file adalah FileReader untuk drop-zone dan <a download> standar untuk export CSS/PNG.

Tidak, tool hanya menerima file lokal via file picker atau drag-and-drop. Menambah loading berbasis URL akan memerlukan fetch gambar dari server remote, yang akan membocorkan URL (dan parameter path atau query image sensitif) ke proxy CORS atau host image apa pun yang menyediakannya. Desain privasi-utama adalah disengaja: gambar tidak pernah meninggalkan device kamu. Kalau kamu punya gambar di URL yang ingin kamu proses, download dulu (klik-kanan → Save As, atau pakai download manager), lalu drop file lokal ke tool. Tool juga menerima format gambar apa pun yang bisa di-decode browser — PNG, JPG, WebP, GIF, BMP, ICO, AVIF (di browser yang didukung) — jadi workflow lokal fleksibel.