इमेज कलर पिकर

कलर पिकर कैसे काम करता है

कोई फ़ोटो, स्क्रीनशॉट या लोगो अपलोड करें और उस पर कहीं भी क्लिक करें। टूल ठीक उसी पिक्सल को पढ़ता है और उसका रंग HEX (जैसे #1e88e5) और RGB (rgb(30, 136, 229)) में दिखाता है। कॉपी करें बटन HEX कोड को क्लिपबोर्ड पर रख देता है। इमेज लोड होते ही बीच का पिक्सल पढ़ लिया जाता है, ताकि आपको तुरंत एक वैल्यू दिखे।

आप जो भी रंग चुनते हैं, वह हाल के स्वैच की एक लाइन में जुड़ जाता है (आठ तक), ताकि आप कई जगह — कोई बटन, बैकग्राउंड, हेडिंग — आज़माकर फ़ैसला करने से पहले तुलना कर सकें। इमेज आपके ब्राउज़र के canvas पर पढ़ी जाती है और कभी अपलोड नहीं होती।

HEX, RGB और HSL आसान भाषा में

तीनों स्क्रीन के एक ही रंग को बताते हैं; बस लिखने का तरीक़ा अलग है।

• HEX — #RRGGBB, लाल, हरे और नीले के लिए 00 से ff तक हेक्साडेसिमल अंकों के तीन जोड़े। CSS, Figma, Canva, WordPress थीम और ज़्यादातर "ब्रांड कलर" फ़ील्ड यही माँगते हैं।
• RGB — वही तीन चैनल 0 से 255 तक के दशमलव नंबरों में। #1e88e5 और rgb(30, 136, 229) बिल्कुल एक हैं। कोड, Office और स्लाइडर वाले प्रोग्राम में काम आता है।
• HSL — ह्यू (कलर व्हील पर 0–360°), सैचुरेशन और लाइटनेस प्रतिशत में। यह पिकर HSL नहीं दिखाता, लेकिन कोई भी डिज़ाइन टूल या CSS HEX को तुरंत बदल देता है। HSL तब काम का है जब चुने हुए रंग का हल्का या गहरा रूप चाहिए: ह्यू वही रखें, सिर्फ़ लाइटनेस बदलें।

स्क्रीनशॉट से रंग निकालना

किसी ऐप, वेबसाइट या वीडियो फ़्रेम का रंग लेने के लिए स्क्रीनशॉट लें (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; फ़ोन: पावर + वॉल्यूम डाउन, iPhone पर साइड बटन + वॉल्यूम अप) और यहाँ डालें।

सटीक नतीजे के लिए सुझाव:

• सपाट हिस्से पर क्लिक करें। बटन के किनारे पर नहीं, बीच में क्लिक करें — किनारे बैकग्राउंड से मिले (एंटी-एलियासिंग) होते हैं और बीच का कोई रंग देते हैं।
• फ़ोटो में नॉइज़ होता है। फ़ोटो के पास-पास के पिक्सल थोड़े अलग होते हैं; कुछ जगह आज़माएँ और सबसे सही लगने वाला चुनें।
• स्क्रीनशॉट रंग बदल सकता है। नाइट मोड, Night Shift, HDR या कलर-मैनेज्ड डिस्प्ले कैप्चर में रंगत ला सकते हैं। अगर ब्रांड का सही रंग ज़रूरी है तो पहले इन्हें बंद करें।
• बहुत कंप्रेस हुए JPG भटक जाते हैं। कई बार सेव हुए JPG में किनारों के पास धब्बे दिखते हैं। अगर लोगो का ओरिजिनल PNG या SVG है, तो वही इस्तेमाल करें।
• पारदर्शी हिस्सों का कोई असली रंग नहीं होता; उन पर क्लिक करने से काला (#000000) मिलता है। लोगो के दिखने वाले हिस्से पर क्लिक करें।

रंग इस्तेमाल करने से पहले कंट्रास्ट जाँचें

सुंदर रंग भी टेक्स्ट के रूप में पढ़ने लायक़ न हो, ऐसा हो सकता है। एक्सेसिबिलिटी गाइडलाइन (WCAG) सामान्य टेक्स्ट और बैकग्राउंड के बीच कम से कम 4.5:1 और बड़े टेक्स्ट व आइकन के लिए 3:1 कंट्रास्ट माँगती हैं। सफ़ेद पर हल्का ग्रे या गहरे नीले पर मध्यम नीला अक्सर फ़ेल होते हैं।

टेक्स्ट और बैकग्राउंड के रंग लेने के बाद दोनों HEX कोड किसी भी कंट्रास्ट चेकर में डालें। अनुपात कम हो तो टेक्स्ट गहरा करें या बैकग्राउंड हल्का करें — HSL में लाइटनेस बदलना ब्रांड से हटे बिना इसे ठीक करने का सबसे तेज़ तरीक़ा है।

आम इस्तेमाल

• इमेज के रूप में भेजे गए लोगो से ब्रांड कलर पता करना।
• किसी वेबसाइट के बटन या बैकग्राउंड का रंग अपने डिज़ाइन में दोबारा बनाना।
• प्रेज़ेंटेशन, सोशल मीडिया पोस्ट या घर की सजावट के मूडबोर्ड के लिए फ़ोटो से पैलेट बनाना।
• फ़ेविकॉन जनरेटर में Apple touch आइकन का बैकग्राउंड रंग चुनना।

जुड़े हुए टूल

• पहले ऑब्जेक्ट को काटें, फिर बिना बैकग्राउंड के रंग लें: बैकग्राउंड हटाएँ।
• ज़्यादा सटीक क्लिक के लिए छोटा हिस्सा अलग करें: इमेज क्रॉप।
• इमेज को ही CSS के लिए कोड के रूप में चाहिए? इमेज से Base64।