CSS में HSL और HSLa कलर्स का उपयोग कैसे करें

CSS में HSL और HSLa कलर्स का उपयोग करना सीखें और वे RGB/RGBa और हेक्स से क्या अलग हैं।

HSL और HSLa CSS में कलर मेथड्स हैं जिनका उपयोग आप हेक्स या RGB/RGBa के विकल्प के रूप में अपनी वेबसाइट पर अधिक वास्तविक-विश्व कलर्स लागू करने के लिए कर सकते हैं।

HSL और HSLa CSS दुनिया में कुछ नए हैं, लेकिन सामान्य कलर दुनिया में, वे 1970 के दशक से मौजूद हैं।

HSL बनाम HSLa:

• HSL का अर्थ है ह्यू सैचुरेशन लाइटनेस
• HSLa का अर्थ है ह्यू सैचुरेशन लाइटनेस अल्फा

HSLa, HSL का एक विस्तार है, जिसमें एक अल्फा चैनल है जिसका उपयोग आप पारदर्शिता मान (या अपारदर्शिता) निर्दिष्ट करने के लिए कर सकते हैं। HSL और HSLa उसी तरह भिन्न हैं जैसे RGB और RGBa एक दूसरे से भिन्न हैं।

HSL/HSLa उपयोग

HSL और HSLa का उपयोग करने के लिए, CSS दो कलर फंक्शन्स hsl() और hsla() प्रदान करता है।

बेसिक HSL उपयोग:

div { background-color:hsl(0, 100%, 50%); /* लाल */ }

बेसिक HSLa उपयोग:

div { background-color:hsla(0, 100%, 50%, 0.6); }

क्या HSL हेक्स और RGB से बेहतर है?

आप शायद सोच रहे होंगे कि क्या HSL RGB और हेक्स से बेहतर है। CSS भाषा में HSL को जोड़े जाने का कोई कारण तो होगा, है ना?

यह कहना मुश्किल है कि HSL बेहतर है हेक्स और RGB से (हालांकि कुछ यह दावा करेंगे)। यह इस पर निर्भर करता है कि आप क्या करना चाहते हैं।

HSL के पीछे विचार एक सहज कलर फॉर्मेट प्रदान करना है जो वास्तविक दुनिया की नकल करता है। HSL आपको किसी कलर पर लाइट और डार्कनेस को एडजस्ट करने की अनुमति देता है ताकि कलर का प्रतिनिधित्व बदले बिना कलर को ही बदला जाए।

हेक्स और RGB ऐसा नहीं कर सकते।

उदाहरण के लिए, यदि आप अभी अपने कमरे में रंगों को देखते हैं, तो उन सटीक रंगों को देखने का तरीका उन चीजों से आने वाली लाइट का परिणाम है जैसे:

• खिड़कियाँ
• लैम्प्स
• मोमबत्तियाँ
• लाइट सोर्सेज का संयोजन

मान लें अभी आपके पास केवल प्राकृतिक रोशनी खिड़कियों से आ रही है।

अब आगे बढ़ें और अपने पर्दे नीचे खींचें। यह आपके कमरे से लाइटनेस को हटा देगा और आपके कमरे में हर रंग की धारणा को बदल देगा।

आपके कमरे में हर वस्तु के रंग अब पर्दे नीचे खींचने से पहले की तुलना में उन रंगों के गहरे संस्करणों की तरह दिखते हैं।

हालांकि, और यह मुख्य बिंदु है:

लाइटनेस हटाने से चीजों का वास्तविक रंग नहीं बदलता, यह केवल लाइटर से डार्कर संस्करण में उन रंगों की धारणा को बदलता है।

अब यदि आप अपने कमरे की तस्वीर पहले और बाद में पर्दे नीचे खींचने के बाद लेते हैं, और फिर उन पहले/बाद के कलर वैल्यूज को RGB फॉर्मेट में लेते हैं, तो उन पहले/बाद के रंग क्रमशः दो अलग-अलग रंग होंगे। हेक्स कलर्स के लिए भी यही बात लागू होती है।

हालांकि, HSL आपको दो अलग-अलग रंग नहीं देगा, बल्कि वही कलर अलग-अलग लाइटनेस वैल्यूज के साथ (HSL में L) देगा।

तो मान लें आपके कमरे में एक ब्राउन अखरोट रंग की टेबल है। अब आप एक तस्वीर पर्दे ऊपर के साथ लेते हैं, और एक पर्दे नीचे के साथ।

उन पहले/बाद की तस्वीरों के हेक्स और RGB वैल्यूज क्रमशः दो अलग-अलग कलर वैल्यूज होंगे।

उन पहले/बाद की तस्वीरों के HSL वैल्यूज वही कलर होंगे, लेकिन अलग-अलग लाइटनेस वैल्यूज के साथ।

कुछ तर्क देंगे कि:

• हेक्स और RGB अधिक मशीन-पठनीय हैं
• HSL अधिक मानव-पठनीय है

हालांकि उपरोक्त शायद उन अधिकांश के लिए सच है जो पहले से ही सभी तीन कलर मेथड्स को समझते हैं और उनके साथ अनुभव रखते हैं, आपका अनुभव अलग हो सकता है।

मैं हमेशा कहता हूँ कि लोग वही सबसे अच्छा करते हैं जो वे सबसे ज्यादा करते हैं। इसलिए यदि आपके पास हेक्स या RGB का उपयोग करने का वर्षों का अनुभव है और HSL के साथ शून्य अनुभव है, तो आप शायद शुरू में HSL को पढ़ना कठिन पाएंगे।

संक्षेप में कि HSL को क्या अलग बनाता है:

• HSL आपको कलर्स को खुद बदले बिना रंगों की लाइटनेस और डार्कनेस को बदलने की अनुमति देता है।
• RGB और हेक्स कलर्स की लाइटनेस और डार्कनेस को बदले बिना कलर्स को भी नहीं बदल सकते।