लेख
वेब के लिए रंग उपकरण: hex, पैलेट और सुगम्यता
किसी वेबसाइट के लिए रंग चुनना तब तक आसान लगता है जब तक आपका सामना hex कोड, RGB त्रिक और HSL कोणों से नहीं होता, जो एक ही चीज़ को अलग-अलग तरीकों से बताते हैं। यह लेख समझाता है कि ये प्रारूप आपस में कैसे जुड़े हैं, एक अकेले ब्रांड रंग को उपयोगी पैलेट में कैसे बदलें, और कैसे सुनिश्चित करें कि नतीजा उन लोगों के लिए भी पढ़ने योग्य रहे जो रंग को अलग तरह से देखते हैं।
hex, RGB और HSL एक ही रंग को बताते हैं
स्क्रीन पर रंग लाल, हरी और नीली रोशनी से मिलाकर बनता है। hex संकेतन इन तीन चैनलों को छह-अक्षर वाले कोड के रूप में लिखता है, जैसे #2563eb, जहाँ अक्षरों का हर जोड़ा 00 से ff तक का एक चैनल होता है। RGB उन्हीं तीन संख्याओं को दशमलव में लिखता है, 0 से 255 तक, जो पढ़ने में आसान है पर कुछ नया नहीं कहता। HSL एक अलग दिशा से आता है: यह रंग को उसके रंगत (रंग चक्र पर 0 से 360 डिग्री तक की स्थिति), संतृप्ति (वह कितना चटक है) और हल्केपन (वह सफ़ेद या काले के कितना पास है) से बताता है। HSL वही प्रारूप है जिसकी ओर डिज़ाइनर तब बढ़ते हैं जब वे किसी रंग को थोड़ा खिसकाना चाहते हैं, क्योंकि हल्कापन बढ़ाना या रंगत खिसकाना तीन जुड़ी संख्याओं के बजाय एक ही सहज बदलाव है। एक कनवर्टर आपको तीनों के बीच जाने देता है, ताकि आप एक प्रारूप में मान पढ़ें और दूसरे में इस्तेमाल करें।
एक रंग को पैलेट में बदलना
एक अकेला ब्रांड रंग शायद ही कभी काफ़ी होता है। एक काम करने वाली पैलेट को आमतौर पर एक प्राथमिक रंग, एक या दो उच्चारण रंग, और पाठ व पृष्ठभूमि के लिए तटस्थ धूसर रंगों का एक समूह चाहिए। रंगों के बीच के संबंध रंग चक्र पर सरल नियमों का पालन करते हैं: पूरक रंग एक-दूसरे के आमने-सामने बैठते हैं, सादृश्य रंग शांत अनुभव के लिए पास-पास बैठते हैं, और एक त्रिक समूह बिना टकराव के विरोधाभास के लिए तीन रंगों को समान रूप से फैलाता है। एक रंग योजना उपकरण इन नियमों को आपके शुरुआती रंग पर लागू करता है और आपको मेल खाते hex कोड देता है, ताकि आपको कोण हाथ से न गिनने पड़ें। यदि आपके पास पहले से कोई छवि है जिसका भाव आपको पसंद है, तो एक पैलेट निष्कर्षक उसमें से प्रमुख रंग पढ़ लेता है, जो किसी तस्वीर या लोगो पर साइट को आधारित करने का तेज़ तरीका है।
विरोधाभास और रंग-अंधता
जो पैलेट आपकी स्क्रीन पर अच्छी दिखती है वह फिर भी पाठकों को निराश कर सकती है। लगभग हर बारह में से एक पुरुष और हर दो सौ में से एक महिला में किसी न किसी रूप की रंग-दृष्टि कमी होती है, सबसे आम है लाल को हरे से अलग करने में कठिनाई। यदि किसी त्रुटि के लिए आपका एकमात्र संकेत हरे बटन पर लाल पाठ है, तो वे पाठक उसे चूक जाएँगे। हल रंग से बचना नहीं है बल्कि कभी अकेले रंग पर निर्भर न रहना है: उसे किसी आइकन, लेबल या आकृति के साथ जोड़ें, और पाठ तथा उसकी पृष्ठभूमि के बीच पर्याप्त हल्केपन का विरोधाभास बनाए रखें। एक रंग-अंधता सिम्युलेटर दिखाता है कि रंग-दृष्टि के आम प्रकारों के तहत आपकी पैलेट कैसी दिखती है, ताकि आप किसी शिकायत के बाद के बजाय रिलीज़ से पहले ही समस्या पकड़ लें।
यह सब ब्राउज़र में करना
इनमें से किसी भी चरण को सर्वर की ज़रूरत नहीं है। किसी hex कोड को बदलना, कोई योजना बनाना, किसी छवि से रंग पढ़ना और रंग-अंधता का अनुकरण करना सभी छोटी गणनाएँ हैं जिन्हें ब्राउज़र तुरंत संभाल लेता है। यह तब मायने रखता है जब जिस छवि का आप नमूना ले रहे हैं वह कोई अप्रकाशित डिज़ाइन या क्लाइंट का लोगो हो: यहाँ के उपकरणों के साथ फ़ाइल आपके डिवाइस पर ही रहती है और कुछ भी अपलोड नहीं होता। आपको वही नतीजा मिलता है जो किसी ऑनलाइन सेवा से मिलता, बिना कलाकृति सौंपे। रंग कनवर्टर, रंग योजना जनरेटर, पैलेट निष्कर्षक और रंग-अंधता सिम्युलेटर सभी स्थानीय रूप से चलते हैं और पृष्ठ लोड हो जाने के बाद ऑफ़लाइन भी उसी तरह काम करते हैं।
OKLCH और विस्तृत कलर स्पेस
Hex, RGB और HSL सभी रंगों को sRGB गैमट के अंदर दर्शाते हैं, जिसे स्क्रीन वर्षों से उपयोग करती आई हैं। नए डिस्प्ले अधिक रंग दिखा सकते हैं, और CSS अब color() फंक्शन और Display P3 स्पेस से उन तक पहुंच सकता है, जो ऐसे गहरे हरे और लाल रंग जोड़ता है जिन्हें sRGB दर्शा नहीं सकता। सबसे बड़ा बदलाव OKLCH है, जो रंग को lightness, chroma और hue के रूप में लिखने का एक तरीका है जो यह बताता है कि आंख वास्तव में चमक को कैसे अनुभव करती है। HSL में एक ही 50% lightness पर पीला और नीला रंग बिल्कुल अलग दिखते हैं: पीला चमकीला लगता है, नीला गहरा। OKLCH में lightness को स्थिर रखकर केवल hue बदलने से अनुभव की गई चमक एक जैसी बनी रहती है। इससे एक ऐसा पैलेट बनाना व्यावहारिक हो जाता है जहां हर शेड एक ही कंट्रास्ट लक्ष्य पर पहुंचे, बस एक संख्या को लॉक करके, न कि हर रंग को अलग से हाथ से ट्यून करके।
इस लेख में उल्लेखित टूल्स
- कलर कन्वर्टररंगों को HEX, RGB, HSL, HSV और CMYK के बीच बदलें। WCAG कंट्रास्ट चेकर शामिल। कोई अपलोड नहीं।
- कलर स्कीम जनरेटरबेस रंग से पूरक, समानुरूप, त्रिभुजीय, चतुर्भुजीय और मोनोक्रोमेटिक पैलेट बनाएं। कोई अपलोड नहीं।
- रंग पैलेट एक्सट्रैक्टरछवि से HEX स्वॉच के रूप में प्रमुख रंग निकालें। कोई भी रंग कॉपी करें। कोई अपलोड नहीं।
- रंग अंधापन सिमुलेटरछवि पर प्रोटानोपिया, ड्यूटेरेनोपिया, ट्रिटानोपिया और एक्रोमेटोप्सिया का अनुकरण करें। कोई अपलोड नहीं।
अक्सर पूछे जाने वाले सवाल
hex और RGB में क्या अंतर है?
ये एक ही रंग को लिखने के दो तरीके हैं। hex लाल, हरे और नीले चैनलों को आधार 16 में छह-अक्षर वाले कोड में बाँध देता है, जबकि RGB उन्हीं तीन चैनलों को 0 से 255 तक की दशमलव संख्याओं के रूप में सूचीबद्ध करता है। #ff0000 और rgb(255, 0, 0) वही समान लाल हैं। hex संक्षिप्त है और CSS तथा डिज़ाइन फ़ाइलों में आम है, RGB एक नज़र में पढ़ने में आसान है, और इनके बीच बदलने से रंग में स्वयं कुछ नहीं बदलता।
मैं कैसे जानूँ कि मेरे रंग रंग-अंध उपयोगकर्ताओं के लिए पढ़ने योग्य हैं?
अपनी पैलेट को किसी रंग-अंधता सिम्युलेटर से गुज़ारें, जो आपके रंगों को उस तरह फिर से बनाता है जैसे रंग-दृष्टि के हर आम प्रकार वाला व्यक्ति उन्हें देखेगा। ऐसे जोड़ों पर ध्यान दें जो एक ही छाया में मिल जाते हैं, खासकर लाल और हरे। सबसे सुरक्षित आदत है रंग को कभी एकमात्र संकेत के रूप में इस्तेमाल न करना: उसे पाठ, आइकन या पैटर्न से सहारा दें, और अग्रभूमि व पृष्ठभूमि के बीच हल्केपन का स्पष्ट अंतर रखें ताकि अर्थ तब भी बचा रहे जब रंगत न बचे।