आपके पास एक इमेज है और आपको उसमें से एक नंबर चाहिए: किसी ख़ास रंग का hex कोड। शायद यह कोई लोगो है जिसका ब्रांड स्पेक कब का जा चुका, किसी साइट का स्क्रीनशॉट जिसका नीला आप मिलाना चाहते हैं, या ऐसे शेड वाली एक फ़ोटो जिसे आप दोबारा इस्तेमाल करना चाहेंगे। जो रंग आप सोचते हैं उसे टाइप करना काम नहीं करता — आपकी आँख किसी स्क्रीन से #3A7BD5 नहीं पढ़ सकती, और जो रंग सही दिखता है वह आम तौर पर कुछ अंक दूर होता है। यहाँ जानें असली मान सीधे पिक्सेलों से कैसे पढ़ें।
अंदाज़ा लगाना कभी ठीक-ठीक क्यों नहीं चलता
स्क्रीन पर एक अकेला "नीला" असल में लगभग-एक जैसे नीलों का एक फैलाव है, और आपके मॉनिटर की चमक और कैलिब्रेशन उन्हें और खिसका देते हैं। आँख से चुनें और आप पास पर गलत उतरते हैं — इतना पास कि बेमेल परेशान करने वाला हो पर साफ़ न हो, इसलिए आप दस मिनट यह सोचते जलाते हैं कि बटन हेडर से मेल क्यों नहीं खाता। उपाय है अंदाज़ा लगाना बंद करना और वह नंबर पढ़ना जो पिक्सेल असल में स्टोर करता है।
तीन चरणों में कोड पाएँ
भरोसेमंद तरीका है एक कलर पिकर से पिक्सेल को सीधे सैंपल करना।
- इमेज लोड करें। जिस लोगो, स्क्रीनशॉट, या फ़ोटो से आप निकाल रहे हैं उसे डालें।
- सटीक पिक्सेल तक हॉवर करें। एक मैग्निफ़ायर लूप आपके कर्सर का पीछा करता है और नीचे का क्षेत्र बड़ा करता है, ताकि किसी कठोर किनारे पर आप देख सकें कि कौन सा पिक्सेल सपाट ब्रांड रंग है और कौन सा दो का एंटी-एलियास मिश्रण।
- सहेजने के लिए क्लिक करें, फिर कॉपी करें। हर क्लिक रंग को एक स्वैच के रूप में रखता है जो उसका HEX, RGB और HSL दिखाता है, हर एक अपने कॉपी बटन के साथ। HEX क्लिक करें और यह आपके क्लिपबोर्ड पर है।
सही पिक्सेल पर उतरें
लूप जितना लगता है उससे ज़्यादा मायने रखता है। जहाँ एक रंग दूसरे से मिलता है — किसी बैकग्राउंड के ख़िलाफ़ एक अक्षर, किसी आइकन का किनारा — बीच के पिक्सेल एंटी-एलियास होते हैं: दोनों रंगों का एक चिकना मिश्रण, कोई एक नहीं। वहाँ सैंपल करें और आपको एक गंदा मान मिलता है जो किसी से मेल नहीं खाता। आकार के कुछ पिक्सेल अंदर एक सपाट क्षेत्र का निशाना लगाएँ, जहाँ रंग ठोस हो, और ज़ूम किया दृश्य आपको क्लिक करने से पहले पुष्टि करने देता है कि आप उस पर हैं।
किसी साफ़ लोगो या सपाट UI पर यह आसान है — रंग एक चौड़े क्षेत्र भर एक-समान होता है। किसी फ़ोटो पर इसमें ज़्यादा सावधानी लगती है, क्योंकि दाना और कंप्रेशन का मतलब है पड़ोसी पिक्सेल सचमुच अलग होते हैं। किसी शांत, एक-समान रोशनी वाले क्षेत्र से चुनें और यह जाँचने के लिए कुछ सैंपल लें कि वे सहमत हैं।
HEX, RGB या HSL — जो फ़िट हो लें
हर स्वैच आपको तीनों एक साथ देता है, इसलिए आप जो भी आपका गंतव्य चाहे उसे कॉपी करें:
- HEX (
#3A7BD5) — वेब डिफ़ॉल्ट। CSS, Figma, Canva, ब्रांड डॉक। इसे कॉपी करें जब तक न करने की कोई वजह न हो। - RGB (
rgb(58, 123, 213)) — चैनल मान, तब उपयोगी जब कोई टूल इन्हें माँगे या आपकोrgbaके ज़रिए पारदर्शिता चाहिए। - HSL (
hsl(215, 65%, 53%)) — hue, saturation, lightness. तब सबसे अच्छा जब आप रंग को एडजस्ट करना चाहें: किसी हॉवर स्थिति के लिए इसे चमकाना, किसी वेरिएंट के लिए इसे धीमा करना, या इससे एक स्केल बनाना।
चूँकि हर स्वैच तीनों ले जाता है, आप बस फ़ॉर्मैट बदलने के लिए कभी फिर से सैंपल नहीं करते।
एक बार में कई रंग पकड़ना
एक लोगो शायद ही कभी एक रंग होता है। प्राइमरी, एक्सेंट, और टेक्स्ट रंग को एक ही पास में क्लिक करें — हर एक सूची में ढेर हो जाता है ताकि आप उनकी तुलना कर सकें और उन्हें एक के बाद एक कॉपी कर सकें, इमेज को तीन अलग बार लोड करने के बजाय।
अगर आप ख़ास पिक्सेलों के बजाय किसी पूरी इमेज का रंग सारांश चाहते हैं — वह समग्र पैलेट जिससे कोई फ़ोटो बनी है — तो यह एक अलग काम है, और img.diy का अलग पैलेट टूल आपके लिए प्रमुख रंग अपने-आप निकालता है। इस पिकर को तब इस्तेमाल करें जब आप वह सटीक जगह जानते हों जो आप चाहते हैं; पैलेट टूल को तब जब आप चाहते हों कि इमेज आपके लिए चिह्नित की जाए।
यह आपके डिवाइस पर रहता है
इमेज आपके ब्राउज़र में एक कैनवस से लोकल रूप से पढ़ी जाती है — कुछ भी अपलोड नहीं होता, कोई साइन-अप नहीं, और पहली लोड के बाद यह ऑफ़लाइन काम करता है। तो कोई बिना जारी किया मॉकअप या किसी क्लाइंट का निजी एसेट कभी आपकी मशीन नहीं छोड़ता सिर्फ़ इसलिए कि आपको उसमें से एक hex कोड चाहिए था।
इमेज लोड करें, पिक्सेल तक हॉवर करें, क्लिक करें, और कोड कॉपी करें।