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

HSL का मतलब है ह्यू (hue), सैचुरेशन (saturation) और लाइटनेस (lightness) — ये तीन ऐसी खूबियां हैं जो RGB के रेड, ग्रीन और ब्लू चैनलों की तुलना में, इंसानों द्वारा रंगों को देखने और बताने के तरीके से ज़्यादा मेल खाती हैं। ह्यू, कलर व्हील पर 0 से 360 डिग्री का एक एंगल है, जिसमें 0 (और 360) रेड है, 120 ग्रीन है और 240 ब्लू है। सैचुरेशन एक प्रतिशत है जो बताता है कि रंग कितना गहरा या चटख है; यह 0% (ग्रे) से 100% (पूरी तरह सैचुरेटेड) तक होता है। लाइटनेस चमक को दिखाने वाला एक प्रतिशत है, जो 0% (काला) से 50% (शुद्ध रंग) और फिर 100% (सफेद) तक होता है। यह थ्री-डायमेंशनल स्ट्रक्चर HSL को कलर डिज़ाइन के लिए आसान और समझने लायक बनाता है: लाइटनेस को बदलने से रंग की पहचान बदले बिना वह गहरा या हल्का हो जाता है, और सैचुरेशन को बदलने से ह्यू बदले बिना रंग हल्का (muted) या ज़्यादा चटख (vivid) हो जाता है।

HEX को HSL में बदलना दो चरणों वाली प्रक्रिया है। सबसे पहले, HEX स्ट्रिंग को 0–1 की रेंज में नॉर्मलाइज़्ड RGB वैल्यू में बदला जाता है। इन नॉर्मलाइज़्ड वैल्यूज़ से, मिनिमम और मैक्सिमम चैनल वैल्यूज़ का पता लगाया जाता है। लाइटनेस L, मिनिमम और मैक्सिमम का औसत होती है। सैचुरेशन S को मिनिमम और मैक्सिमम के बीच की रेंज को एक ऐसे डिनॉमिनेटर से भाग देकर निकाला जाता है जो लाइटनेस को ध्यान में रखता है: (max - min) / (1 - |2L - 1|)। ह्यू H इस बात से तय होता है कि कौन सा चैनल डॉमिनेंट (मैक्सिमम) है और दूसरे चैनल उससे कितनी दूर हैं, जिससे 0–360 की रेंज में एक एंगल बनता है। ग्रेस्केल रंगों के लिए, जहाँ तीनों चैनल बराबर होते हैं, क्रोमा ज़ीरो होता है, सैचुरेशन 0% होता है, और ह्यू को आमतौर पर 0 पर सेट किया जाता है।

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

HSL से डार्क और लाइट थीम सिस्टम को खास तौर पर फ़ायदा होता है। लाइट मोड में hsl(220, 80%, 55%) के तौर पर तय किए गए बटन बैकग्राउंड को, ह्यू (hue) और लगभग एक जैसे सैचुरेशन (saturation) को बनाए रखते हुए, सिर्फ़ लाइटनेस वैल्यू (lightness value) में बदलाव करके डार्क मोड में hsl(220, 70%, 35%) में बदला जा सकता है। HSL के बिना, RGB या HEX में यही नतीजा पाने के लिए तीनों चैनलों की अलग-अलग गणना करनी पड़ती है, जो न तो आसानी से समझ में आने वाला तरीका है और न ही गणित के हिसाब से सीधा-सादा। यह कन्वर्टर डेवलपर्स को उनके मौजूदा HEX-डिफ़ाइंड रंगों की HSL वैल्यू देता है, जिससे वे बिना किसी विज़ुअल रीडिज़ाइन के उन रंगों को HSL-आधारित थीमिंग सिस्टम में पोर्ट कर सकते हैं।

HSL से एक्सेसिबिलिटी टूल और कॉन्ट्रास्ट चेकिंग में भी मदद मिलती है। हालांकि HSL में 'लाइटनेस' (lightness) और 'परसेप्चुअल ल्यूमिनेंस' (perceptual luminance - जो गामा-एडजस्टेड लीनियर RGB पर आधारित WCAG 2.x परिभाषा का पालन करता है) एक जैसे नहीं होते, फिर भी इनके बीच इतना संबंध होता है कि डिज़ाइन के बारे में उपयोगी समझ मिल सके। बहुत कम या बहुत ज़्यादा HSL लाइटनेस वाले रंगों का, क्रमशः प्योर व्हाइट या ब्लैक के मुकाबले कॉन्ट्रास्ट आम तौर पर कम होता है, और HSL के नंबर्स से यह बात तुरंत पता चल जाती है। WCAG-कम्प्लायंट कलर सिस्टम पर काम करने वाले डिज़ाइनर अक्सर पैलेट बनाने के लिए HSL का इस्तेमाल करते हैं और फिर कन्वर्ज़न के बाद ल्यूमिनेंस-अवेयर कॉन्ट्रास्ट चेकर का इस्तेमाल करके फ़ाइनल कॉन्ट्रास्ट रेश्यो को वेरिफ़ाई करते हैं।