इमेज कलर पिकर

इमेज कलर पिकर का उपयोग कैसे करें

1. अपनी इमेज जोड़ें — कोई फ़ोटो, स्क्रीनशॉट या लोगो ड्रॉप ज़ोन पर खींचें, या ब्राउज़ पर क्लिक करें। इसे आपके डिवाइस पर पढ़ा जाता है; कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।
2. प्रीव्यू के लिए होवर करें — तस्वीर पर पॉइंटर घुमाएँ। ज़ूम लूप कर्सर के नीचे वाले हिस्से को बड़ा करता है और रीडआउट लाइव रंग दिखाता है ताकि आप सटीक पिक्सल पर पहुँच सकें।
3. चुनने के लिए क्लिक करें — रंग लॉक करने के लिए क्लिक करें। इसका HEX, RGB और HSL एक-क्लिक कॉपी बटनों के साथ दिखता है, और इसे आपकी हाल-के-रंग पट्टी में जोड़ दिया जाता है।
4. पैलेट पकड़ें — पूरी इमेज के प्रमुख रंग अपने-आप निकाले जाते हैं। किसी भी स्वैच का हेक्स कॉपी करने के लिए उस पर क्लिक करें, या पूरे पैलेट को CSS वेरिएबल या JSON ऐरे के रूप में कॉपी करें।

निकाले गए रंगों से आप क्या कर सकते हैं

• किसी ब्रांड से मिलान करें — अंदाज़े से रंग तय करने के बजाय सटीक ब्रांड रंग पढ़ने के लिए कोई लोगो या स्क्रीनशॉट डालें।
• किसी फ़ोटो से थीम बनाएँ — किसी हीरो इमेज या मूडबोर्ड को किसी साइट या स्लाइड डेक के लिए CSS वेरिएबल के समन्वित पैलेट में बदलें।
• किसी UI तत्व को सैंपल करें — किसी ऐप या चार्ट के स्क्रीनशॉट से सटीक पृष्ठभूमि, बॉर्डर या टेक्स्ट रंग चुनें।
• किसी डिज़ाइन को फिर से बनाएँ — किसी प्रेरणा-शॉट से रंग निकालें ताकि आप उसे दोहरा या फिर से रंग सकें।
• कंट्रास्ट जाँचें — यह पुष्टि करने के लिए कि कोई चुना हुआ रंग पठनीय है, उसे WCAG कंट्रास्ट चेकर में कॉपी करें।

रंग फ़ॉर्मैट त्वरित संदर्भ

किसी इमेज में रंग कैसे संग्रहीत होता है

जब आप किसी पिक्सल पर क्लिक करते हैं, तो जो मान आपको मिलता है वह इस बात में निहित है कि डिजिटल इमेज रंग को कैसे दर्शाती हैं। आपकी स्क्रीन पर लगभग हर फ़ोटो प्रति चैनल 8 बिट इस्तेमाल करती है — लाल, हरे और नीले के लिए एक-एक बाइट — जो प्रति चैनल 256 संभावित स्तर (0–255) देती है। तीन चैनलों को मिलाएँ और आपको 24-बिट "ट्रूकलर" मिलता है, जो 256 × 256 × 256 = 16,777,216 अलग-अलग रंग है, वही प्रसिद्ध "1.67 करोड़"। एक चौथा चैनल, अल्फ़ा, अपारदर्शिता दर्ज करने के लिए 8 और बिट जोड़ता है, जिससे 32-बिट RGBA पिक्सल बनता है। वही अल्फ़ा चैनल किसी लोगो को नरम, आर-पार दिखने वाले किनारे देता है — और इसीलिए किसी एंटी-अलियास्ड किनारे पर सैंपल किया गया रंग किसी एक के बजाय दो रंगों का मिश्रण होता है।

sRGB, गामा और स्क्रीनें असहमत क्यों होती हैं

