CodeKitHub
Mengapa kami tambah pengekstrakan palet automatik pada pemilih warna

Mengapa kami tambah pengekstrakan palet automatik pada pemilih warna

Diterbitkan pada 5 Ogo 2026

Pemilih warna kami memang sejak dulu membolehkan anda memuat naik imej dan mengklik mana-mana piksel untuk mendapatkan nilai HEX, RGB dan HSL yang tepat. Itu menjawab “apakah warna titik spesifik ini?” — berguna, tetapi bukan soalan sebenar kebanyakan orang apabila mereka memuat naik foto. Biasanya soalannya “apakah skema warna keseluruhan imej ini?” — menarik palet jenama daripada logo, atau memadankan suasana foto rujukan untuk skema warna laman web.

Persampelan satu piksel tidak dapat menjawab itu. Jadi kami tambah pengekstrakan palet: muat naik imej, dan alat ini kini secara automatik mengeluarkan lapan warna paling dominan dan memaparkannya sebagai swatch yang boleh diklik.

Cara ia berfungsi

Tiada model AI terlibat dan tiada apa yang dimuat naik ke mana-mana — ia algoritma pengiraan kekerapan yang mudah, berjalan dalam beberapa milisaat:

  1. Imej dikecilkan kepada kanvas 80×80. Resolusi penuh tidak diperlukan untuk statistik warna, dan pengecilan ini memastikan semuanya serta-merta walaupun untuk foto besar.
  2. Setiap piksel dikelompokkan mengikut versi kasar warnanya — 5 bit teratas setiap saluran RGB, supaya piksel yang hampir serupa secara visual jatuh ke dalam baldi yang sama dan tidak dikira sebagai warna unik masing-masing.
  3. Baldi disusun mengikut bilangan piksel yang jatuh ke dalamnya, dan lapan terbesar menjadi palet, setiap satu dipaparkan sebagai purata warna semua isi baldi itu.

Itu sahaja. Tiada pembelajaran mesin, tiada perkhidmatan luaran — hanya pengecilan dan pengiraan, sebab itulah ia serta-merta dan tidak pernah keluar dari pelayar anda.

Klik swatch, dapat kodnya

Setiap swatch palet boleh diklik: klik satu dan ia menjadi warna aktif alat itu, dengan HEX, RGB dan HSL diisi secara automatik dan kod hex disalin ke papan keratan anda dalam klik yang sama. Ada juga butang “copy all” jika anda mahu seluruh palet sebagai senarai dipisahkan koma, berguna untuk ditampal terus ke dalam alat reka bentuk atau blok CSS custom-properties.

Cubalah

Muat naik mana-mana imej — tangkapan skrin, logo, foto — di halaman pemilih warna dan palet akan muncul secara automatik di bawahnya.

← Kembali ke blog