Color Picker: स्क्रीन से कोई भी रंग चुनें

Color Picker क्या है?

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

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

• स्क्रीन पर कहीं से भी रंग चुनें — EyeDropper API Chrome, Edge और अन्य आधुनिक Chromium ब्राउज़र में सिस्टम-स्तरीय कलर सैम्पलर सक्रिय करती है। किसी भी पिक्सेल पर क्लिक करें और रंग तुरंत टूल में लोड हो जाता है।
• आधुनिक ब्राउज़र में EyeDropper API समर्थन — टूल रनटाइम पर API की उपलब्धता पहचानता है। असमर्थित ब्राउज़र पर, टूटे बटन की जगह स्पष्ट संदेश दिखता है।
• HEX, RGB, HSL, HSB, CMYK के बीच कन्वर्ट करें — "All Formats" पैनल सभी रिप्रेजेंटेशन एक साथ दिखाता है। किसी भी इनपुट को बदलने से बाकी सभी रियल टाइम में अपडेट होते हैं।
• रंग मूल्य क्लिपबोर्ड में कॉपी करें — प्रत्येक फ़ॉर्मेट में एक समर्पित कॉपी बटन है। सफल कॉपी की पुष्टि के लिए दो सेकंड के लिए कॉपी आइकन की जगह चेकमार्क आता है।
• कलर हिस्ट्री (Supporter फ़ीचर) — 50 हाल ही में उपयोग किए गए रंग IndexedDB में स्टोर होते हैं और क्लिक करने योग्य स्वॉच के रूप में दिखते हैं। पेज रीलोड के बाद भी हिस्ट्री बनी रहती है। Ko-fi Supporter सब्स्क्रिप्शन आवश्यक है।
• लोड होने के बाद ऑफलाइन काम करता है — सभी कन्वर्ज़न लॉजिक JavaScript में चलती है। पेज लोड होने के बाद इंटरनेट बंद करने पर भी टूल काम करता रहता है।

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

चरण 1: टूल खोलें और इनपुट मेथड चुनें

Color Picker पर जाएं। टूल डिफ़ॉल्ट रंग #3B82F6 (मध्यम नीला) के साथ खुलता है। रंग सेट करने के तीन तरीके हैं:

• EyeDropper API का उपयोग करने के लिए Pick From Screen बटन (पिपेट आइकन) क्लिक करें
• ब्राउज़र की नेटिव कलर व्हील खोलने के लिए पिकर पैनल के टॉप-राइट में छोटा कलर स्वॉच इनपुट क्लिक करें
• HEX, R/G/B या H/S/L इनपुट फ़ील्ड में सीधे टाइप करें

चरण 2: स्क्रीन से रंग सैम्पल करें (EyeDropper मेथड)

Pick From Screen क्लिक करें। EyeDropper सक्रिय रहने के दौरान बटन लेबल "Picking..." में बदल जाता है। आपका कर्सर क्रॉसहेयर मैग्नीफायर बन जाता है। अपनी स्क्रीन पर किसी भी पिक्सेल पर क्लिक करें — अधिकांश सिस्टम पर ब्राउज़र विंडो के बाहर के पिक्सेल सहित। टूल hex मूल्य कैप्चर करता है, सभी फ़ॉर्मेट फ़ील्ड अपडेट होती हैं और सफलता की सूचना दिखती है। सैम्पल किया गया रंग स्वचालित रूप से हिस्ट्री पैनल में जुड़ जाता है।

चरण 3: रंग मूल्य मैन्युअल दर्ज करें या समायोजित करें

यदि आप पहले से रंग मूल्य जानते हैं, तो किसी भी इनपुट फ़ील्ड में टाइप करें। HEX फ़ील्ड # प्रिफ़िक्स के साथ या बिना मूल्य स्वीकार करती है। RGB इनपुट 0 से 255 तक के पूर्णांक स्वीकार करते हैं। HSL H (0–360), S (0–100) और L (0–100) स्वीकार करता है। किसी भी फ़ील्ड में बदलाव से बाकी दोनों फ़ॉर्मेट एक साथ अपडेट होते हैं।

चरण 4: सभी कलर फ़ॉर्मेट कन्वर्ज़न देखें

