Bagaimana cara menggunakan color picker (penetes mata)?

97

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.

  1. Klik pada pemilih warna.
  2. 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:

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

masukkan deskripsi gambar di sini

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
6
Saya saat ini menggunakan versi 68.0.3440.106. Anda tidak dapat lagi menggunakan palet warna untuk memilih warna
caras
2
Chrome v72 di sini, berfungsi seperti yang dijelaskan dalam jawaban.
Dinei
1
Saya menggunakan v78 dan tidak bisa menjalankan ini; bahkan datang ke sini untuk mencari tahu apakah saya melupakan beberapa detail.
Herbert Van-Vliet
34

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
8
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
5
tetapi Anda harus memiliki aturan warna terlebih dahulu
SuperUberDuper
1
@SuperUberDuper atau gunakan var ... --c: red, cara termudah untuk memasukkan properti warna ke dalam panel devtools Anda.
Brandito
dapatkah Anda menjelaskan lebih lanjut
SuperUberDuper
5

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.

  1. Buka halaman di Firefox
  2. Menu Hamburger -> Pengembang Web -> Pipet
  3. Tarik alat pipet di atas gambar ... Klik .
    Warna disalin ke clipboard Anda, dan alat pipet menghilang.
  4. 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