किसी पिक्सल का rgb(58, 123, 255) कोई निरपेक्ष रंग नहीं है — यह किसी रंग स्थान में एक रंग है। वेब के लिए और बिना किसी एम्बेडेड प्रोफ़ाइल वाली किसी भी इमेज के लिए डिफ़ॉल्ट sRGB है, जो Hewlett-Packard और Microsoft ने संयुक्त रूप से विकसित किया मानक है (1996 में प्रस्तावित, 1999 में IEC द्वारा 61966-2-1 के रूप में मानकीकृत)। sRGB की दो बातें समझाती हैं कि कोई मान अपेक्षा से अलग क्यों दिख सकता है। पहला, sRGB मानों को एक ग़ैर-रैखिक गामा वक्र से संग्रहीत करता है, इसलिए संख्याएँ कच्ची प्रकाश तीव्रता नहीं होतीं और किसी डिस्प्ले को उन्हें डिकोड करना पड़ता है। दूसरा, वह डिकोडिंग — साथ ही हर मॉनिटर की चमक, कैलिब्रेशन और इमेज की अपनी रंग प्रोफ़ाइल — का मतलब है कि वही RGB मान अलग-अलग स्क्रीनों पर सचमुच थोड़ा अलग रेंडर होता है। नए वाइड-गैमट डिस्प्ले Display P3 नामक एक बड़ा स्थान इस्तेमाल करते हैं (sRGB से लगभग 25% अधिक रंग), इसलिए किसी P3 इमेज से सैंपल किया गया कोई चटख लाल असल में उससे बाहर हो सकता है जिसे sRGB वर्णित कर सकता है। पिक्सल-सटीक चयन के लिए, यह टूल जो मान पढ़ता है वह सटीक है; यह रूप है जो स्क्रीन-दर-स्क्रीन बदलता है।

HSL बनाम HSV, और हेक्स के संक्षिप्त रूप

ऊपर की संदर्भ तालिका HEX, RGB और HSL सूचीबद्ध करती है, पर कुछ बारीकियाँ जानने योग्य हैं। HEX के संक्षिप्त रूप हैं: #8A3 जैसा 3-अंकों का शॉर्टहैंड #88AA33 में विस्तृत होता है (हर अंक दोगुना, जो केवल तभी काम करता है जब किसी चैनल के दो अंक मेल खाते हों), और एक 8-अंकों का रूप #RRGGBBAA अंत में एक अल्फ़ा बाइट जोड़ता है।

इमेज एडिटरों में आप HSV (Hue, Saturation, Value, जिसे कभी-कभी HSB कहते हैं) से भी मिलेंगे, और इसे HSL के साथ भ्रमित करना आसान है। दोनों में रंगत एक जैसी है, पर तीसरा घटक एक ऐसे तरीके से अलग है जो मायने रखता है: HSL में, 100% हल्कापन हमेशा शुद्ध सफ़ेद होता है; HSV में, 100% वैल्यू रंगत का सबसे चटख रूप है, सफ़ेद नहीं। तो "इसे पूरा ऊपर कर दो" का मतलब HSL में सफ़ेद और HSV में एक संतृप्त रंग होता है। तब याद रखने योग्य है जब Photoshop (HSV) से कॉपी किया गया कोई मान CSS में अपेक्षा के अनुसार व्यवहार न करे — जो HSL का समर्थन करता है, HSV का नहीं।

यह टूल बनाम ब्राउज़र का मूल आईड्रॉपर

