Image Color Picker: फ़ोटो से रंग निकालें

Image Color Picker क्या है?

जल्द आ रहा है: Image Color Picker एक ब्राउज़र-आधारित टूल है जो आपको किसी भी इमेज से सीधे पिक्सल पर क्लिक करके सटीक रंग मान निकालने देता है। एक फ़ोटो अपलोड करें, किसी भी क्षेत्र पर कर्सर घुमाएं और रियल-टाइम मैग्निफ़ायर ओवरले में रंग देखें, फिर उस बिंदु पर सटीक HEX, RGB, HSL और CMYK मान कैप्चर करने के लिए क्लिक करें। ब्राउज़र डेवटूल्स या डेस्कटॉप आईड्रॉपर के विपरीत, यह टूल अपलोड की गई इमेज फ़ाइलों के साथ काम करता है, एक सत्र में आपके पिक्स से एक पैलेट बनाता है, और एक क्लिक से किसी भी फ़ॉर्मैट को क्लिपबोर्ड पर कॉपी करता है। सब कुछ आपके ब्राउज़र में चलता है — कोई सर्वर अपलोड नहीं, कोई अकाउंट आवश्यक नहीं।

मुख्य विशेषताएं

• इमेज से रंग चुनने के लिए क्लिक करें: लोड की गई इमेज पर हर माउस क्लिक उस स्थिति पर सटीक पिक्सल रंग कैप्चर करता है, यह ध्यान में रखते हुए कि इमेज को डिस्प्ले क्षेत्र में फ़िट करने के लिए कैसे स्केल किया गया है।
• सटीकता के लिए ज़ूम मैग्निफ़ायर: जैसे ही आप इमेज पर कर्सर घुमाते हैं, 60×60 px का एक फ़्लोटिंग प्रीव्यू स्क्वायर आपकी स्थिति को ट्रैक करता है, कर्सर के नीचे रंग और उसकी HEX वैल्यू दिखाता है ताकि आप क्लिक करने से पहले बिल्कुल देख सकें कि आप क्या चुनने वाले हैं।
• HEX, RGB, HSL, CMYK मान निकालें: प्रत्येक पिक किया गया रंग एक साथ चारों फ़ॉर्मैट में प्रदर्शित होता है। कॉम्पोनेंट साझा कलर यूटिलिटीज़ लाइब्रेरी से rgbToHex, rgbToHsl और rgbToCmyk कन्वर्ज़न फ़ंक्शन उपयोग करता है।
• पिक्स से कलर पैलेट बनाएं: टूल एक सत्र में आपके द्वारा पिक किए गए अंतिम 10 अद्वितीय रंग रखता है। डुप्लीकेट HEX मान चुपचाप अनदेखे किए जाते हैं — एक ही रंग पर दो बार क्लिक करने से दूसरी एंट्री नहीं जुड़ती।
• कलर हिस्ट्री ट्रैकिंग: क्लिक किए गए पैलेट स्वॉच आपको पहले पिक किए गए किसी भी रंग को दोबारा देखने और बिना फिर से पिक किए सभी चार फ़ॉर्मैट वैल्यू देखने देते हैं।
• एक क्लिक से रंग कॉपी करें: करंट कलर पैनल की हर फ़ॉर्मैट रो का अपना कॉपी बटन होता है। "Copy All Colors" बटन पूरे सत्र पैलेट को HEX वैल्यू की कॉमा-सेपरेटेड लिस्ट के रूप में एक्सपोर्ट करता है।
• 100% क्लाइंट-साइड प्रोसेसिंग: इमेज एक छुपे हुए HTML5 कैनवास एलिमेंट पर ड्रॉ की जाती है। सभी पिक्सल रीड्स getImageData() का उपयोग करके लोकल होती हैं — कोई डेटा आपके ब्राउज़र से नहीं जाता।
• किसी भी इमेज फ़ॉर्मैट के साथ काम करता है: फ़ाइल इनपुट accept="image/*" उपयोग करता है, इसलिए आपका ब्राउज़र जो भी फ़ॉर्मैट डिकोड कर सकता है (JPEG, PNG, WebP, GIF, AVIF, SVG) सपोर्टेड है।

