तीन लिखावटें, रंग एक ही
HEX, RGB और HSL एक ही रंग को तीन तरह से लिखने के ढंग हैं। स्क्रीन पर नतीजा एक जैसा ही आता है, इसलिए जहाँ जो सुविधाजनक लगे वही चुनें।
HEX #RRGGBB के रूप में आता है — डिज़ाइन टूल यही निर्यात करते हैं और डेवलपर यही चिपकाते हैं। छोटा है और कॉपी करने में आसान।
RGB लाल, हरे और नीले को 0 से 255 तक लिखता है। जब कोड से रंग की गणना करनी हो या सीधे कैनवस पर बनाना हो, तब यही रूप चाहिए।
HSL रंगत (0 से 360 डिग्री), संतृप्ति और चमक बताता है। रंग बदलते समय इंसान जैसे सोचता है, यह उसके सबसे क़रीब है।
HSL कहाँ काम आता है
मान लीजिए किसी बटन के लिए हॉवर रंग चाहिए। HEX में यह पता ही नहीं चलता कि #3E6FF4 को कितना गहरा करें, तो अंक बदल-बदलकर मिलाना पड़ता है। HSL में चमक 10 घटा दीजिए — रंगत और संतृप्ति वहीं रहती हैं, इसलिए दोनों रंग साफ़ तौर पर एक ही परिवार के लगते हैं।
इसी तरकीब से पूरा पैलेट भी बनता है। रंगत टिकाकर चमक को चरणों में बाँटिए तो एक ही रंग की हल्की-गहरी सीढ़ी मिलती है; रंगत को 120 डिग्री घुमाइए तो संतुलित विपरीत रंग मिलते हैं।
अगर रंग CSS वैरिएबल में रखते हैं, तो HSL के तीनों मान अलग-अलग रख सकते हैं। बाद में सिर्फ़ रंगत वाला एक अंक बदलकर पूरी थीम का रंग खिसकाया जा सकता है।
अल्फ़ा की लिखावट
#RRGGBBAA जैसे आठ अंकों वाले HEX में आखिरी दो अंक अपारदर्शिता बताते हैं: 80 लगभग 50% है और FF पूरी तरह अपारदर्शी। आजकल के सभी ब्राउज़र यह रूप समझते हैं।
पारदर्शिता चाहिए तो rgba() या आठ अंकों वाला HEX लें, पर याद रखें कि अर्धपारदर्शी रंग को ऊपर चढ़ाना और सीधे कोई हल्का रंग चुन लेना, दो अलग नतीजे हैं। पृष्ठभूमि बदलते ही अर्धपारदर्शी रंग भी बदल जाता है।
यह टूल क्या-क्या पढ़ता है
यह तीन, चार, छह और आठ अंकों वाला HEX, rgb() और rgba(), तथा hsl() और hsla() लेता है — कॉमा वाली पुरानी लिखावट भी और स्पेस वाली नई लिखावट भी।
red या rebeccapurple जैसे नाम वाले रंग, और oklch() जैसे नए रंग स्थान अभी नहीं पढ़े जाते। नाम वाला रंग हो तो ब्राउज़र के डेवलपर टूल में उसका HEX मान देखकर वही चिपकाएँ।