आधुनिक Chromium ब्राउज़र एक मूल EyeDropper API देते हैं (Chrome और Edge 95+, 2021 से) जो किसी वेब पेज को आपकी स्क्रीन पर कहीं से भी रंग सैंपल करने देता है, ब्राउज़र विंडो के बाहर भी। यह सचमुच सुविधाजनक है, पर इसकी दो सीमाएँ हैं: यह Firefox या Safari में समर्थित नहीं है, और यह मूल इमेज डेटा के बजाय स्क्रीन-रेंडर किए गए, स्केल किए गए पिक्सल पढ़ता है। यह इमेज कलर पिकर पूरक तरीका अपनाता है — यह सीधे आपकी अपलोड की गई इमेज के असली पिक्सल डेटा से कैनवास के ज़रिए सैंपल करता है। इसका मतलब है यह हर ब्राउज़र में काम करता है, यह उस असली संग्रहीत रंग को पढ़ता है, न कि जो भी आपके डिस्प्ले ने रेंडर किया, और आपकी इमेज कभी पेज से बाहर नहीं जाती।

प्रमुख-रंग पैलेट कैसे निकाले जाते हैं

लाखों पिक्सलों वाली किसी फ़ोटो से मुट्ठी भर प्रतिनिधि रंग निकालना एक क्लासिक समस्या है जिसे रंग क्वांटाइज़ेशन कहते हैं, और इसके कई जाने-माने तरीके हैं:

• मीडियन कट — क्लासिक एल्गोरिद्म (Paul Heckbert, 1980 के दशक की शुरुआत)। यह सारे रंगों को एक बॉक्स में रखता है, बार-बार बॉक्स को उसकी सबसे लंबी धुरी पर मीडियन रंग पर विभाजित करता है, और हर अंतिम बॉक्स को एक पैलेट स्वैच में औसत कर देता है।
• ऑक्ट्री — रंगों को एक आठ-तरफ़ा पेड़ में डालता है जो रंग घन को उपविभाजित करता है, सबसे कम इस्तेमाल की गई शाखाओं को तब तक मिलाता है जब तक लक्षित रंगों की संख्या न बचे। मेमोरी-कुशल।
• k-मीन्स क्लस्टरिंग — पिक्सलों को कुछ गतिशील "केंद्र" रंगों के इर्द-गिर्द समूहबद्ध करता है, तब तक दोहराता है जब तक वे प्रमुख रंगों पर स्थिर न हो जाएँ। सटीक पर धीमा।
• हिस्टोग्राम बकेटिंग — तेज़, सरल तरीका (और यही यह टूल इस्तेमाल करता है): रंग घन को बकेटों में बाँटें, गिनें कि हर एक में कितने पिक्सल आते हैं, और सबसे भरे हुए, नेत्रगत रूप से अलग बकेट चुनें।

एक बात और, आपको 1990 के दशक का पुराना "वेब-सेफ़" 216-रंग पैलेट याद हो सकता है, जब कई मॉनिटर केवल 256 रंग दिखा सकते थे और उनमें से 216 Mac और Windows पर एक जैसे रेंडर होते थे। हर आधुनिक डिवाइस के लाखों रंग दिखाने के साथ, वह पैलेट अब पूरी तरह एक ऐतिहासिक जिज्ञासा मात्र है।

एक रंग को पैलेट में बदलना — और उसे पठनीय रखना

एक बार जब आप कोई रंग चुन लेते हैं, तो बुनियादी रंग-चक्र सिद्धांत उसके इर्द-गिर्द एक योजना बनाने में मदद करता है। एक पूरक (कॉम्प्लिमेंट्री) जोड़ी अधिकतम कंट्रास्ट के लिए ठीक विपरीत रंगत (लगभग 180° दूर) का उपयोग करती है; सादृश्य (एनालॉगस) रंग चक्र पर एक-दूसरे के बगल में (लगभग 30–60° के भीतर) एक शांत, संगत अहसास के लिए होते हैं; एक त्रिकोणीय (ट्रायडिक) योजना संतुलन के साथ ऊर्जा के लिए 120° समान दूरी पर तीन रंगत लेती है; और एक एकवर्णी (मोनोक्रोमैटिक) योजना एकीकृत रूप के लिए एक ही रंगत के हल्केपन और संतृप्ति को बदलती है।

