कलर पिकर

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

कलर पिकर कैसे काम करता है

एक ग्राफ़िकल कलर पिकर असल में तीन नियंत्रण एक साथ काम करते हुए हैं। जिस बड़े वर्ग के भीतर आप खींचते हैं वह एक द्वि-आयामी संतृप्ति/वैल्यू क्षेत्र है: बाएं से दाएं जाने पर रंग कितना चटख है यह बदलता है (संतृप्ति), जबकि ऊपर से नीचे जाने पर रंग कितना हल्का या गहरा है यह बदलता है (वैल्यू, यानी ब्राइटनेस)। उसके बगल की पतली पट्टी — ह्यू स्लाइडर — आधार रंग को चुनती है, जो लाल, नारंगी, पीले, हरे, सियान, नीले और मैजेंटा से होकर 360° पर वापस लाल पर लौटती है। एक तीसरा वैकल्पिक स्लाइडर अल्फा (अपारदर्शिता) तय करता है, पूरी तरह पारदर्शी से पूरी तरह अपारदर्शी तक, जिसे आमतौर पर एक शतरंज-पट्ट पर दिखाया जाता है ताकि आप आँक सकें कि रंग वास्तव में कितना पारभासी है।

यह वर्ग-और-स्लाइडर लेआउट HSV मॉडल (Hue, Saturation, Value) और उसके निकट संबंधी HSL (Hue, Saturation, Lightness) पर बना है, न कि सीधे RGB पर, और इसका कारण मानवीय है। HSV उस तरीक़े से मेल खाता है जैसे लोग रंग के बारे में सोचते हैं: आप पहले तय करते हैं कि कौन-सा रंग चाहिए — ह्यू — फिर वह कितना चटख और कितना चमकीला हो। "थोड़ा कम तीव्र आसमानी नीला" पाने के लिए तीन स्वतंत्र 0–255 लाल, हरे और नीले मानों को समायोजित करना, एक ही वर्ग के भीतर खींचने की तुलना में कहीं कठिन है। चूँकि स्लाइडर द्वारा ह्यू स्थिर रखा जाता है जबकि आप वर्ग का पता लगाते हैं, पिकर उस एक ह्यू के लिए पूरे संतृप्ति/वैल्यू तल को एक चिकने ग्रेडिएंट के रूप में प्रस्तुत कर सकता है — बिल्कुल वही क्षेत्र जो आप इस पेज पर देखते हैं।

इस डिज़ाइन को Adobe Photoshop के कलर पिकर ने लोकप्रिय बनाया और तब से यह Figma, Sketch, GIMP और लगभग हर वेब-आधारित पिकर जैसे टूल्स में वस्तुतः मानक बन गया है। परंपराएँ इतनी गहराई से जमी हैं कि अधिकांश लोग किसी अपरिचित पिकर को तुरंत चला सकते हैं: चटख रंग वर्ग के ऊपर-दाएं बैठते हैं, सफ़ेद ऊपर-बाएं, और काला ह्यू चाहे जो हो नीचे के किनारे पर चलता है।

आईड्रॉपर और नेटिव ब्राउज़र पिकर

ब्राउज़र अपनी रंग-चुनने वाली मशीनरी के साथ आते हैं, और यह जानना काम का है कि हर हिस्सा क्या करता है। HTML का <input type="color"> एलिमेंट एक नेटिव स्वैच प्रस्तुत करता है जो क्लिक करने पर ऑपरेटिंग सिस्टम का रंग-डायलॉग खोलता है। परंपरागत रूप से इसका मान हमेशा #rrggbb रूप में सात-वर्ण वाला लोअरकेस hex स्ट्रिंग होता है — इसमें ऐतिहासिक रूप से कोई अल्फा चैनल नहीं रहा है और अनसेट होने पर यह #000000 पर डिफ़ॉल्ट होता है, यही वजह है कि इतने सारे साधारण "कलर पिकर" केवल hex ही देते हैं। (नए ब्राउज़र एक वैकल्पिक alpha विशेषता और व्यापक रंग-स्थान उजागर करने लगे हैं, पर सादा hex मान वही न्यूनतम-साझा आधार बना रहता है जिस पर आप हर जगह भरोसा कर सकते हैं।)

