HSL से HEX कन्वर्टर

HSL-से-HEX कन्वर्ज़न एक ऐसी प्रक्रिया है जो HSL कलर मॉडल में चुने या बनाए गए रंग को एक कॉम्पैक्ट और आसानी से शेयर किए जा सकने वाले फ़ॉर्मेट में बदलती है। इस फ़ॉर्मेट का इस्तेमाल उन सभी जगहों पर किया जा सकता है जहाँ HEX स्वीकार किया जाता है — जैसे CSS स्टाइलशीट, डिज़ाइन टूल के कलर पिकर, ब्रांड गाइड और कॉन्फ़िगरेशन फ़ाइलें। यह कन्वर्ज़न एक आम डिज़ाइन वर्कफ़्लो को दिखाता है: रंगों को HSL में चुना और बदला जाता है क्योंकि इसके पैरामीटर आसानी से समझ में आते हैं (पहचान के लिए ह्यू, जीवंतता के लिए सैचुरेशन, और चमक के लिए लाइटनेस), और फिर उन्हें HEX के तौर पर आउटपुट किया जाता है क्योंकि ज़्यादातर टूल और कोडबेस इसी फ़ॉर्मेट की उम्मीद करते हैं। यह कन्वर्टर डिज़ाइन फ़ेज़ और इम्प्लीमेंटेशन फ़ेज़ के बीच एक पुल का काम करता है।

कनवर्ज़न एल्गोरिदम, स्टैंडर्ड CSS कलर मॉड्यूल 3 फ़ॉर्मूले का इस्तेमाल करके HSL ट्रिपलेट से इंटरमीडिएट RGB वैल्यू कैलकुलेट करता है। ह्यू (hue) को सबसे पहले मॉड्यूलर अरिथमेटिक का इस्तेमाल करके 0–360 की रेंज में नॉर्मलाइज़ किया जाता है ताकि 380 या -20 जैसी वैल्यू को सही ढंग से हैंडल किया जा सके। सैचुरेशन और लाइटनेस को 100 से डिवाइड करके 0–1 की रेंज में नॉर्मलाइज़ किया जाता है। क्रोमा C को (1 - |2L - 1|) × S के तौर पर कैलकुलेट किया जाता है, एक सेकेंडरी कंपोनेंट X को ह्यू की 60-डिग्री सेक्टर में पोज़िशन से कैलकुलेट किया जाता है, और लाइटनेस ऑफ़सेट m को L - C/2 के तौर पर कैलकुलेट किया जाता है। ह्यू सेक्टर (0–60, 60–120, और इसी तरह 300–360 तक) यह तय करता है कि छह फ़ॉर्मूलों में से कौन-सा फ़ॉर्मूला तीन R1, G1, B1 प्री-ऑफ़सेट वैल्यू को C, X, और 0 असाइन करेगा। आखिर में, हर चैनल को m जोड़कर और 255 से गुणा करके स्केल किया जाता है, फिर निकटतम पूर्णांक (integer) तक राउंड किया जाता है और दो-डिजिट वाली हेक्स स्ट्रिंग के तौर पर फ़ॉर्मेट किया जाता है।

HSL कैलकुलेशन का इस्तेमाल करके व्यवस्थित कलर पैलेट बनाने वाले डिज़ाइन सिस्टम को आखिरी स्टेप के तौर पर इस कन्वर्ज़न की ज़रूरत होती है। एक टोकन जनरेटर 220 का बेस ह्यू (hue) तय कर सकता है और फिर 10-स्टेप वाला कलर स्केल बनाने के लिए 95% (लगभग सफ़ेद) से लेकर 10% (लगभग काला) तक लाइटनेस वैल्यू की रेंज कैलकुलेट कर सकता है। हर स्टेप को अंदरूनी तौर पर HSL ट्रिपलेट के तौर पर दिखाया जाता है, लेकिन ज़्यादा से ज़्यादा कम्पैटिबिलिटी के लिए JSON या CSS वैरिएबल फ़ाइल में स्टोर किया जाने वाला असल डिज़ाइन टोकन HEX फ़ॉर्मैट में होना चाहिए। हर जनरेट किए गए HSL को इस कन्वर्टर से गुज़ारने पर डिज़ाइन टोकन सिस्टम के लिए ज़रूरी फ़ॉर्मैट में पैलेट मिल जाता है, और इसके लिए मैन्युअल रूप से कलर चुनने की ज़रूरत नहीं पड़ती।

HSL में तय की गई CSS कस्टम प्रॉपर्टीज़ (CSS वेरिएबल्स) calc() का इस्तेमाल करके रनटाइम पर लाइटनेस या सैचुरेशन में बदलाव करने की सुविधा देती हैं, जिससे ये कई कलर मोड वाले थीमिंग सिस्टम में लोकप्रिय हो गई हैं। हालाँकि, कुछ टारगेट एनवायरनमेंट — जैसे ईमेल क्लाइंट, पुराने एम्बेडेड ब्राउज़र, SVG रेंडरर और कुछ CSS प्रीप्रोसेसर पाइपलाइन — hsl() CSS फ़ंक्शन को सपोर्ट नहीं करते हैं। ऐसे मामलों में, डिज़ाइन को रेंडर होने के समय hsl() पर निर्भर रहने के बजाय हर थीम वैरिएंट के लिए कैलकुलेट की गई HEX वैल्यू को एक्सपोर्ट करने की ज़रूरत होती है। यह कन्वर्टर डेवलपर को थीम में इस्तेमाल होने वाले हर HSL कॉम्बिनेशन (जैसे, 40%, 50% और 60% लाइटनेस पर प्राइमरी कलर) के लिए HEX आउटपुट कैलकुलेट करने और उन्हें स्टाइलशीट में फ़ॉलबैक HEX वैल्यू के तौर पर हार्ड-कोड करने की सुविधा देता है।

कलर एक्सेसिबिलिटी वर्कफ़्लो में भी HSL-से-HEX कन्वर्ज़न का इस्तेमाल होता है। WCAG कॉन्ट्रास्ट रेश्यो कैलकुलेट करने वाले टूल आमतौर पर HEX या RGB इनपुट से मिले sRGB लीनियर वैल्यू पर काम करते हैं, न कि रॉ HSL पर। जब HSL में एक्सेसिबल कलर पैलेट डिज़ाइन किया जाता है — जिसमें ज़रूरी 4.5:1 कॉन्ट्रास्ट रेश्यो पाने के लिए लाइटनेस को व्यवस्थित रूप से एडजस्ट किया जाता है — तो एक्सेसिबिलिटी चेक पास करने वाले HSL वैल्यू को कॉम्पोनेंट लाइब्रेरी या डिज़ाइन टोकन सिस्टम में इंटीग्रेट करने के लिए HEX के तौर पर एक्सपोर्ट करना ज़रूरी होता है। एक्सेसिबिलिटी रिव्यू प्रोसेस के आखिर में फ़ाइनल मंज़ूर किए गए HSL वैल्यू को HEX में बदलने से यह पक्का होता है कि पैलेट उस फ़ॉर्मैट में डॉक्यूमेंटेड हो जिसकी डेवलपर्स और डिज़ाइन टूल को ज़रूरत है, साथ ही इसे बनाने में इस्तेमाल किए गए व्यवस्थित HSL लॉजिक को भी बनाए रखा जा सके।