आप जो भी चुनें, उसे पहुँच-योग्यता (एक्सेसिबिलिटी) के लिए जाँचें। WCAG दिशानिर्देश AA स्तर पूरा करने के लिए सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 का कंट्रास्ट अनुपात माँगते हैं (और सख़्त AAA स्तर के लिए 7:1), इसलिए जो रंग पृष्ठभूमि के रूप में सुंदर दिखता है वह टेक्स्ट रंग के रूप में विफल हो सकता है। WCAG यह भी सलाह देता है कि अर्थ बताने के लिए कभी केवल रंग पर भरोसा न करें — कोई लेबल, आइकन या पैटर्न जोड़ें — क्योंकि लगभग 8% पुरुषों और 0.5% महिलाओं में किसी न किसी रूप की रंग-दृष्टि की कमी होती है। यहाँ चुने गए किसी भी रंग को आप सीधे WCAG कंट्रास्ट चेकर में पेस्ट करके पुष्टि कर सकते हैं कि वह पास होता है।

ब्रांड और प्रिंट काम के लिए एक आख़िरी सटीकता-नोट: स्क्रीनें रंग को प्रकाश (RGB) से मिलाती हैं, जबकि प्रिंटिंग प्रेस उसे स्याही (CMYK) से मिलाती हैं, और CMYK रंगों की एक छोटी श्रेणी को पुनरुत्पादित कर सकती है। इसका मतलब है कि आप किसी भौतिक या प्रिंट ब्रांड रंग को स्क्रीन पर उसकी फ़ोटो सैंपल करके पूरी तरह पकड़ नहीं सकते — प्रेस-सटीक काम के लिए, किसी चुने गए स्क्रीन मान के बजाय हमेशा ब्रांड के आधिकारिक CMYK या Pantone विनिर्देश का उपयोग करें।

एक सटीक रीडिंग पाना

कोई कलर पिकर एक पिक्सल का शाब्दिक मान लौटाता है, इसलिए थोड़ी तकनीक से आपको किसी क़रीब-क़रीब मिलते रंग के बजाय वह रंग मिलता है जो आप असल में चाहते हैं:

• किसी सपाट, केंद्रीय क्षेत्र से सैंपल करें जिस हिस्से की आपको परवाह है उसका — कभी ठीक किसी किनारे पर नहीं, जहाँ एंटी-अलियासिंग ने दो रंगों को एक बीच के पिक्सल में मिला दिया है जो किसी से मेल नहीं खाता।
• ज़ूम लूप का उपयोग करें सटीक पिक्सल पर पहुँचने के लिए। सामान्य आकार में एक पिक्सल बहुत छोटा होता है, और एक पिक्सल हट जाने का मतलब उल्लेखनीय रूप से अलग मान हो सकता है।
• किसी लॉसलेस स्रोत को प्राथमिकता दें। JPEG संपीड़न किसी "सपाट" रंग पर भी पिक्सलों को थोड़ा बदल देता है, इसलिए जो क्षेत्र एकसमान दिखता है वह पूरी तरह नहीं होता। कोई PNG या मूल एसेट एक साफ़, अधिक एकसमान रीडिंग देती है; किसी सपाट UI रंग का स्क्रीनशॉट आदर्श है।
• जब संभव हो, आर्टवर्क से चुनें, उसकी फ़ोटो से नहीं। कोई लोगो फ़ाइल आपको असली ब्रांड रंग देती है; किसी साइन या स्क्रीन की फ़ोटो को प्रकाश, कैमरे और संपीड़न ने फिर से आकार दिया होता है।

हेक्स, RGB या HSL — अपनी CSS में कौन सा रखें