Image Color Picker का उपयोग कैसे करें

चरण 1: अपनी इमेज अपलोड करें

जल्द आ रहा है: Image Color Picker खोलें। आपको एक डैश्ड ड्रॉप ज़ोन के साथ अपलोड पैनल दिखेगा। फ़ाइल पिकर खोलने के लिए ज़ोन पर क्लिक करें या सीधे उस पर इमेज फ़ाइल खींचें और छोड़ें। जब इमेज सफलतापूर्वक लोड हो जाती है, तो टूल "Image loaded" टोस्ट नोटिफिकेशन दिखाता है और पहले पिक किए गए किसी भी रंग को साफ करता है।

चरण 2: रंगों का प्रीव्यू के लिए होवर करें

एक बार जब आपकी इमेज दिखे, तो किसी भी क्षेत्र पर कर्सर घुमाएं। एक फ़्लोटिंग 60×60 px कलर स्क्वायर आपके कर्सर का पीछा करता है, जो उस पिक्सल को छुपाने से बचने के लिए थोड़ा ऊपर-दाईं ओर ऑफ़सेट होता है जिसका आप निरीक्षण कर रहे हैं। स्क्वायर आपके कर्सर के नीचे लाइव रंग से भर जाता है और कंट्रास्टिंग टेक्स्ट में इसकी HEX वैल्यू दिखाता है। यह मैग्निफ़ायर तब गायब हो जाता है जब आप इमेज से कर्सर हटाते हैं।

चरण 3: एक रंग कैप्चर करने के लिए क्लिक करें

उस रंग को लॉक करने के लिए इमेज पर किसी भी बिंदु पर क्लिक करें। "Current Color" पैनल इमेज के नीचे दिखाई देता है जो दिखाता है:

• कंट्रास्टिंग टेक्स्ट में HEX वैल्यू केंद्रित होने के साथ एक बड़ा कलर स्वॉच
• HEX, RGB, HSL और CMYK के लिए चार रो — प्रत्येक एक कॉपी बटन के साथ

उदाहरण के लिए, एक फ़ोटोग्राफ़ में मिडटोन आकाश पर क्लिक करने से यह मिल सकता है:

HEX:  #6fa8dc
RGB:  rgb(111, 168, 220)
HSL:  hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)

चरण 4: एक पैलेट बनाएं

इमेज के विभिन्न क्षेत्रों पर क्लिक करते रहें। प्रत्येक अद्वितीय रंग जो आप पिक करते हैं वह नीचे "Picked Palette" पैनल में स्वॉच के रूप में दिखाई देता है। किसी भी स्वॉच पर क्लिक करें उसे सक्रिय करंट कलर के रूप में पुनः लोड करने और सभी मान फिर से देखने के लिए। पैलेट प्रति सत्र 10 अद्वितीय रंग रखता है।

चरण 5: अपने रंग कॉपी करें

उसकी रो पर कॉपी बटन का उपयोग करके एकल फ़ॉर्मैट वैल्यू कॉपी करें। पूरा पैलेट एक्सपोर्ट करने के लिए, "Copy All Colors" पर क्लिक करें — यह सभी HEX वैल्यू आपके क्लिपबोर्ड पर कॉमा-सेपरेटेड स्ट्रिंग के रूप में लिखता है, जैसे #6fa8dc, #2d5f8e, #f4c842, #e8573a। किसी भी समय अपलोड ज़ोन से एक नई इमेज लोड करें; पैलेट स्वचालित रूप से रीसेट हो जाता है।

व्यावहारिक उदाहरण

लोगो से ब्रांड रंग मैच करना

आपके पास अपनी कंपनी के लोगो का PNG है और CSS स्टाइलशीट के लिए सटीक ब्रांड रंग चाहिए। लोगो अपलोड करें, प्राथमिक ब्रांड रंग पर होवर करें और उसे कैप्चर करने के लिए क्लिक करें। फिर सेकंडरी और एक्सेंट रंग पिक करें। "Copy All Colors" का उपयोग करें सभी पिक किए गए हेक्स वैल्यू की कॉमा-सेपरेटेड लिस्ट पाने के लिए, फिर उन्हें सीधे अपनी :root CSS वेरिएबल्स में पेस्ट करें।