आईड्रॉपर एक अलग और नई क्षमता है। EyeDropper API किसी वेब पेज को स्क्रीन के किसी भी पिक्सल का रंग लेने देता है — केवल पेज के भीतर नहीं, बल्कि कहीं भी जहाँ उपयोगकर्ता देख सकता है, जिसमें दूसरी विंडो भी शामिल हैं। new EyeDropper().open() कॉल करने पर कर्सर एक मैग्नीफ़ायर में बदल जाता है; लौटाया गया promise तभी हल होता है जब उपयोगकर्ता जानबूझकर किसी पिक्सल पर क्लिक करता है, और एक ऑब्जेक्ट लौटाता है जिसकी sRGBHex प्रॉपर्टी में लिया गया रंग होता है। गोपनीयता के लिए इसे केवल किसी वास्तविक उपयोगकर्ता-क्रिया (जैसे इस टूल का आईड्रॉपर बटन) से ही शुरू किया जा सकता है, यह केवल सुरक्षित HTTPS संदर्भ में चलता है, और कभी चुपचाप पिक्सल नहीं पढ़ता — Escape दबाने पर यह रद्द हो जाता है। समर्थन फ़िलहाल Chromium-आधारित ब्राउज़रों (Chrome, Edge और Opera) तक सीमित है; Firefox और Safari इसे अभी लागू नहीं करते, इसलिए एक अच्छा-बना टूल API के अनुपस्थित होने पर बटन को निष्क्रिय कर देता है, जैसा यह करता है। आप जो कुछ लेते हैं वह अपलोड नहीं होता — रंग पूरी तरह आपके डिवाइस पर हल होता है।

आपकी आँखें रंग को असल में कैसे देखती हैं

कोई स्क्रीन सिर्फ़ तीन रोशनियों से हर रंग की नक़ल क्यों कर पाती है, इसकी जड़ आँख के जीवविज्ञान में है। मानव रंग-दृष्टि त्रिवर्णी (trichromatic) है: रेटिना में तीन प्रकार की कोन कोशिकाएँ होती हैं, हर एक तरंगदैर्घ्य के एक अलग बैंड के प्रति संवेदनशील। L (long) कोन लगभग 560 nm पर चरम पर होते हैं और लालिमा वाली रोशनी के प्रति सबसे अधिक प्रतिक्रिया देते हैं, M (medium) कोन हरी रोशनी के लिए लगभग 530 nm पर, और S (short) कोन नीली रोशनी के लिए लगभग 420 nm पर चरम पर होते हैं। आपका मस्तिष्क तरंगदैर्घ्य को सीधे नहीं मापता; वह इन तीन कोन प्रकारों की सापेक्ष फ़ायरिंग दरों की तुलना करता है और उस अनुपात से एक रंग का अनुमान लगाता है।

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

प्रति चैनल 8 बिट के साथ एक डिस्प्ले लाल, हरे और नीले के 256-256 स्तर देता है — 256 × 256 × 256 ≈ 1.67 करोड़ संयोजन। आँख केवल लगभग एक करोड़ रंगों में अंतर कर सकती है, इसलिए साधारण स्क्रीन-कार्य के लिए यह "ट्रूकलर" गहराई व्यावहारिक रूप से उससे परे है जितना अधिकांश लोग देख सकते हैं, और दृश्य बैंडिंग दुर्लभ है। जानने योग्य एक विशेषता: आँख लाल या नीले की तुलना में हरे के प्रति उल्लेखनीय रूप से अधिक संवेदनशील है — L और M कोन प्रभावी रहते हैं जबकि S कोन कुल का केवल एक छोटा हिस्सा बनाते हैं — यही वजह है कि हरा अनुभूत ब्राइटनेस में सबसे अधिक योगदान देता है और पिकर में मध्यम-हरे इतने तीव्र दिख सकते हैं।

आपको कौन-सा रंग फ़ॉर्मैट कॉपी करना चाहिए?

