डिज़ाइन ड्राफ्ट/वेबपेज स्क्रीनशॉट से ब्रांड कलर निकालें
पसंदीदा वेबसाइट कलर स्कीम या ब्रांड विज़ुअल देखा हो तो, स्क्रीनशॉट अपलोड करके डायरेक्ट की-कलर पर क्लिक करें, अपने डिज़ाइन या कोड के लिए सटीक HEX वैल्यू पाएँ।
फोटो में कहीं भी क्लिक या ड्रैग करके कलर पिक करें
फोटो में क्लिक करके कलर पिक करने के बाद, यहाँ रिकॉर्ड होगा फिर से देखने और तुलना करने के लिए
एक फोटो अपलोड करें, फोटो पर माउस या फिंगर मूव करके पोज़िशन करें, मैग्नीफायर रियल-टाइम में कर्सर के आस-पास ज़ूम किए हुए पिक्सल दिखाकर सटीक पोज़िशनिंग में मदद करता है, क्लिक करने पर उस पोज़िशन का कलर पिक हो जाता है, इमीडिएटली HEX, RGB, HSL तीनों फॉर्मेट दिखेंगे और एक क्लिक में कॉपी करें, पिकिंग हिस्ट्री भी ऑटोमैटिक रिकॉर्ड होकर तुलना में मदद करती है — पूरी प्रोसेस ब्राउज़र में लोकल होती है, सर्वर पर अपलोड नहीं होती।
कलर पिकिंग और पिक्सल रीडिंग पूरी तरह ब्राउज़र में लोकल होती है, फोटो किसी सर्वर से नहीं गुज़रती
होवर करते वक्त कर्सर के आस-पास के पिक्सल रियल-टाइम में ज़ूम होकर दिखते हैं, रेड बॉक्स उस स्पेसिफिक पिक्सल को मार्क करता है
HEX, RGB, HSL एक साथ दिखते हैं, कॉपी बटन पर क्लिक करके डायरेक्ट डिज़ाइन टूल या कोड में पेस्ट करें
साइनअप की ज़रूरत नहीं, पेमेंट की ज़रूरत नहीं, कोई हिडन यूसेज लिमिट भी नहीं
टिपिकल यूज़ केस
चाहे ब्रांड कलर निकालना हो, फोटो की कलर स्कीम रेफरेंस लेना हो, या डेवलपमेंट इम्प्लीमेंटेशन चेक करना हो, फोटो में क्लिक करके सटीक कलर वैल्यू मिल जाती है।
पसंदीदा वेबसाइट कलर स्कीम या ब्रांड विज़ुअल देखा हो तो, स्क्रीनशॉट अपलोड करके डायरेक्ट की-कलर पर क्लिक करें, अपने डिज़ाइन या कोड के लिए सटीक HEX वैल्यू पाएँ।
किसी लैंडस्केप या पोर्ट्रेट फोटो से आसमान, स्किन, पेड़-पौधे जैसे नैचुरल टोन निकालें, डिज़ाइन प्लान या इलस्ट्रेशन कलर स्कीम के रेफरेंस बेसलाइन के तौर पर इस्तेमाल करें।
डेवलपर्स डिज़ाइन ड्राफ्ट रीक्रिएट करते वक्त, डिज़ाइन स्क्रीनशॉट और एक्चुअल पेज स्क्रीनशॉट दोनों में अलग-अलग कलर पिक करके HEX वैल्यू कम्पेयर करें, कलर सटीक रीक्रिएट हुआ या नहीं जल्दी कन्फर्म करें, आँख से गेस करने की ज़रूरत नहीं।
कलर फॉर्मेट
एक ही कलर को डिस्क्राइब करने के तीन अलग तरीके, पेस्ट करने वाली सिचुएशन के हिसाब से फॉर्मेट चुनें।
| फॉर्मेट | लिखने का उदाहरण | कॉमन यूज़ सिचुएशन |
|---|---|---|
| HEX | #FF3B30 | वेबपेज CSS, ज़्यादातर डिज़ाइन टूल्स (जैसे Figma, Photoshop) का कलर इनपुट बॉक्स |
| RGB | rgb(255, 59, 48) | रेड, ग्रीन, ब्लू तीन चैनल की वैल्यू अलग से देखने या एडजस्ट करने वाली सिचुएशन |
| HSL | hsl(4, 100%, 59%) | ह्यू, सैचुरेशन, लाइटनेस के हिसाब से डिस्क्राइब करता है, एक ही ह्यू पर डार्कनेस या सैचुरेशन एडजस्ट करने में सुविधाजनक |
तीनों फॉर्मेट एक जैसे कलर को डिस्क्राइब करते हैं, सिर्फ वैल्यू की रिप्रेजेंटेशन अलग है; पेज पर हर फॉर्मेट एक क्लिक में कॉपी हो सकता है, डायरेक्ट अपने डिज़ाइन टूल या कोड एडिटर में पेस्ट करें।
कैसे इस्तेमाल करें
कोई सॉफ्टवेयर इंस्टॉल नहीं करना, सब कुछ वेबपेज में ही होता है, मैग्नीफायर सटीक पोज़िशनिंग में मदद करता है।
क्लिक करके चुनें या फोटो को डायरेक्ट वेबपेज में ड्रैग करें, JPG, PNG, WebP, GIF सपोर्ट है, एक फोटो 20MB से कम, हर बार सिर्फ एक ही प्रोसेस होगी।
फोटो पर कर्सर मूव करें, मैग्नीफायर रियल-टाइम में आस-पास के ज़ूम किए हुए पिक्सल दिखाता है, रेड बॉक्स उस स्पेसिफिक पोज़िशन को मार्क करता है जो पिक होने वाली है।
टारगेट पोज़िशन पर क्लिक करें या फिंगर रिलीज़ करें तो कलर पिक हो जाता है, इमीडिएटली HEX, RGB, HSL तीनों फॉर्मेट की वैल्यू दिखेगी।
उस फॉर्मेट के पास के कॉपी बटन पर क्लिक करें, कलर वैल्यू क्लिपबोर्ड में कॉपी करें और इस्तेमाल के लिए पेस्ट करें।
टेक्निकल जानकारी
फोटो पहले ब्राउज़र में डिकोड होकर ओरिजिनल फोटो जैसे ही रेज़ॉल्यूशन के एक कैनवस पर ड्रॉ होती है, पेज पर जो दिखता है वह इस कैनवस का सिर्फ छोटा दिखाया गया इफ़ेक्ट है; कलर पिक करते वक्त, डिस्प्ले पोज़िशन को कैनवस की रियल पिक्सल कोऑर्डिनेट में कन्वर्ट करके कलर पढ़ा जाता है, इसलिए फोटो पेज पर कितनी भी छोटी दिखे, कलर पिकिंग की एक्यूरेसी हमेशा फोटो की ओरिजिनल रेज़ॉल्यूशन के मुताबिक रहती है, ज़ूम में डिस्प्ले होने से डिस्टॉर्शन नहीं आता।
कलर पिकर का फंक्शन है “क्लिक करके एक पिक्सल का कलर वैल्यू पढ़ना”, यह प्योर इंटरैक्टिव व्यूइंग टूल है, यह खुद कोई डाउनलोड करने वाली इमेज फ़ाइल जनरेट नहीं करता, इसलिए “कई फोटो अलग-अलग प्रोसेस होकर कई रिज़ल्ट बनना” जैसा बैच सेमांटिक इसमें नहीं होता; अगर कई फोटो से अलग-अलग कलर पिक करना है, तो डायरेक्ट एक-एक करके अपलोड करके देखें, हर बार फोटो बदलने पर करंट पिकिंग हिस्ट्री क्लियर हो जाएगी।
FAQ
कलर पिकर एक इंटरैक्टिव व्यूइंग फीचर है जिसमें क्लिक करके पिक्सल का कलर वैल्यू पढ़ा जाता है, यह खुद कोई एक्सपोर्ट फ़ाइल जनरेट नहीं करता, इसलिए इसमें “बैच” का कॉन्सेप्ट नहीं है — अपलोड की गई फोटो कितनी भी बड़ी हो, आप स्पेसिफिक पोज़िशन पर एक-एक करके क्लिक करके कलर पढ़ते हैं, इसलिए यह टूल सिर्फ सिंगल फोटो अपलोड सपोर्ट करता है, बैच मोड नहीं देता।
पूरी तरह आपके करंट डिवाइस के ब्राउज़र में होती है, ब्राउज़र की नेटिव Canvas पिक्सल रीडिंग कैपेबिलिटी से डायरेक्ट फोटो डेटा से उस पोज़िशन की कलर वैल्यू पढ़ी जाती है, पूरी प्रोसेस में ओरिजिनल फोटो किसी सर्वर पर अपलोड नहीं होती।
मैग्नीफायर में कर्सर की करंट होवर पोज़िशन के आस-पास के एक छोटे एरिया का ज़ूम किया हुआ इफ़ेक्ट दिखता है, एक्चुअल में रेड बॉक्स से मार्क किए गए उस स्पेसिफिक पिक्सल का कलर पिक होता है; अगर फोटो में ग्रेडिएंट या नॉइज़ है, तो पास के पिक्सल के कलर में मामूली फर्क हो सकता है, बस रेड बॉक्स से मार्क किए गए पिक्सल को ही स्टैंडर्ड मानकर क्लिक करें, कलर एग्ज़ैक्ट मैच होगा, कोई डेविएशन नहीं होगा।
पिकिंग हिस्ट्री सिर्फ करंट पेज के ब्राउज़र मेमोरी में सेव होती है, इससे आप एक ही ऑपरेशन में कई पिक किए गए कलर की तुलना कर पाते हैं, पेज रीफ्रेश या बंद करने पर हिस्ट्री क्लियर हो जाएगी, परमानेंट सेव या अपलोड नहीं होगी, अगर किसी कलर वैल्यू को लंबे समय के लिए रखना है, तो पहले उसे अपने नोट्स या डिज़ाइन टूल में कॉपी-पेस्ट कर लें।
HEX (जैसे #FF3B30) वेब डेवलपमेंट और ज़्यादातर डिज़ाइन टूल्स में सबसे कॉमन फॉर्मेट है, सिंपल और पेस्ट करने में आसान है; RGB (जैसे rgb(255, 59, 48)) तब ज़्यादा इंट्यूटिव है जब रेड, ग्रीन, ब्लू तीन चैनल की वैल्यू अलग-अलग एडजस्ट करनी हो; HSL (जैसे hsl(4, 100%, 59%)) ह्यू, सैचुरेशन, लाइटनेस के हिसाब से कलर डिस्क्राइब करता है, एक ही ह्यू पर डार्कनेस/लाइटनेस या सैचुरेशन एडजस्ट करने में ज़्यादा सुविधाजनक है। तीनों फॉर्मेट एक जैसे कलर को डिस्क्राइब करते हैं, आप जिस टूल या कोड में पेस्ट करना चाहते हैं उसके हिसाब से फॉर्मेट चुनें।
हाँ। कलर पिकर फोटो के डिकोड किए गए ओरिजिनल पिक्सल डेटा को पढ़ता है, पेज पर डिस्प्ले साइज़ से प्रभावित नहीं होता — फोटो पेज पर छोटी दिखाई जाए तब भी, पिकिंग करते वक्त फोटो की रियल रेज़ॉल्यूशन के हिसाब से उस पोज़िशन का पिक्सल कलर सटीक पढ़ा जाता है, ज़ूम में डिस्प्ले होने से कलर में कोई डेविएशन नहीं आता।
साइनअप की ज़रूरत नहीं, वेट करने की ज़रूरत नहीं, क्लिक करके सीधे कॉपी करें और इस्तेमाल करें।