एक फ़ोटोग्राफ़ से कलर पैलेट सैंपल करना

एक प्रोडक्ट फ़ोटोग्राफ़ में एक प्राकृतिक कलर स्कीम है जिसे आप UI डिज़ाइन के लिए उपयोग करना चाहते हैं। फ़ोटो अपलोड करें और डॉमिनेंट रंगों पर व्यवस्थित रूप से क्लिक करें — बैकग्राउंड टोन, प्रोडक्ट हाइलाइट, एक शैडो एरिया और एक एक्सेंट डिटेल। पैलेट पैनल 10 अद्वितीय स्वॉच तक जमा करता है। पूरा होने पर, RGB वैल्यू पुनः प्राप्त करने के लिए प्रत्येक स्वॉच पर क्लिक करें डिज़ाइन टूल्स में उपयोग के लिए।

बग रिपोर्ट के लिए एक विशिष्ट पिक्सल रंग की पहचान करना

एक UI में एक विशेष बटन स्टेट पर गलत टेक्स्ट रंग है और आपके पास स्क्रीनशॉट है। स्क्रीनशॉट अपलोड करें, बटन टेक्स्ट पर होवर करें और क्लिक करें। HEX वैल्यू कॉपी करें और उसे अपेक्षित वैल्यू के साथ अपनी बग रिपोर्ट में शामिल करें। यह इस बारे में अस्पष्टता को समाप्त करता है कि कौन सा सटीक रंग गलत तरीके से रेंडर हो रहा है।

टिप्स और बेस्ट प्रैक्टिस

जब सटीकता मायने रखती है तो हाई-रेज़ोल्यूशन इमेज का उपयोग करें। टूल कर्सर की स्थिति को रेंडर्ड साइज़ बनाम कैनवास साइज़ के आधार पर स्केल फ़ैक्टर का उपयोग करके वास्तविक इमेज पिक्सल कोऑर्डिनेट पर मैप करता है, इसलिए एक्सपोर्ट करने से पहले अपने इमेज एडिटर में एक डिटेल पर ज़ूम इन करने से आपको प्रति विज़ुअल एरिया अधिक एड्रेसेबल पिक्सल मिलते हैं।

मैग्निफ़ायर क्लिक करने से पहले HEX वैल्यू दिखाता है — इसका उपयोग करके पुष्टि करें कि आप बिल्कुल सही पिक्सल पर हैं न कि पड़ोसी एंटी-एलियास्ड एज पिक्सल पर, जो विशेष रूप से महत्वपूर्ण है जब टेक्स्ट या पतली लाइनों से सैंपलिंग कर रहे हों।

पैलेट डुप्लीकेट HEX वैल्यू को अनदेखा करता है। यदि आप दो दृश्य रूप से समान रंगों की तुलना करना चाहते हैं जो एक चैनल से अलग हैं, तो एक को पिक करें, उसकी वैल्यू नोट करें, फिर दूसरे को पिक करें।

सभी पैलेट रंग कॉपी करते समय, आउटपुट कॉमा-सेपरेटेड HEX वैल्यू है। इसे सीधे जल्द आ रहा है: Palette Generator हेक्स इनपुट में पेस्ट करें अपने निकाले गए रंगों पर हार्मनी वेरिएशन एक्सप्लोर करने के लिए।

सामान्य समस्याएं और समस्या-निवारण

फ़ाइल चुनने के बाद "Load error" टोस्ट: इमेज पढ़ने के बाद डिकोड नहीं हो पाई। यह आमतौर पर खराब फ़ाइलों या ऐसे फ़ॉर्मैट के साथ होता है जिन्हें ब्राउज़र पार्स नहीं कर सकता (कुछ TIFF और RAW कैमरा फ़ाइलें)। इमेज को JPEG या PNG में कन्वर्ट करें और फिर कोशिश करें।