मुख्य पिकर के नीचे All Formats कार्ड तक स्क्रॉल करें। यह पैनल पूरा कन्वर्ज़न सेट दिखाता है: HEX, RGB, HSL, HSB और CMYK। प्रत्येक पंक्ति में अपना कॉपी बटन है। क्लिपबोर्ड में लिखने के लिए किसी भी फ़ॉर्मेट के बगल में कॉपी आइकन क्लिक करें।

चरण 5: हिस्ट्री के रंग पुनः उपयोग करें

पहले चुने गए रंग Recent Colors पैनल में रंगीन स्वॉच के रूप में दिखते हैं। किसी स्वॉच पर क्लिक करने से वह रंग पिकर और फ़ॉर्मेट फ़ील्ड में वापस लोड हो जाता है। हिस्ट्री मिटाने के लिए Clear बटन (ट्रैश आइकन) उपयोग करें।

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

वेबसाइट से ब्रांड रंग मिलाना

आप एक लैंडिंग पेज बना रहे हैं और ब्राउज़र टैब में दिख रहे क्लाइंट के लोगो में उपयोग किए गए सटीक बैंगनी रंग को मिलाना चाहते हैं। Pick From Screen क्लिक करें, लोगो के ऊपर होवर करें और क्लिक करें। टूल hex मूल्य — जैसे #6B21A8 — कैप्चर करता है और तुरंत rgb(107, 33, 168) और hsl(276, 61%, 40%) दिखाता है। अपनी CSS फ़ाइल में जो फ़ॉर्मेट उपयोग हो, उसे कॉपी करें।

Figma रंग को CSS में बदलना

आपकी Figma डिज़ाइन स्पेक में रंग rgb(234, 179, 8) है। R फ़ील्ड में 234, G में 179 और B में 8 टाइप करें। HEX फ़ील्ड #EAB308 में अपडेट होती है और HSL hsl(45, 93%, 47%) दिखाता है। Tailwind क्लास bg-[#EAB308] के लिए HEX मूल्य कॉपी करें या CSS कस्टम प्रॉपर्टी के लिए HSL।

Hex कोड कैसा दिखता है, जांचना

कोड रिव्यू में background: #1E3A5F दिखता है और आप इसे विज़ुअलाइज़ करना चाहते हैं। HEX फ़ील्ड में मूल्य पेस्ट करें। बड़ा कलर प्रीव्यू स्वॉच रंग से भर जाता है (गहरा नेवी ब्लू) और लेबल टेक्स्ट रंग पठनीयता के लिए स्वचालित रूप से काले और सफ़ेद के बीच समायोजित होता है। आप इसे हिस्ट्री स्वॉच के अन्य रंगों से तुलना कर सकते हैं।

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

हिस्ट्री पैनल को अस्थायी पैलेट के रूप में उपयोग करें (Supporter फ़ीचर)। टूल Premium Supporter के लिए IndexedDB में 50 रंग स्टोर करता है। एक-एक करके रंग सैम्पल करके या दर्ज करके छोटा पैलेट बनाएं — हर रंग एक क्लिकेबल स्वॉच बन जाता है।

EyeDropper वीडियो फ्रेम सहित किसी भी पिक्सेल पर काम करता है। वीडियो को अपने टार्गेट रंग वाले फ्रेम पर पॉज़ करें, फिर Pick From Screen उपयोग करें। API रेंडर किया गया पिक्सेल सैम्पल करती है, कम्प्रेस्ड सोर्स नहीं।

सटीक नियंत्रण के लिए HSL मूल्य टाइप करें। यदि आप कम सैचुरेशन पर कोई विशिष्ट ह्यू चाहते हैं, तो H और S फ़ील्ड में सीधे टाइप करें। "वही रंग, 20% हल्का" (L को 20 बढ़ाएं) जैसे समायोजन के लिए HSL अधिक सहज है।

शेयर करने योग्य URL वर्तमान रंग एन्कोड करते हैं। टूल एक शेयर करने योग्य स्टेट हुक उपयोग करता है — आपका वर्तमान HEX मूल्य पेज URL में एन्कोड है। किसी सहयोगी को विशिष्ट रंग भेजने के लिए ब्राउज़र URL कॉपी करें।