तीनों एक ही रंग का वर्णन करते हैं, इसलिए चुनाव इस बारे में है कि आप उसके साथ क्या कर रहे हैं। HEX वह संक्षिप्त डिफ़ॉल्ट है जिसे आप अधिकांश स्टाइलशीट और डिज़ाइन टूल्स में कॉपी करेंगे। RGB तब सुविधाजनक है जब आप कच्चे 0–255 चैनलों के साथ काम कर रहे हों या rgba() के ज़रिए कोई अल्फ़ा मान चाहते हों। HSL वह है जिसे तब चुनें जब आप किसी रंग को सिर्फ़ बताने के बजाय उसे समायोजित करना चाहें: उसे चक्र पर घुमाने के लिए रंगत को खिसकाएँ, टिंट बनाने के लिए हल्कापन बढ़ाएँ या शेड के लिए घटाएँ, या संतृप्ति को धूसर की ओर गिराएँ — सब कुछ उसी रंग परिवार में रहते हुए। यही HSL को एक ही आधार रंग से होवर स्थितियाँ, अक्षम शैलियाँ और एकसमान टिंट/शेड रैंप बनाने के लिए उत्कृष्ट बनाता है। यह पिकर हर चुने गए रंग के लिए तीनों दिखाता है, ताकि आप जो भी काम के अनुकूल हो उसे पकड़ सकें।

किसी पैलेट को डिज़ाइन टोकन के रूप में संग्रहीत करना

जब आप कोई पैलेट निकालते हैं, तो अपनी पूरी स्टाइलशीट में कच्चे हेक्स कोड बिखेरने के लोभ से बचें। आधुनिक तरीक़ा है हर रंग को एक बार CSS कस्टम प्रॉपर्टी (एक CSS वेरिएबल) के रूप में परिभाषित करना और हर जगह उसे नाम से संदर्भित करना — जिसे डिज़ाइनर "डिज़ाइन टोकन" कहते हैं, उसकी नींव:

• पैलेट को एक जगह घोषित करें, आमतौर पर :root पर — उदाहरण के लिए --brand: #3a7bff; और --accent: #f59e0b;।
• उसे कहीं भी लागू करें color: var(--brand); या background: var(--accent); से।
• रंग को स्रोत पर एक बार बदलें और हर उपयोग अपडेट हो जाता है — फ़ाइलों में कोई खोज-और-बदलें नहीं, और यही ठीक तरीक़ा है जिससे लाइट/डार्क थीम स्विचिंग बनाई जाती है।

इसीलिए इस टूल का "CSS कॉपी करें" बटन पैलेट को पेस्ट-के-लिए-तैयार --color-1 … --color-5 वेरिएबल के रूप में आउटपुट करता है: यह सीधे किसी :root ब्लॉक में आपकी रंग योजना के एकमात्र सत्य-स्रोत के रूप में गिर जाता है।

पारदर्शिता पर एक नोट

इमेज लाल, हरे और नीले से आगे एक चौथा चैनल रख सकती हैं — अल्फ़ा, जो दर्ज करता है कि हर पिक्सल कितना अपारदर्शी है। जब आप किसी आंशिक रूप से पारदर्शी पिक्सल को सैंपल करते हैं, तो जो रंग आपको मिलता है वह वह दृश्य RGB है जिसे कैनवास संयोजित करता है, जबकि CSS पारदर्शिता को अलग से व्यक्त करता है: या तो 8-अंकों वाले हेक्स #RRGGBBAA के रूप में या rgba() या आधुनिक hsl() सिंटैक्स में एक अल्फ़ा मान के साथ। एक जान-बूझकर रखा गया व्यवहार जानने योग्य है — जब यह टूल निकाला गया पैलेट बनाता है तो यह पूरी तरह पारदर्शी पिक्सल छोड़ देता है। इसीलिए पारदर्शी पृष्ठभूमि पर कोई लोगो डालने से आपको खाली जगह को शामिल करने वाले किसी गंदले औसत के बजाय ब्रांड के असली रंग मिलते हैं, जो ठीक वही है जो आप तब चाहते हैं जब किसी आइकन या PNG एक्सपोर्ट से कोई पैलेट निकाल रहे हों।

अक्सर पूछे जाने वाले सवाल