Cara menggunakannya
- Pilih imej atau lepaskannya ke dalam kotak.
- Gerakkan penunjuk ke atas imej; pembesar menunjukkan piksel di sekelilingnya.
- Klik atau ketik untuk memilih warna dan menyalinnya sebagai HEX, RGB atau HSL.
- Tatal ke bawah untuk melihat warna dominan, pilih bilangan yang anda mahu, dan salin atau muat turunnya sebagai pemboleh ubah CSS.
Cara ia berfungsi
Imej dilukis ke atas kanvas dalam pelayar anda dan warna piksel tepat di bawah penunjuk dibaca daripadanya. Pembesar menunjukkan kawasan 11 × 11 piksel yang diperbesar, dengan piksel yang dipilih digariskan. Imej yang lebih besar daripada 4096 piksel pada satu sisi diskalakan dahulu, jadi pada foto yang sangat besar satu piksel yang dipilih ialah purata beberapa piksel asal.
Warna dominan ditemui melalui pengelompokan k-means: piksel mula-mula dikumpulkan kepada 32,768 baldi warna kecil, kemudian baldi itu digabungkan menjadi bilangan warna yang anda pilih, berpemberat mengikut bilangan piksel yang dipegang oleh setiap baldi. Titik permulaan dipilih secara deterministik, jadi imej yang sama sentiasa memberikan palet yang sama.
Warna dibaca dalam ruang sRGB yang digunakan pelayar untuk paparan. Jika imej mempunyai profil warna gamut luas terbenam, nilainya boleh berbeza sedikit daripada yang ditunjukkan oleh editor foto. Dalam pelayar yang menyokongnya (Chrome dan Edge pada desktop), butang Pilih dari skrin menggunakan EyeDropper terbina dalam untuk mengambil warna dari mana-mana bahagian skrin anda.
Contoh
Memadankan warna jenama
Muat naik tangkapan skrin logo, klik warna utamanya dan salin #1a73e8 atau rgb(26, 115, 232) ke dalam CSS anda.
Palet daripada foto
Foto pantai yang dibahagikan kepada 6 warna memberikan ton pasir, laut dan langit, masing-masing dengan bahagian imej yang diliputinya, diisih daripada yang terbesar kepada yang terkecil.
Menyemak rona
Zum masuk dengan pembesar untuk memilih piksel tepat bagi garis nipis dan bukannya tepi antialias di sebelahnya.
Soalan Lazim
Mengapa warna sedikit berbeza daripada editor foto saya?
Pelayar menukar imej kepada sRGB untuk paparan. Foto dengan profil gamut luas (Display P3, Adobe RGB) mungkin menunjukkan nilai yang sedikit berbeza dalam editor yang mengekalkan profil asal.
Mengapa butang Pilih dari skrin tiada?
Ia memerlukan API EyeDropper, yang hanya disokong oleh sesetengah pelayar, kini Chrome dan Edge pada desktop. Memilih daripada imej yang dimuat naik berfungsi di mana-mana sahaja.
Bagaimana warna dominan dipilih?
Melalui pengelompokan k-means ke atas semua piksel, berpemberat mengikut kekerapan setiap warna muncul. Butiran kecil tetapi terang boleh digabungkan ke dalam warna berdekatan yang lebih besar; tingkatkan bilangan warna untuk memisahkannya.
Adakah imej dimuat naik?
Tidak. Imej dinyahkod dan dianalisis oleh halaman ini dalam pelayar anda dan tidak pernah meninggalkan peranti anda.
Privasi
Imej diproses sepenuhnya dalam pelayar anda. Ia tidak dimuat naik, dan warna yang dipilih tidak dihantar atau disimpan.