CSS में HSL और HSLa रंगों का उपयोग करना सीखें और उन्हें RGB/RGBa और Hex से क्या अलग बनाता है।
CSS में HSL और HSLa रंग विधियाँ हैं जिनका उपयोग आप अधिक वास्तविक दुनिया लागू करने के लिए Hex या RGB/RGBa के विकल्प के रूप में कर सकते हैं आपकी वेबसाइट पर रंग।
एचएसएल और एचएसएलए सीएसएस की दुनिया में कुछ नए हैं, लेकिन सामान्य रंग की दुनिया में, वे 1970 के दशक से मौजूद हैं।
एचएसएल बनाम एचएसएलए:
- HSL का मतलब ह्यू सैचुरेशन लाइटनेस है
- HSLa का मतलब ह्यू सैचुरेशन लाइटनेस अल्फा है
HSLa एक अल्फा चैनल के साथ HSL का एक विस्तार है, जिसका उपयोग आप पारदर्शिता मान (या अस्पष्टता) निर्दिष्ट करने के लिए कर सकते हैं। एचएसएल और एचएसएलए उसी तरह अलग हैं जैसे आरजीबी और आरजीबीए एक दूसरे से अलग हैं।
HSL/HSLa उपयोग
HSL और HSLa का उपयोग करने के लिए, CSS दो रंग फ़ंक्शन प्रदान करता है hsl() और hsla() ।
बुनियादी एचएसएल उपयोग:
div {
background-color:hsl(0, 100%, 50%); /* Red */
}बुनियादी HSLa उपयोग:
div {
background-color:hsla(0, 100%, 50%, 0.6);
}क्या HSL, Hex और RGB से बेहतर है?
आप शायद सोच रहे हैं कि क्या एचएसएल आरजीबी और हेक्स से बेहतर है। एचएसएल को सीएसएस भाषा में जोड़ने का कोई कारण होना चाहिए, है ना?
यह कहना मुश्किल है कि एचएसएल बेहतर है हेक्स और आरजीबी की तुलना में (हालांकि कुछ उस बिंदु को बनाएंगे)। यह इस बात पर निर्भर करता है कि आप क्या करना चाहते हैं।
एचएसएल के पीछे का विचार एक सहज रंग प्रारूप प्रदान करना है जो वास्तविक दुनिया की नकल करता है। एचएसएल आपको प्रतिनिधित्व . को बदलने के लिए रंग पर प्रकाश और अंधेरे को समायोजित करने की अनुमति देता है खुद रंग बदले बिना रंग का।
हेक्स और आरजीबी ऐसा नहीं कर सकते।
उदाहरण के लिए, यदि आप अभी अपने कमरे में रंगों को देखते हैं, तो जिस तरह से आप उन सटीक रंगों को समझते हैं, वह निम्न चीजों से आने वाले प्रकाश का परिणाम है:
- विंडोज़
- लैंप
- मोमबत्ती
- प्रकाश स्रोतों का संयोजन
मान लीजिए कि अभी आपकी खिड़कियों से केवल प्राकृतिक प्रकाश ही आ रहा है।
अब आगे बढ़ो और अपने पर्दे नीचे खींचो। यह आपके कमरे से हल्कापन दूर करेगा और आपके कमरे में हर रंग की धारणा को बदल देगा।
आपके कमरे में हर वस्तु के रंग अब उन रंगों के गहरे संस्करणों की तरह दिखते हैं जो आपने पर्दे को नीचे खींचने से पहले की तुलना में।
हालाँकि, और यह मुख्य बिंदु है:
हल्कापन हटाने से आपके कमरे में चीजों का वास्तविक रंग नहीं बदलता, यह धारणा को बदल देता है उन रंगों के हल्के से गहरे संस्करण में।
अब अगर आप पहले और बाद मेंअपने कमरे की तस्वीर लेते हैं पर्दे नीचे खींच रहे हैं, और फिर आरजीबी प्रारूप में रंग मूल्यों से पहले/बाद में उनको पकड़ लें, पहले/बाद के रंग दो अलग-अलग रंग होंगे। वही हेक्स रंगों के लिए जाता है।
हालांकि, एचएसएल आपको दो अलग-अलग रंग नहीं देगा, लेकिन अलग-अलग लाइटनेस वैल्यू (एचएसएल में एल) के साथ एक ही रंग देगा।
तो मान लीजिए कि आपके कमरे में एक भूरे रंग की अखरोट के रंग की मेज है। अब तुम एक तसवीर ले लो, जिस पर पर्दों को खींचा गया हो, और एक में पर्दों को खींचा गया हो।
चित्रों के पहले/बाद के हेक्स और आरजीबी मान क्रमशः दो अलग-अलग रंग मान होंगे।
चित्रों के पहले/बाद के एचएसएल मान एक ही रंग के होंगे, लेकिन अलग-अलग लाइटनेस मानों के साथ।
कुछ लोग तर्क देंगे कि:
- हेक्स और आरजीबी अधिक मशीन-पठनीय हैं
- HSL अधिक मानव-पठनीय है
जबकि उपरोक्त शायद उन अधिकांश लोगों के लिए सही है जो पहले से ही तीनों रंग विधियों को समझते हैं और अनुभव रखते हैं, आपका अनुभव अलग हो सकता है।
मैं हमेशा कहता हूं कि लोग वही करते हैं जो वे सबसे ज्यादा करते हैं। इसलिए यदि आपके पास हेक्स या आरजीबी का उपयोग करने का वर्षों का अनुभव है और एचएसएल के साथ शून्य अनुभव है, तो संभवतः आपको एचएसएल को शुरू में पढ़ना कठिन लगेगा।
संक्षेप में बताने के लिए जो एचएसएल को अलग बनाता है:
- HSL आपको स्वयं रंग बदले बिना रंगों के हल्केपन और अंधेरे को बदलने की अनुमति देता है।
- आरजीबी और हेक्स रंगों के हल्केपन और अंधेरे को स्वयं रंग बदले बिना नहीं बदल सकते।