डिवाइस शेयर करने से पहले हिस्ट्री क्लियर करें। यदि आप संवेदनशील डिज़ाइन एसेट वाले रंग चुनते हैं, तो डिवाइस देने से पहले हिस्ट्री पैनल में Clear बटन उपयोग करके IndexedDB से उन्हें हटाएं।

सामान्य समस्याएं और समाधान

"EyeDropper समर्थित नहीं" संदेश दिखता है। EyeDropper API के लिए Chromium-आधारित ब्राउज़र (Chrome 95+, Edge 95+) चाहिए। 2026 की शुरुआत में Firefox और Safari इसे सपोर्ट नहीं करते। असमर्थित ब्राउज़र पर नेटिव कलर इनपुट स्वॉच उपयोग करें या मूल्य मैन्युअल टाइप करें।

टाइप करने के बाद HEX इनपुट अपडेट नहीं दिखता। फ़ील्ड को # के साथ या बिना 3-, 4-, 6- या 8-कैरेक्टर वैलिड hex कोड चाहिए। #3B जैसे आंशिक मूल्य इनपुट में स्वीकार होते हैं, लेकिन कन्वर्ज़न तभी होता है जब पूरा वैलिड कोड मौजूद हो।

RGB मूल्य रेंज से बाहर। प्रत्येक R, G, B फ़ील्ड 0–255 तक सीमित है। 255 से ऊपर का मूल्य blur पर 255 हो जाता है। parseInt फ़ॉलबैक का मतलब है कि गैर-संख्यात्मक कैरेक्टर 0 बन जाते हैं।

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

रीलोड के बाद हिस्ट्री नहीं रहती। हिस्ट्री केवल Supporter फ़ीचर है जो IndexedDB उपयोग करता है। Premium Supporter नहीं हैं तो हिस्ट्री पैनल एंट्री रिकॉर्ड नहीं करेगा। प्राइवेट/इन्कोग्निटो मोड में IndexedDB अनुपलब्ध हो तो हिस्ट्री पैनल हर बार खाली दिखेगा। टूल इसे चुपचाप संभालता है।

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

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

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

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

हां, Color Picker बिना साइनअप के पूरी तरह मुफ़्त है। मुख्य फ़ीचर — EyeDropper सैम्पलिंग, मल्टी-फ़ॉर्मेट कन्वर्ज़न और क्लिपबोर्ड कॉपी — Supporter अकाउंट के बिना उपलब्ध हैं। कलर हिस्ट्री, प्रीसेट और टूल नोट्स जैसे Premium Supporter फ़ीचर Ko-fi Supporter सब्स्क्रिप्शन के साथ उपलब्ध हैं।

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

हां। पेज लोड होने के बाद Color Picker इंटरनेट कनेक्शन के बिना काम करता है। सभी कलर कन्वर्ज़न लॉजिक आपके ब्राउज़र में JavaScript में लागू है। EyeDropper API भी एक ब्राउज़र-नेटिव फ़ीचर है जिसे नेटवर्क एक्सेस की जरूरत नहीं।

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

हां। कोई भी रंग डेटा या स्क्रीन सामग्री आपके ब्राउज़र से बाहर नहीं जाती। EyeDropper API केवल उस क्षण में एक पिक्सेल मूल्य कैप्चर करती है जब आप क्लिक करते हैं — यह स्क्रीनशॉट नहीं लेती और आपकी स्क्रीन रिकॉर्ड नहीं करती। रंग हिस्ट्री केवल आपके ब्राउज़र के IndexedDB में स्टोर होती है। Glyph Widgets को यह नहीं पता कि आप कौन से रंग चुनते हैं।

EyeDropper बटन कौन से ब्राउज़र सपोर्ट करते हैं?

EyeDropper API Chrome 95 और बाद के वर्जन, Edge 95 और बाद के वर्जन, तथा अन्य Chromium-आधारित ब्राउज़र में काम करती है। Firefox या Safari में यह सपोर्टेड नहीं है। टूल रनटाइम पर सपोर्ट पहचानता है और असमर्थित ब्राउज़र पर टूटे बटन की जगह स्पष्ट संदेश दिखाता है।

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

