संक्षेप में: HEX, RGB और HSL सभी एक ही रंगों को बताते हैं, बस अलग-अलग तरीकों से। HEX और RGB एक ही लाल-हरे-नीले मानों के दो नोटेशन हैं; HSL उन्हें रंग-आभा, संतृप्ति और प्रकाशता के रूप में फिर से व्यक्त करता है, जिन्हें हाथ से समायोजित करना कहीं आसान है। कौन-सा फ़ॉर्मैट उपयोग करें यह जानना रंग मिलाते या ठीक करते समय बहुत अनुमान बचाता है।
वेब पर एक रंग अंततः तीन चैनल हैं — लाल, हरा, नीला — पर आप उन चैनलों को कैसे लिखते हैं, यह तय करता है कि उन पर तर्क करना कितना आसान है।
HEX और RGB: एक ही चीज़, दो बार लिखी
RGB तीनों चैनल सीधे सूचीबद्ध करता है: rgb(37, 99, 235)। HEX समान मानों को एक हेक्साडेसिमल स्ट्रिंग में पैक करता है: #2563EB, जहाँ 25, 63 और EB लाल, हरे और नीले बाइट हैं। दोनों विनिमेय हैं — HEX सघन है और डिज़ाइन टूल में आम, RGB कोड में सुविधाजनक क्योंकि आप हर चैनल गणना कर सकते हैं। कोई अधिक «सटीक» नहीं; ये एक ही रंग को लिखने के दो तरीके हैं।
HSL: समायोजन के लिए बना फ़ॉर्मैट
HSL रंग को रंग-आभा (कलर व्हील पर स्थिति, 0–360°), संतृप्ति (कितना चटख, 0–100%) और प्रकाशता (कितना उजला, 0–100%) के रूप में बताता है। यही वह फ़ॉर्मैट है जब आप रंग बदलने के बजाय समायोजित करना चाहें: hover अवस्था के लिए प्रकाशता घटाएँ, फीकी विविधता के लिए संतृप्ति कम करें, या पूरक रंग खोजने के लिए रंग-आभा खिसकाएँ। HEX में वही संपादन करना बाइट-मान अनुमानना है।
alpha और 8-अंकीय HEX
पारदर्शिता एक alpha चैनल से व्यक्त होती है: rgba() और hsla() एक चौथा मान जोड़ते हैं, 0 (पारदर्शी) से 1 (अपारदर्शी)। आधुनिक CSS 8-अंकीय HEX भी समर्थित करता है, जहाँ अंतिम दो अक्षर alpha कोड करते हैं — #2563EB80 वही नीला लगभग 50% अपारदर्शिता पर है।
CMYK एक अलग दुनिया है
HEX, RGB और HSL सभी स्क्रीन रंग-मॉडल (योगात्मक प्रकाश) हैं। CMYK छपाई के लिए है (घटात्मक स्याही)। इनके बीच रूपांतरण हमेशा अनुमानित होता है क्योंकि दोनों बिलकुल एक ही रंग-परास पुनरुत्पादित नहीं कर सकते, इसलिए स्क्रीन-से-छपाई रूपांतरण को जाँचने-योग्य शुरुआती बिंदु मानें, सटीक मेल नहीं।
एक व्यावहारिक वर्कफ़्लो
- शुरुआती रंग — किसी भी फ़ॉर्मैट में — रंग कन्वर्टर में पेस्ट करें ताकि सभी फ़ॉर्मैट एक साथ दिखें।
- विविधताएँ बनाने के लिए HSL पर जाएँ: अवस्थाओं के लिए प्रकाशता, फीके टोन के लिए संतृप्ति समायोजित करें।
- जहाँ पारदर्शिता चाहिए वहाँ
rgba()/hsla()या 8-अंकीय HEX से alpha जोड़ें। - दो या अधिक रंगों के लिए तैयार CSS स्निपेट बनाने हेतु ग्रेडिएंट पूर्वावलोकन उपयोग करें।
यदि किसी पैलेट पर थोक काम कर रहे हैं, कई रंग एक साथ बदलें (अल्पविराम या नई पंक्ति से अलग) और परिणाम अपने नोट्स के पास कैरेक्टर काउंटर के साथ रखें।
बचने योग्य आम ग़लतियाँ
- जहाँ HSL समायोजन स्पष्ट कर देता, वहाँ HEX में रंग बदलना।
- यह उम्मीद करना कि CMYK रूपांतरण स्क्रीन से बिलकुल मेल खाएगा।
- alpha चैनल भूल जाना और जहाँ पारदर्शिता चाहिए वहाँ अपारदर्शी रंग पाना।
- स्टाइलशीट में फ़ॉर्मैट असंगत रूप से मिलाना।