कलर पिकर (आई ड्रॉपर) का उपयोग कैसे करें?


97

क्रोम देव उपकरण में निर्मित एक बहुत ही उपयोगी उपकरण है, जिसे मैंने अभी-अभी खोजा है। मुझे इसका नाम भी नहीं पता है, और मैं इसे Google पर नहीं ढूंढ पा रहा हूं। मैं कहूंगा कि यह एक पिक्सेल इंस्पेक्टर टूल है।

मैं निम्नलिखित विधि ढूंढता हूँ कि इसका उपयोग कैसे किया जाए:

1 क। पृष्ठभूमि रंग के साथ एक HTML तत्व का निरीक्षण करें।

1b। एक तत्व की पृष्ठभूमि का रंग परिभाषित करें।

  1. कलर पिकर पर क्लिक करें।
  2. पृष्ठ पर किसी भी तत्व पर अपना माउस ले जाएँ (dev टूल पर नहीं)

देखें: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

मेरे प्रश्न: इस उपकरण का नाम क्या है? इसे आसानी से कैसे उपयोग करें? ज्यादातर समय मैं रंग की परवाह नहीं करता, लेकिन मैं एक आइकन के पिक्सल का निरीक्षण करना चाहता हूं। क्या इस उपकरण का एक हॉटकी है?


यह नकल और उच्च-स्तरीय विचारों के लिए एक उपयोगी है: chrome.google.com/webstore/detail/eyedropper-color-pick/…
austin_ce

नीचे दिए गए टिप्पणियों में जवाब दिया; आप इसे देव टूल्स में पा सकते हैं (एलिमेंट्स टैब पर, इसके अंतर्गत "स्टाइल्स" टैब पर किसी भी "कलर" रूल पर क्लिक करें, पॉपअप पर एक कलर पिकर है) मैं जो देख रहा हूं वह बिना कलर की जरूरत का एक तरीका है नियम, जैसे कि आप कल्पना करते हैं कि आप किसी छवि से रंग लेना चाहते हैं।
mdikici 23

जवाबों:


105

बस आंख ड्रॉपर खोलने के लिए:

  1. DevTools खोलें F12
  2. एलिमेंट्स टैब पर जाएं
  3. शैलियाँ साइड बार के नीचे किसी भी रंग पूर्वावलोकन बॉक्स पर क्लिक करें

यहां छवि विवरण दर्ज करें

इसकी मुख्य कार्यक्षमता पिक्सेल रंग मूल्यों का निरीक्षण करके उन्हें क्लिक करना है हालांकि इसकी नई विशेषताओं के साथ आप नीचे दिए गए दो तीर आइकन पर क्लिक करके अपने पृष्ठ के मौजूदा रंग पैलेट या सामग्री डिज़ाइन पैलेट भी देख सकते हैं। अपने पेज को डिजाइन करते समय यह काफी उपयोगी हो सकता है।


6
मैं वर्तमान में 68.0.3440.106 संस्करण का उपयोग कर रहा हूं। आप अब रंग पैलेट का उपयोग किसी रंग का चयन करने के लिए नहीं कर सकते हैं
कैर

2
क्रोम v72 यहाँ, यह जवाब में वर्णित के रूप में काम करता है।
दीनी

1
मैं v78 पर हूं और यह काम करने के लिए नहीं मिल सकता; यहां तक ​​कि अगर मैं कुछ विस्तार को भूल रहा था तो यह पता लगाने के लिए यहां आया था।
हरबर्ट वान-व्लिट

34

इसे सिर्फ आईड्रॉपर टूल कहा जाता है। इसके लिए कोई शॉर्टकट कुंजी नहीं है जिससे मैं अवगत हूं। एकमात्र तरीका जिसे आप अभी उपयोग कर सकते हैं वह है शैलियों साइडबार में रंग बीनने वाले बॉक्स पर क्लिक करके और फिर पृष्ठ पर क्लिक करना जैसा कि आप पहले से ही कर रहे हैं।


8
वहाँ एक आसान तरीका होने की जरूरत है
SuperUberDuper

@SuperUberDuper खैर, अब है। मेरा जवाब कुछ साल पुराना है। आजकल, आप स्टाइल साइडबार में रंग मानों के आगे थोड़े रंग स्वैच बॉक्स पर क्लिक कर सकते हैं और फिर रंग बीनने वाले उपकरण को देखने के लिए अपने माउस को पृष्ठ पर ले जा सकते हैं। यह अब बहुत आसान है।
जेरेडविल्ली

5
लेकिन आपको पहले एक रंग नियम की आवश्यकता है
SuperUberDuper

1
@SuperUberDuper या एक var का उपयोग करें ... --c: red, अपने devtools पैनल में एक रंग संपत्ति प्राप्त करने का सबसे आसान तरीका।
ब्रैंडिटो

क्या आप अधिक समझा सकते हैं
SuperUberDuper 14

5

वर्तमान में, क्रोम के मेरे संस्करण में आईड्रॉपर टूल काम नहीं कर रहा है (जैसा कि ऊपर वर्णित है), हालांकि यह मेरे लिए अतीत में काम करता था। मुझे लगता है कि इसे क्रोम के नवीनतम संस्करण में अपडेट किया जा रहा है।

हालाँकि, मैं फ़ायरफ़ॉक्स में आसानी से रंग ले सकता हूँ।

  1. फ़ायरफ़ॉक्स में पेज खोलें
  2. हैम्बर्गर मेनू -> वेब डेवलपर -> आईड्रॉपर
  3. छवि पर आईड्रॉपर टूल खींचें ... क्लिक करें
    रंग आपके क्लिपबोर्ड पर कॉपी किया जाता है, और आईड्रॉपर टूल चला जाता है।
  4. रंग कोड पेस्ट करें

यदि आप क्रोम में काम करने के लिए आईड्रॉपर टूल नहीं प्राप्त कर सकते हैं, तो यह एक अच्छा काम है।
मुझे भी इसे एक्सेस करना आसान लगता है :-)


हालांकि यह मेरे लिए भी काम नहीं कर रहा था, लेकिन जाहिर तौर पर एक सीमा है ताकि यह तभी काम करे जब ब्राउज़र विंडो में डक्ट्स डॉक किए जाएं।
buzard
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.