tigtools

Pemilih Warna Gambar

Unggah gambar dan klik di mana saja untuk mendapatkan warna tepat piksel tersebut, atau biarkan alat menemukan warna utama seluruh gambar.

Berjalan di browser Anda Tanpa perlu mendaftar

JPEG, PNG, WebP, GIF, AVIF atau BMP, hingga 25 MB. Gambar tetap berada di perangkat Anda.

Cara menggunakan

  1. Pilih gambar atau letakkan di kotak.
  2. Gerakkan penunjuk di atas gambar; kaca pembesar menampilkan piksel di sekitarnya.
  3. Klik atau ketuk untuk mengambil warna dan menyalinnya sebagai HEX, RGB, atau HSL.
  4. Gulir ke bawah untuk melihat warna dominan, pilih jumlah yang diinginkan, lalu salin atau unduh sebagai variabel CSS.

Cara kerja

Gambar digambar ke kanvas di browser Anda dan warna piksel tepat di bawah kursor dibaca dari kanvas tersebut. Kaca pembesar menampilkan area 11 × 11 piksel yang diperbesar, dengan piksel terpilih diberi garis tepi. Gambar yang lebih besar dari 4096 piksel pada satu sisi diperkecil terlebih dahulu, sehingga pada foto yang sangat besar satu piksel yang dipilih adalah rata-rata dari beberapa piksel asli.

Warna dominan ditemukan dengan pengelompokan k-means: piksel terlebih dahulu dikelompokkan ke dalam 32,768 kelompok warna kecil, lalu kelompok-kelompok itu digabung menjadi jumlah warna yang Anda pilih, dibobot berdasarkan banyaknya piksel di setiap kelompok. Titik awal dipilih secara deterministik, sehingga gambar yang sama selalu menghasilkan palet yang sama.

Warna dibaca dalam ruang warna sRGB yang digunakan browser untuk tampilan. Jika gambar memiliki profil warna gamut lebar yang tertanam, nilainya dapat sedikit berbeda dari yang ditampilkan editor foto. Pada browser yang mendukungnya (Chrome dan Edge di desktop), tombol Ambil dari layar menggunakan EyeDropper bawaan untuk mengambil warna dari mana saja di layar Anda.

Contoh

Mencocokkan warna merek

Unggah tangkapan layar logo, klik warna utamanya, lalu salin #1a73e8 atau rgb(26, 115, 232) ke CSS Anda.

Palet dari foto

Foto pantai yang dibagi menjadi 6 warna menghasilkan nuansa pasir, laut, dan langit, masing-masing dengan porsi gambar yang dicakupnya, diurutkan dari yang terbesar hingga terkecil.

Memeriksa corak warna

Perbesar dengan pembesar untuk memilih piksel tepat pada garis tipis, bukan tepi anti-alias di sebelahnya.

Pertanyaan yang sering diajukan

Mengapa warnanya sedikit berbeda dari editor foto saya?

Browser mengonversi gambar ke sRGB untuk tampilan. Foto dengan profil gamut lebar (Display P3, Adobe RGB) mungkin menampilkan nilai yang sedikit berbeda di editor yang mempertahankan profil aslinya.

Mengapa tombol Ambil dari layar tidak muncul?

Fitur ini memerlukan EyeDropper API, yang hanya didukung sebagian browser, saat ini Chrome dan Edge di desktop. Mengambil warna dari gambar yang diunggah berfungsi di semua browser.

Bagaimana warna dominan dipilih?

Dengan pengelompokan k-means pada semua piksel, diberi bobot berdasarkan seberapa sering setiap warna muncul. Detail kecil tetapi mencolok dapat digabungkan ke warna terdekat yang lebih dominan; tambah jumlah warna untuk memisahkannya.

Apakah gambar diunggah?

Tidak. Gambar didekode dan dianalisis oleh halaman ini di browser Anda dan tidak pernah meninggalkan perangkat Anda.

Privasi

Gambar diproses sepenuhnya di browser Anda. Gambar tidak diunggah, dan warna yang diambil tidak dikirim atau disimpan.