आपको कोई रंग दिखता है जिसे आप दोबारा इस्तेमाल करना चाहते हैं — किसी फ़ोटो में, आपको पसंद आई किसी साइट के स्क्रीनशॉट में, किसी पुराने लोगो में जिसकी सोर्स फ़ाइलें कब की जा चुकीं — और आपको असली hex कोड चाहिए, कोई अंदाज़ा नहीं। आँख से आँकना कभी ठीक-ठीक काम नहीं करता; मॉनिटर झूठ बोलते हैं और "वह नीला" असल में छह थोड़े-थोड़े अलग नीले होते हैं। पैलेट को सीधे पिक्सेलों से निकालना आपको ऐसे कोड देता है जिन्हें आप CSS, किसी डिज़ाइन टूल, या किसी ब्रांड डॉक में पेस्ट कर सकते हैं।
यहाँ है इसे कैसे करें, और पिक्सेलों के किसी बेतरतीब पकड़ के बजाय सचमुच इस्तेमाल करने योग्य एक पैलेट कैसे पाएँ।
"पैलेट निकालना" असल में क्या करता है
टूल इमेज को स्कैन करता है और वे रंग ढूँढता है जो इसका सबसे अच्छा प्रतिनिधित्व करते हैं — प्रमुख टोन प्लस उल्लेखनीय एक्सेंट — फिर आपको हर एक एक ऐसे hex कोड के रूप में देता है जिसे आप कॉपी कर सकते हैं। दस लाख अलग-अलग पिक्सेल रंगों के बजाय, आपको एक सुथरा सेट (मान लीजिए 5 या 8) मिलता है जो इमेज का सार बताता है।
यह कुछ आम कामों के लिए सचमुच उपयोगी है:
- किसी लोगो या पुराने एसेट से ब्रांड रंग बहाल करना जब आपके पास ओरिजिनल स्पेक न हो।
- किसी ऐसी फ़ोटो से एक डिज़ाइन पैलेट बनाना जिसके मूड से आप मेल खाना चाहते हैं — एक लैंडस्केप, एक प्रोडक्ट शॉट, कला का एक टुकड़ा।
- किसी मौजूदा साइट या ग्राफ़िक को मिलाना जिसका आपके पास सिर्फ़ एक स्क्रीनशॉट है।
- ऐसा एक बैकग्राउंड या एक्सेंट चुनना जो आपकी पहले से इस्तेमाल हो रही किसी इमेज के साथ मेल खाए।
एक इमेज डालें और कोड पढ़ लें:
एक उपयोगी पैलेट पाने के लिए गिनती कंट्रोल इस्तेमाल करें
सबसे अहम एकमात्र सेटिंग है कि आप कितने रंग निकालते हैं। यह जवाब पूरी तरह बदल देता है।
- कम रंग (3–5) आपको ज़रूरी पैलेट देते हैं — वे कुछ टोन जो इमेज को परिभाषित करते हैं। यही आप आम तौर पर ब्रांडिंग या किसी डिज़ाइन सिस्टम के लिए चाहते हैं, जहाँ एक कसा सेट एक ख़ूबी है, सीमा नहीं।
- ज़्यादा रंग (8–12) सूक्ष्म एक्सेंट और ग्रेडिएंट पकड़ते हैं। तब उपयोगी जब कोई इमेज समृद्ध और विविध हो और आप द्वितीयक टोन भी चाहते हों, या जब आप ठीक-ठीक अध्ययन कर रहे हों कि कोई फ़ोटो कैसे रची गई है।
अगर पहला नतीजा गड़बड़ लगे — एक शेड हावी हो, या आपका चाहा कोई एक्सेंट मिलकर ग़ायब हो गया — तो गिनती एडजस्ट करें और फिर से पढ़ें। एक फ़ोटो जो 80% आसमान है वह कम गिनती पर आपको बहुत सारा नीला सौंपेगी; रंग के छोटे विस्फोट उभारने के लिए गिनती बढ़ाएँ।
कॉपी करने के लिए क्लिक — वह वर्कफ़्लो जो मायने रखता है
एक hex कोड पढ़ना और उसे टाइप करना वह जगह है जहाँ गलतियाँ घुसती हैं (#3A7BD5 बनाम #3A7BD6 और आपने दस मिनट यह सोचते बिताए कि यह गलत क्यों दिखता है)। Color Palette tool में, हर स्वैच क्लिक पर अपना hex कोड कॉपी करता है, इसलिए आप कीबोर्ड छुए बिना सीधे इमेज से क्लिपबोर्ड से अपनी स्टाइलशीट तक जाते हैं।
एक व्यावहारिक प्रवाह:
- इमेज लोड करें।
- गिनती को काम से मिलाकर सेट करें — किसी ब्रांड पैलेट के लिए कम, एक्सेंट पकड़ने के लिए ज़्यादा।
- आप जो भी स्वैच चाहें क्लिक करें; उसे जहाँ जाना हो पेस्ट करें।
- पर्याप्त रेंज नहीं? गिनती धीरे बढ़ाएँ और अतिरिक्त पकड़ें।
नतीजों को एक डिज़ाइनर की नज़र से पढ़ना
कुछ चीज़ें जानने लायक़ ताकि पैलेट अच्छे से उतरे:
- प्रमुख रंग हमेशा उपयोगी वाला नहीं होता। किसी सफ़ेद बैकग्राउंड पर एक प्रोडक्ट फ़ोटो बहुत सारा सफ़ेद या लगभग-सफ़ेद बताएगी। यह सटीक है, पर जिस रंग की आप असल में परवाह करते हैं वह प्रोडक्ट है — उसे निकालने के लिए गिनती बढ़ाएँ, या पहले विषय तक क्रॉप करें।
- फ़ोटो में दिखने से ज़्यादा रंग होते हैं। त्वचा, छाया, और परावर्तन ऐसे टोन जोड़ते हैं जिन्हें आपने सचेत रूप से नोटिस नहीं किया। एक ज़्यादा गिनती उन्हें उजागर करती है; एक कम गिनती उन्हें औसतों के पीछे छिपाती है।
- Hex पोर्टेबल है। आप जो भी कोड कॉपी करते हैं वह सीधे CSS, Figma, Photoshop, Canva, या किसी ब्रांड डॉक में काम करता है। कोई कन्वर्ज़न नहीं चाहिए।
यह आपके ब्राउज़र में क्यों रहता है
पूरा निष्कर्षण लोकल रूप से चलता है — इमेज आपके ब्राउज़र में Canvas के साथ पढ़ी और विश्लेषित होती है, और यह कभी किसी सर्वर पर अपलोड नहीं होती। यह तब मायने रखता है जब "इमेज" कोई बिना जारी किया मॉकअप हो, किसी क्लाइंट का निजी ब्रांड एसेट हो, या एक आंतरिक स्क्रीनशॉट जिसे आपको किसी अनजान वेब टूल पर नहीं डालना चाहिए। यह मुफ़्त है, किसी साइन-अप की ज़रूरत नहीं, और आपकी पहली विज़िट के बाद यह ऑफ़लाइन काम करता है।
रंग पकड़ें, कॉपी करने के लिए क्लिक करें, उन्हें वहाँ पेस्ट करें जहाँ उनकी जगह है।