CSS3 में HSL रंग मान

HSL का अर्थ है ह्यू (रंग), सैचुरेशन (संतृप्ति), और लाइटनेस (हल्कापन) जब तत्वों के लिए रंग सेट किया जाता है। ह्यू मान 0 से 360 तक होता है, जहां 0 या 360 लाल के लिए, 240 नीले के लिए, जबकि 120 हरे के लिए होता है। सैचुरेशन और लाइटनेस प्रतिशत मान हैं।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo1 { background-color: hsl(150, 100%, 50%); } 
      #demo2 { background-color: hsl(150, 100%, 50%); } 
      #demo3 { background-color: hsl(140, 100%, 40%); } 
      #demo4 { background-color: hsl(120, 100%, 40%); } 
      #demo5 { background-color: hsl(120, 100%, 30%); } 
      #demo6 { background-color: rgba(108,111,35,0.6); } 
    </style> 
  </head> 
  <body> 
    <h1>क्रिकेटर</h1> 
    <p id="demo1">डेविड वार्नर</p> 
    <p id="demo2">स्टीव स्मिथ</p> 
    <p id="demo3">मार्क वॉ</p> 
    <p id="demo4">स्टीव वॉ</p> 
    <p id="demo5">डेविड जॉनसन</p> 
    <p id="demo6">एंडी बिचेल</p> 
  </body> 
</html>

आउटपुट

व्याख्या: विभिन्न ह्यू, सैचुरेशन, लाइटनेस मानों के साथ HSL रंगों का उपयोग किया गया है। hsl(150, 100%, 50%) एक चमकीला हरा है। rgba() भी RGB में पारदर्शिता के साथ दिखाया गया है।