Bagaimana cara menggunakan color picker (penetes mata)?

Ada alat yang sangat berguna di dalam alat dev chrome, yang baru saja saya temukan. Saya bahkan tidak tahu namanya, dan saya tidak dapat menemukannya di google. Saya akan mengatakan itu adalah alat pemeriksa piksel.

Saya menemukan metode berikut bagaimana menggunakannya:

1a. Periksa elemen html dengan warna latar belakang.

1b. Tentukan warna latar belakang suatu elemen.

Klik pada pemilih warna.
Arahkan mouse Anda ke elemen mana pun pada halaman (bukan pada alat pengembang)

Lihat: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Pertanyaan saya: Apa nama alat ini? Bagaimana cara menggunakannya dengan mudah? Sebagian besar waktu saya tidak peduli warnanya, tetapi saya ingin memeriksa piksel sebuah ikon. Apakah ada tombol pintas untuk alat ini?

google-chrome-devtools

— Skalár Wag
sumber

Ini berguna untuk menyalin dan tampilan tingkat yang lebih tinggi: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Dijawab di komentar di bawah juga; Anda dapat menemukannya di alat pengembang (di tab Elemen, di bawah tab "Gaya", klik aturan "warna" apa pun, ada pemilih warna di munculan) Yang saya cari adalah cara tanpa perlu warna aturan, seperti bayangkan Anda ingin memilih warna hanya dari gambar.

— mdikici

Jawaban:

106

Untuk membuka Eye Dropper cukup:

Buka DevTools F12
Buka tab Elemen
Di bawah bilah samping Gaya klik pada kotak pratinjau warna apa pun

Fungsionalitas utamanya adalah untuk memeriksa nilai warna piksel dengan mengkliknya meskipun dengan fitur barunya Anda juga dapat melihat palet warna atau palet desain material yang ada di halaman Anda dengan mengklik ikon dua panah di bagian bawah. Ini bisa sangat berguna saat mendesain halaman Anda.

— Jaqen H'ghar
sumber

Saya saat ini menggunakan versi 68.0.3440.106. Anda tidak dapat lagi menggunakan palet warna untuk memilih warna

— caras

Chrome v72 di sini, berfungsi seperti yang dijelaskan dalam jawaban.

— Dinei

Saya menggunakan v78 dan tidak bisa menjalankan ini; bahkan datang ke sini untuk mencari tahu apakah saya melupakan beberapa detail.

— Herbert Van-Vliet

Ini hanya disebut alat pipet. Tidak ada tombol pintas untuk itu yang saya sadari. Satu-satunya cara Anda dapat menggunakannya sekarang adalah dengan mengklik kotak color picker di sidebar gaya dan kemudian mengklik halaman seperti yang telah Anda lakukan.

— jaredwilli
sumber

perlu ada cara yang lebih mudah

— SuperUberDuper

@SuperUberDuper Nah, sekarang ada. Jawaban saya adalah beberapa tahun. Saat ini, Anda cukup mengeklik kotak contoh warna kecil di sebelah nilai warna di bilah sisi gaya dan kemudian gerakkan mouse Anda ke halaman untuk melihat alat pemilih warna. Sekarang jauh lebih mudah.

— jaredwilli

tetapi Anda harus memiliki aturan warna terlebih dahulu

— SuperUberDuper

@SuperUberDuper atau gunakan var ... --c: red, cara termudah untuk memasukkan properti warna ke dalam panel devtools Anda.

— Brandito

dapatkah Anda menjelaskan lebih lanjut

— SuperUberDuper

Saat ini, alat pipet tidak berfungsi di versi Chrome saya (seperti yang dijelaskan di atas), meskipun sebelumnya berfungsi untuk saya. Saya mendengarnya sedang diperbarui di versi terbaru Chrome.

Namun, saya dapat mengambil warna dengan mudah di Firefox.

Buka halaman di Firefox
Menu Hamburger -> Pengembang Web -> Pipet
Tarik alat pipet di atas gambar ... Klik .
Warna disalin ke clipboard Anda, dan alat pipet menghilang.
Tempel kode warna

Jika Anda tidak bisa mendapatkan alat pipet untuk bekerja di Chrome, ini adalah solusi yang bagus.
Saya juga merasa lebih mudah untuk mengakses :-)

— SherylHohman
sumber

Saya pikir itu juga tidak berfungsi untuk saya, tetapi tampaknya ada batasan sehingga itu hanya berfungsi ketika devtools dipasang di jendela browser.

— buzard