Mengapa kami menambahkan ekstraksi palet otomatis ke pemilih warna

Pemilih warna kami selalu memungkinkan Anda mengunggah gambar dan mengklik piksel mana pun untuk mendapatkan nilai HEX, RGB, dan HSL yang tepat. Itu menjawab “warna apa titik spesifik ini?” — berguna, tapi bukan pertanyaan yang sebenarnya dimiliki kebanyakan orang saat mengunggah foto. Biasanya pertanyaannya adalah “apa skema warna keseluruhan gambar ini?” — mengambil palet merek dari logo, atau mencocokkan suasana foto referensi untuk skema warna situs web.

Pengambilan sampel satu piksel tidak bisa menjawab itu. Jadi kami menambahkan ekstraksi palet: unggah gambar, dan alat ini sekarang secara otomatis menarik delapan warna paling dominan dan menampilkannya sebagai swatch yang bisa diklik.

Cara kerjanya

Tidak ada model AI yang terlibat dan tidak ada yang diunggah ke mana pun — ini adalah algoritma penghitungan frekuensi sederhana yang berjalan dalam beberapa milidetik:

1. Gambar diturunkan resolusinya ke kanvas 80×80. Resolusi penuh tidak diperlukan untuk statistik warna, dan penurunan resolusi membuat semuanya instan bahkan untuk foto besar.
2. Setiap piksel dikelompokkan berdasarkan versi warna yang disederhanakan — 5 bit teratas dari setiap saluran RGB, sehingga piksel yang secara visual hampir identik jatuh ke kelompok yang sama alih-alih masing-masing dihitung sebagai warna unik.
3. Kelompok diurutkan berdasarkan jumlah piksel yang jatuh ke dalamnya, dan delapan kelompok terbesar menjadi palet, masing-masing ditampilkan sebagai warna rata-rata dari semua yang ada di kelompok itu.

Itu saja. Tidak ada pembelajaran mesin, tidak ada layanan eksternal — hanya penurunan resolusi dan penghitungan, itulah sebabnya prosesnya instan dan tidak pernah meninggalkan browser Anda.

Klik swatch, dapatkan kodenya

Setiap swatch palet bisa diklik: klik salah satu dan itu menjadi warna aktif alat, dengan HEX, RGB, dan HSL terisi otomatis dan hex disalin ke clipboard Anda dalam klik yang sama. Ada juga tombol “salin semua” jika Anda menginginkan seluruh palet sebagai daftar yang dipisahkan koma, berguna untuk ditempel langsung ke alat desain atau blok custom properties CSS.

Coba sekarang

Unggah gambar apa pun — tangkapan layar, logo, foto — di halaman pemilih warna dan palet akan muncul otomatis di bawahnya.