क्लिक करने पर कोई रंग नहीं / मैग्निफ़ायर दिखाई नहीं देता: यह तब होता है जब कैनवास सही तरीके से इनिशियलाइज़ नहीं हुआ। टूल रीलोड करें और इमेज फिर से अपलोड करें। यदि इमेज बहुत बड़ी है (8000×8000 पिक्सल से अधिक), कुछ ब्राउज़र कैनवास साइज़ सीमित करते हैं — अपलोड करने से पहले इमेज का आकार बदलें।

सभी पिक किए गए रंग एक जैसे दिखते हैं: आप शायद एक समान क्षेत्र (बैकग्राउंड, सॉलिड फ़िल) पर क्लिक कर रहे हैं। अधिक डिटेल वाले क्षेत्र खोजने के लिए फ़ोटो एडिटर में इमेज पर ज़ूम इन करें, फिर वह क्रॉप किया हुआ वर्ज़न अपलोड करें।

पैलेट स्वॉच क्लिक पर प्रतिक्रिया नहीं करता: केवल 10 सबसे हाल में पिक किए गए अद्वितीय रंग रखे जाते हैं। यदि आप पहले से 10 रंग पिक कर चुके हैं, तो बाद के अद्वितीय रंग सबसे पुरानी एंट्री को बदल देते हैं। स्वॉच पर क्लिक करना हमेशा रंग रीलोड करने के लिए काम करता है — यदि पैलेट अनरेस्पॉन्सिव दिखे, तो जांचें कि आपका क्लिक स्वॉच पर गिरा और स्वॉच के बीच की जगह पर नहीं।

ड्रैग और ड्रॉप काम नहीं करता: ड्रॉप ज़ोन जांचता है कि file.type.startsWith('image/'). बिना MIME टाइप या गलत टाइप की फ़ाइलें चुपचाप अनदेखी होती हैं। फ़ॉलबैक के रूप में क्लिक-टू-ब्राउज़ मेथड उपयोग करें।

गोपनीयता और सुरक्षा

Image Color Picker आपकी फ़ाइलें पूरी तरह से आपके ब्राउज़र में प्रोसेस करता है। जब आप एक इमेज अपलोड करते हैं, तो इसे FileReader API का उपयोग करके डेटा URL के रूप में पढ़ा जाता है और एक छुपे हुए कैनवास एलिमेंट पर ड्रॉ किया जाता है — किसी सर्वर पर कोई डेटा ट्रांसमिट नहीं होता। आपकी इमेज कभी आपके डिवाइस से बाहर नहीं जातीं। टूल पेज लोड होने के बाद इंटरनेट कनेक्शन के बिना काम करता है, जो इसे गोपनीय फ़ोटोग्राफ़, मालिकाना डिज़ाइन एसेट और आंतरिक स्क्रीनशॉट के लिए सुरक्षित बनाता है।

अक्सर पूछे जाने वाले प्रश्न

क्या Image Color Picker मुफ़्त है?

हाँ, Image Color Picker पूरी तरह मुफ़्त है बिना किसी उपयोग सीमा के। इसका उपयोग करने के लिए आपको कोई अकाउंट, सब्सक्रिप्शन या भुगतान की आवश्यकता नहीं है। टूल जल्द आ रहा है: Glyph Widgets पर उपलब्ध है और सीधे आपके ब्राउज़र में चलता है।

क्या Image Color Picker ऑफ़लाइन काम करता है?

हाँ। एक बार पेज लोड होने के बाद, सभी प्रोसेसिंग HTML5 Canvas API का उपयोग करके लोकल होती है। आप इंटरनेट से डिसकनेक्ट कर सकते हैं और बिना किसी रुकावट के इमेज से रंग पिक करते रहे सकते हैं। टूल सामान्य उपयोग के दौरान कोई नेटवर्क रिक्वेस्ट नहीं करता।

Image Color Picker के साथ मेरा डेटा सुरक्षित है?

आपकी इमेज FileReader और getImageData() का उपयोग करके पूरी तरह क्लाइंट-साइड प्रोसेस होती हैं। किसी सर्वर पर कोई इमेज डेटा अपलोड नहीं होता। Glyph Widgets के पास उन फ़ाइलों की सामग्री तक कोई पहुंच नहीं है जो आप इस टूल से खोलते हैं।