टूल HEX (जैसे #3B82F6), RGB (जैसे rgb(59, 130, 246)), HSL (जैसे hsl(217, 91%, 60%)), HSB (HSV भी कहा जाता है) और CMYK में कन्वर्ट और डिस्प्ले करता है। All Formats पैनल पांचों एक साथ दिखाता है और प्रत्येक के लिए अलग कॉपी बटन देता है।

क्या मैं EyeDropper का उपयोग किए बिना रंग मूल्य दर्ज कर सकता हूं?

हां। आप HEX, R/G/B या H/S/L इनपुट फ़ील्ड में सीधे टाइप कर सकते हैं। आप छोटे नेटिव कलर इनपुट (Pick From Screen बटन के बगल में रंगीन वर्ग) पर भी क्लिक करके ब्राउज़र की बिल्ट-इन कलर व्हील खोल सकते हैं। तीनों इनपुट मेथड एक ही आंतरिक कलर स्टेट अपडेट करते हैं।

हिस्ट्री पैनल कितने रंग स्टोर करता है?

हिस्ट्री पैनल 50 रंग तक स्टोर करता है (Supporter फ़ीचर)। सीमा पहुंचने पर सबसे पुरानी एंट्री हटा दी जाती है। हिस्ट्री IndexedDB में सेव होती है और ब्राउज़र सेशन के बाद भी रहती है। इस फ़ीचर के लिए Ko-fi Supporter सब्स्क्रिप्शन चाहिए।

क्या मैं किसी के साथ विशिष्ट रंग शेयर कर सकता हूं?

हां। वर्तमान रंग पेज URL में शेयर करने योग्य स्टेट के रूप में एन्कोड है। रंग चुनने के बाद ब्राउज़र के एड्रेस बार से URL कॉपी करें। जब आपका सहयोगी लिंक खोलता है, तो टूल उस रंग के साथ प्री-सेलेक्ट होकर लोड होता है और "Loaded from share" सूचना दिखाता है। आप पेज के नीचे Share बटन का उपयोग करके Twitter, LinkedIn या Reddit पर सीधे पोस्ट कर सकते हैं।

क्या टूल अल्फ़ा/ट्रांसपेरेंसी मूल्यों के साथ काम करता है?

वर्तमान टूल मुख्यतः पूरी तरह अपारदर्शी रंगों के साथ काम करता है। HEX इनपुट फ़ील्ड 3-, 4-, 6- और 8-डिजिट hex कोड (4- और 8-डिजिट कोड में अल्फ़ा चैनल शामिल है) स्वीकार करती है, लेकिन RGB और HSL इनपुट अलग अल्फ़ा स्लाइडर नहीं दिखाते। RGBA या HSLA मूल्य चाहिए तो दिखाए गए RGB और HSL मूल्यों को अपने इच्छित अल्फ़ा मूल्य के साथ मैन्युअल रूप से बढ़ाया जा सकता है।

अगर मैं अमान्य hex कोड टाइप करूं तो क्या होगा?

HEX इनपुट फ़ील्ड टाइप करते समय आंशिक या अमान्य मूल्य स्वीकार करती है। कलर कन्वर्ज़न केवल तब अपडेट होती है जब वैलिड hex कोड मौजूद हो (3, 4, 6 या 8 कैरेक्टर, # के साथ या बिना)। आंशिक मूल्य से कोई त्रुटि नहीं होती — डिस्प्ले बस अंतिम वैलिड रंग दिखाता रहता है।

संबंधित टूल्स

• Contrast Checker — जांचें कि Color Picker से चुने गए आपके फ़ोरग्राउंड और बैकग्राउंड रंग WCAG 2.1 एक्सेसिबिलिटी मानकों को पूरा करते हैं या नहीं।
• Color Converter — मुख्य पिकर इंटरफ़ेस में न दिखाए गए अतिरिक्त कलर फ़ॉर्मेट में कन्वर्ट करें।
• जल्द आ रहा है: Palette Generator — चुने गए hex मूल्य से शुरू करके पूरा कलर पैलेट जनरेट करें।
• जल्द आ रहा है: Gradient Generator — सैम्पल किए गए रंगों का उपयोग करके विज़ुअल एडिटर के साथ CSS ग्रेडिएंट बनाएं।

अभी Color Picker आज़माएं: Glyph Widgets Color Picker