इमेज कलर पिकर

जब आपको ठीक रंग चाहिए, कोई ऐसा रंग नहीं जो करीब हो

आप एक ब्रांड फिर से बना रहे हैं और एकमात्र संदर्भ एक पुराना logo है। आप एक button को एक पसंद की साइट के स्क्रीनशॉट से मिला रहे हैं। आपने एक तस्वीर में एक छाया देखी और इसे अपने खुद के design में इस्तेमाल करना चाहते हैं। हर मामले में समस्या एक ही है: आपकी आँख एक स्क्रीन से एक hex code नहीं पढ़ सकती। "वह teal" असल में एक दर्जन थोड़े अलग teals है, और monitors उन्हें और आगे खिसका देते हैं। आपको वह संख्या चाहिए जो pixel वाकई रखता है।

यही यह टूल करता है। एक image लोड करें, उस पर घूमें, और एक magnifier loupe आपके cursor का पीछा करता है, नीचे के pixels दिखाते हुए, बड़ा किया हुआ ताकि आप उस सटीक एक पर उतर सकें जिसे आप चाहते हैं। Click करें, और वह रंग एक swatch के रूप में सहेजा जाता है। हर swatch अपना HEX, RGB और HSL मान हर एक के बगल में एक copy बटन के साथ सूचीबद्ध करता है, ताकि आप image के एक pixel से सीधे अपने clipboard में एक code तक जाएँ।

image कभी आपकी मशीन नहीं छोड़ती। Pixels एक canvas से ब्राउज़र में लोकल रूप से पढ़े जाते हैं — कुछ भी अपलोड नहीं होता, कोई अकाउंट नहीं, और पेज लोड होने के बाद यह नेटवर्क बंद होने पर काम करता रहता है। यही मुद्दे की बात है जब "image" एक अनरिलीज़ mockup, एक क्लाइंट का ब्रांड asset, या एक आंतरिक स्क्रीनशॉट हो जिसे आपको एक यादृच्छिक web टूल को नहीं सौंपना चाहिए।

यह व्यवहार में कैसे काम करता है

• loupe सटीकता के लिए है। Logos और UI के कठोर किनारे होते हैं जहाँ रंग एक अकेले pixel पर बदलता है — anti-aliasing का मतलब है पड़ोस का pixel एक गंदला मिश्रण है। बड़ा किया दृश्य आपको प्रतिबद्ध होने से पहले ठीक-ठीक देखने देता है कि आप किस pixel पर हैं, ताकि आप सपाट ब्रांड रंग चुनें और किनारा नहीं।
• हर click एक swatch रखता है। नमूना एक-बार-में-एक-और-चला-गया नहीं है। image के इर्द-गिर्द click करें और हर रंग एक सूची में जमा होता है, ताकि आप एक logo का primary, इसका accent, और text रंग एक pass में खींच सकें और उन्हें साथ-साथ तुलना कर सकें।
• तीन formats, एक चुनाव। हर swatch एक साथ HEX, RGB और HSL दिखाता है। format बदलने के लिए आप दोबारा नमूना नहीं लेते — वही रंग पहले से तीनों में वहाँ बैठा है, हर एक अपने खुद के copy बटन के साथ।

HEX, RGB, HSL — किसे copy करें

ये एक ही रंग को लिखने के तीन तरीके हैं, और सही एक इस पर निर्भर करता है कि यह कहाँ जा रहा है।

• HEX (#3A7BD5) web के लिए डिफ़ॉल्ट है — CSS, अधिकांश design टूल, ब्रांड docs। संक्षिप्त और सार्वभौमिक रूप से paste करने योग्य। इसे copy करें जब तक आपके पास न करने का कोई कारण न हो।
• RGB (rgb(58, 123, 213)) red, green और blue channels को अक्षर-दर-अक्षर बताता है। उपयोगी जब कोई टूल channel मान चाहता है, जब आपको एक alpha (rgba) चाहिए, या जब आप तर्क कर रहे हों कि एक रंग कैसे मिलाया जाता है।
• HSL (hsl(215, 65%, 53%)) hue, saturation और lightness का वर्णन करता है। यह वह है जिसकी ओर हाथ बढ़ाएँ जब आप एक रंग को केवल दोबारा इस्तेमाल करने के बजाय समायोजित करना चाहें — एक hover state के लिए lightness खिसकाएँ, एक धीमे variant के लिए saturation गिराएँ, hue रखें और एक scale बनाएँ।

एक ईमानदार सीमा, और एक सहोदर टूल

यह एक point sampler है: हर click एक अकेला pixel पढ़ता है। एक साफ़ logo या सपाट UI पर वही ठीक है जो आप चाहते हैं। एक शोर भरी तस्वीर पर — grain, gradients, JPEG artefacts — दो पड़ोसी pixels भिन्न हो सकते हैं, इसलिए एक सपाट क्षेत्र से चुनें और एक outlier पर उतरने से बचने के लिए loupe इस्तेमाल करें। यहाँ एक क्षेत्र-का-औसत brush नहीं है।

और अगर आप बिल्कुल हाथ से चुनना नहीं चाहते, img.diy में एक अलग palette टूल है जो एक पूरी image scan करता है और आपको उसके प्रमुख रंग अपने-आप सौंपता है। दोनों अलग सवालों का जवाब देते हैं। palette टूल आपको बताता है यह image किन रंगों से बनी है; color picker आपको एक विशिष्ट pixel पर इशारा करने देता है — logo पर यही ठीक जगह, वह एक button — और इसका मान लेने देता है। एक image को सारांशित करने के लिए palette टूल की ओर हाथ बढ़ाएँ, और इसकी ओर जब आप पहले से वह बिंदु जानते हों जिसे आप चाहते हैं।

एक image लोड करें, pixel ढूँढने के लिए घूमें, इसे रखने के लिए click करें, ज़रूरी format copy करें।