टूल कौन से रंग फ़ॉर्मैट आउटपुट करता है?

टूल प्रत्येक पिक किए गए रंग के लिए चार फ़ॉर्मैट आउटपुट करता है: HEX (जैसे #6fa8dc), RGB (जैसे rgb(111, 168, 220)), HSL (जैसे hsl(210, 59%, 65%)) और CMYK (जैसे cmyk(50%, 24%, 0%, 14%))। प्रत्येक फ़ॉर्मैट का अपना कॉपी बटन होता है।

एक सत्र में मैं कितने रंग पिक कर सकता हूं?

पैलेट अंतिम 10 अद्वितीय पिक किए गए रंग रखता है। डुप्लीकेट HEX वैल्यू फिर से स्टोर नहीं होतीं — एक ही रंग पर दूसरी बार क्लिक करने का पैलेट काउंट पर कोई प्रभाव नहीं पड़ता। नई इमेज लोड करने पर पैलेट खाली हो जाता है।

कौन से इमेज फ़ॉर्मैट सपोर्टेड हैं?

फ़ाइल इनपुट accept="image/*" एट्रिब्यूट का उपयोग करके आपका ब्राउज़र जो भी इमेज फ़ॉर्मैट डिकोड कर सकता है वह स्वीकार करता है। व्यवहार में, इसमें JPEG, PNG, WebP, GIF, AVIF और SVG शामिल हैं। RAW या TIFF जैसे फ़ॉर्मैट जिन्हें ब्राउज़र नेटिव रूप से डिकोड नहीं कर सकते, लोड एरर देंगे।

कॉपी करने के बाद क्या मैं उसी इमेज से फिर रंग पिक कर सकता हूं?

हाँ। इमेज टूल में लोड रहती है जब तक आप उसे साफ नहीं करते या नई इमेज लोड नहीं करते। आप बिना फिर से अपलोड किए जितना चाहें क्लिक करते रहे सकते हैं, पैलेट बनाते रहे सकते हैं और रंग कॉपी करते रहे सकते हैं।

कलर सैंपलिंग कितनी सटीक है?

टूल getImageData(x, y, 1, 1) का उपयोग करके क्लिक की गई स्थिति पर बिल्कुल एक पिक्सल पढ़ता है। प्रदर्शित इमेज साइज़ और वास्तविक कैनवास आयामों के बीच स्केल मैपिंग getBoundingClientRect() से कैलकुलेट होती है, इसलिए परिणाम उस स्थिति पर सच्चे पिक्सल रंग को सटीक रूप से दर्शाता है, भले ही इमेज अपने मूल रेज़ोल्यूशन से अलग आकार में प्रदर्शित हो।

मैग्निफ़ायर किस लिए है?

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

क्या मैं एक क्रिया में पूरा पैलेट एक्सपोर्ट कर सकता हूं?

"Copy All Colors" पर क्लिक करने से सभी पिक किए गए HEX वैल्यू आपके क्लिपबोर्ड पर कॉमा-सेपरेटेड लिस्ट के रूप में लिखे जाते हैं। फिर आप इसे डिज़ाइन टूल्स, CSS वेरिएबल्स या आगे के कलर वर्क के लिए जल्द आ रहा है: Palette Generator में पेस्ट कर सकते हैं।

संबंधित टूल

• जल्द आ रहा है: Palette Generator — पिकर से निकाले गए बेस रंग से कॉम्प्लीमेंटरी, एनालॉगस, ट्रायडिक और अन्य कलर हार्मनी जनरेट करें।
• Color Converter — HEX, RGB, HSL, CMYK और अन्य फ़ॉर्मैट के बीच पूर्ण सटीकता के साथ कन्वर्ट करें।
• Contrast Checker — अपने पैलेट के दो रंगों के बीच WCAG एक्सेसिबिलिटी कंट्रास्ट रेशियो वेरिफ़ाई करें।
• Color Picker — बिना इमेज के सीधे रंग चुनें, कलर व्हील और स्लाइडर का उपयोग करके।

अभी Image Color Picker आज़माएं: जल्द आ रहा है: Glyph Widgets Image Color Picker