कोई पिकर तभी उपयोगी है जब वह आपको रंग उस नोटेशन में दे जो आपका लक्ष्य वास्तव में चाहता है। Hex (#rrggbb, या अल्फा सहित #rrggbbaa) वेब की सार्वभौमिक मुद्रा है — संक्षिप्त, कॉपी-पेस्ट-अनुकूल और हर जगह स्वीकृत — पर इसे पढ़ना कठिन है: कोई #5b8cff पर नज़र डालकर यह नहीं जान सकता कि यह हल्का नीला है। rgb() / rgba() वही संख्याएँ दशमलव में दिखाते हैं और ब्लेंडिंग या स्क्रिप्टिंग में काम आते हैं। hsl() / hsla() CSS में हाथ से संपादन के लिए सबसे सुविधाजनक हैं, क्योंकि अकेले लाइटनेस मान को समायोजित करने पर रंग बिना उसके ह्यू को बिगाड़े अनुमानित रूप से हल्का या गहरा हो जाता है।

इनसे आगे, आधुनिक CSS कई नए फ़ंक्शन जोड़ता है। hwb() (hue, whiteness, blackness) किसी रंग को कुछ सफ़ेद से टिंट और कुछ काले से शेड किए गए आधार ह्यू के रूप में वर्णित करता है — एक सहज चित्रकार-मॉडल जो अब भी HSL के साथ sRGB स्थान में ही रहता है। इससे भी महत्वपूर्ण, lab() और lch() डिवाइस-निरपेक्ष CIELAB स्थान का उपयोग करते हैं, और oklab() / oklch() Oklab स्थान का। Oklab और OkLCh का मुख्य लाभ यह है कि वे अनुभूति में एकरूप (perceptually uniform) हैं: एक नियत संख्यात्मक क़दम रंग-स्थान में कहीं भी लगभग समान दिखने वाला परिवर्तन पैदा करता है। यही उन्हें समान-अंतराल वाले पैलेट, बिना धूसर "मृत क्षेत्रों" के चिकने ग्रेडिएंट, और अनुमानित लाइटनेस-रैंप बनाने के लिए उत्कृष्ट बनाता है — यही कारण है कि डिज़ाइन-सिस्टम रंग-स्केल के लिए oklch() की बढ़ती हुई अनुशंसा की जाती है।

अधिकांश रोज़मर्रा के वेब-कार्य के लिए hex या rgb() कॉपी करें; जब हाथ से बदलाव करना हो तो hsl() का सहारा लें, और जब आप कोई व्यवस्थित पैलेट बना रहे हों और अनुभूति में समान क़दम चाहते हों तो oklch() या lab() का। (ऊपर की पहली तीन पंक्तियाँ इस पेज के वर्तमान रंग को दिखाती हैं; निचली पंक्तियाँ फ़ंक्शन नोटेशन दिखाती हैं, उसी मान के सटीक रूपांतरण नहीं।)

रंग-अंधता और कंट्रास्ट के लिए डिज़ाइन करना

आपको जो रंग शानदार दिखता है उसे चुनना, सबके लिए काम करने वाला रंग चुनने जैसा नहीं है। उत्तरी-यूरोपीय वंश के लगभग 8% पुरुषों और 0.5% महिलाओं में किसी न किसी रूप में रंग-दृष्टि की कमी होती है, क्योंकि सबसे सामान्य प्रकार X गुणसूत्र पर स्थित जीनों के कारण होते हैं। भारी बहुमत लाल–हरी कमी का है — ड्यूटेरानोमली, यानी हरी प्रतिक्रिया में एक खिसकाव, अकेला सबसे सामान्य रूप है — जो लाल, हरे, भूरे और नारंगी को आसानी से भ्रमित कर देता है। नीली–पीली (ट्रिटन) कमी मौजूद है पर दुर्लभ है। व्यावहारिक सबक़ है वह पुरानी सुगम्यता-सूक्ति "अकेले रंग पर भरोसा मत करो": अर्थ बताने के लिए रंग को कभी एकमात्र तरीक़ा मत बनाओ। किसी लाल त्रुटि-स्थिति को किसी आइकन या लेबल के साथ जोड़ो, चार्ट श्रृंखलाओं को पैटर्न या सीधे लेबल से अलग करो, और लिंक को रंगीन होने के साथ-साथ रेखांकित भी करो।

पठनीयता समस्या का दूसरा आधा हिस्सा है, और यहाँ ठोस संख्याएँ हैं। Web Content Accessibility Guidelines (WCAG) टेक्स्ट और उसकी पृष्ठभूमि के बीच एक कंट्रास्ट अनुपात परिभाषित करती हैं, और व्यापक रूप से इस्तेमाल किए जाने वाले AA स्तर पर वे सामान्य-आकार के टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 (मोटे तौर पर 18pt, या 14pt बोल्ड) की माँग करती हैं, साथ ही यूज़र-इंटरफ़ेस घटकों और सार्थक ग्राफ़िक्स के लिए भी। इसलिए जब यह पिकर आपको बॉडी-टेक्स्ट के लिए कोई hex मान देता है, तो असली सवाल "क्या यह सुंदर है?" नहीं बल्कि "क्या यह पृष्ठभूमि के मुक़ाबले 4.5:1 पार करता है?" है। एक अच्छी आदत है यहाँ रंग चुनना और फिर तय करने से पहले उस जोड़ी को किसी समर्पित कंट्रास्ट चेकर में जाँचना।

एक रंग-चुनने वाला वर्कफ़्लो जो बढ़ता है

एक अच्छा रंग चुनना आसान है; पूरे प्रोजेक्ट में एकरूप बने रहना वहीं पिकर अपनी क़ीमत वसूल करता है। एक दोहराने-योग्य वर्कफ़्लो ऐसा दिखता है। पहले, कैप्चर — अनुमान लगाने के बजाय किसी लोगो, स्क्रीनशॉट या संदर्भ छवि से एक सटीक ब्रांड रंग उठाने के लिए आईड्रॉपर का उपयोग करें, ताकि मान पिक्सल तक सटीक रहे। दूसरा, एंकर — कुछ मुख्य रंगों के एक छोटे सेट (एक प्राइमरी, एक सेकेंडरी, एक न्यूट्रल और कुछ एक्सेंट) पर टिक जाएँ और हर एक को पैलेट में जोड़ें से सहेजें ताकि आप उन्हें याद से दोबारा न निकालते रहें। तीसरा, विस्तार — उन एंकरों से होवर-स्थिति, बॉर्डर और पृष्ठभूमि के लिए ज़रूरी टिंट और शेड बनाएं, ह्यू को स्थिर रखते हुए ताकि पूरा परिवार सुसंगत रहे। चौथा, निर्यात — पूरे सेट को CSS कस्टम प्रॉपर्टीज़ (--color-1, --color-2, …) या JSON के रूप में बाहर भेजें ताकि वही टोकन हर पेज और घटक को चलाएँ।

पारदर्शिता अपने ज़िक्र की हक़दार है। जब भी आप कोई ओवरले, कोई सूक्ष्म टिंट या ऐसा रंग चाहते हों जो अपने पीछे की चीज़ के अनुसार ढल जाए, तब हाथ से मिलाए गए ठोस रंग के बजाय अल्फा का उपयोग करें — किसी छवि के ऊपर एक rgba(0, 0, 0, 0.5) स्क्रिम, छवि चाहे जो हो, सही रहती है, जबकि एक पका हुआ धूसर नहीं रहता। चूँकि यह टूल अपना इतिहास और पैलेट आपके ब्राउज़र के लोकल स्टोरेज में रखता है, आप टैब बंद करके बाद में उसी काम-सेट पर लौट सकते हैं, फिर किसी भी स्वैच को सीधे अपनी स्टाइलशीट में कॉपी कर सकते हैं। लक्ष्य है रंग के लिए एक ही सत्य-स्रोत जो आपके डिज़ाइन टोकन में रहे, न कि फ़ाइलों में बिखरी हुई नकल की गई hex स्ट्रिंग्स।

रंग चुनने की आम ग़लतियाँ

मुट्ठी भर ग़लतियाँ बार-बार सामने आती हैं। पहली है hex को ही पूरी कहानी मान लेना: एक hex कोड नज़र भर में किसी रंग की लाइटनेस या ह्यू के बारे में कुछ नहीं बताता, इसलिए सीधे hex में संपादन करने से रंग का भटक जाना आसान है। जब आप किसी रंग के बारे में तर्क करना चाहें तो HSL या HSV पर स्विच करें, और hex को भंडारण के लिए रखें। दूसरी है अल्फा को अनदेखा करना — यह भूल जाना कि #000000 और 50%-अपारदर्शिता वाला काला पूरी तरह अलग व्यवहार करते हैं, या किसी अर्ध-पारदर्शी रूप को एक अपारदर्शी रंग के रूप में हार्ड-कोड कर देना जो फिर किसी दूसरी पृष्ठभूमि पर विफल हो जाता है।

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