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