CSS hsl() फ़ंक्शन

वर्णन और उपयोग

CSS का hsl() फ़ंक्शन रंग को निर्दिष्ट करने के लिए रंग के ह्यू-सातत्य-चमकीलापन मॉडल (HSL) का उपयोग करता है। आवश्यकता पड़ने पर एक वैकल्पिक alpha तत्व (रंग की ट्रांसपेरेंसी) को जोड़ा जा सकता है।

सुझाव:HSL का अर्थ है रंग का ह्यू (Hue) सातत्य (Saturation) और चमकीलापन (Lightness)，यह रंग का सर्कुलर निर्देशांक प्रतिनिधित्व करता है।

ध्यान दें:hsla() तत्व है hsl() तत्व का अन्य नाम। सिफारिश है hsl() तत्व

उदाहरण

उदाहरण 1

विभिन्न HSL(A) रंगों का वर्णन:

#p1 {background-color:hsl(120 100% 50%);} /* हरा */
#p2 {background-color:hsl(120 100% 75%);} /* हल्का हरा */
#p3 {background-color:hsl(120 100% 25%);} /* गहरा हरा */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* ट्रांसपेरेंसी वाला गहरा हरा */
#p5 {background-color:hsl(120 60% 70%);} /* नरम हरा */
#p6 {background-color:hsl(290 100% 50%);} /* पुर्पला */
#p7 {background-color:hsl(290 60% 70%);} /* नरम पुर्पला */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* ट्रांसपेरेंसी वाला नरम पुर्पला */

स्वयं के अनुभव

उदाहरण 2

अनुक्रमित मान के रूप में सेपटा का पुराना वाक्यांश शैली:

#p1 {background-color:hsl(120, 100%, 50%);} /* हरा */
#p2 {background-color:hsl(120, 100%, 75%);} /* हल्का हरा */
#p3 {background-color:hsl(120, 100%, 25%);} /* गहरा हरा */
#p4 {background-color:hsl(120, 60%, 70%);} /* हरा त्वचा रंग */
#p5 {background-color:hsl(290, 100%, 50%);} /* त्वचा रंग */
#p6 {background-color:hsl(290, 60%, 70%);} /* हरा त्वचा रंग */

स्वयं के अनुभव

CSS शैली

अभिकर्ता वाक्यांश शैली

hsl(ह्यू सैटुरेशन लाइटनेस / A)
मान वर्णन
ह्यू अनिवार्य। रंग परिक्रमा पर की दूरी (0 से 360) - 0 (या 360) लाल है, 120 हरा है, 240 नीला है।
सैटुरेशन

अनिवार्य। रंग की सूखीदारी को परिभाषित करता है; 0% ग्रे है, 100% पूर्ण रंग (पूर्ण सूखीदारी) है।

इसके बजाय None (0% से समान) का इस्तेमाल भी किया जा सकता है।
लाइटनेस

अनिवार्य। रंग की चमकीलापन को परिभाषित करता है; 0% काला है, 50% सामान्य, 100% श्वेत है।

इसके बजाय None (0% से समान) का इस्तेमाल भी किया जा सकता है।
/ A

वैकल्पिक। रंग के एल्फा चैनल की गुणवत्ता (0% या 0 से पूरी तरह से पारदर्शी तक 100% या 100 से पूरी तरह से अविरत)।

इसके बजाय None (एल्फा चैनल को कहता है) का इस्तेमाल भी किया जा सकता है।

डिफ़ॉल्ट मान 100% है।

सापेक्षिक वाक्यांश शैली

hsl(from रंग ह्यू सैटुरेशन लाइटनेस / A)
मान वर्णन
from रंग

जो 'from' शब्द से शुरू होता है और उसके बाद आधार रंग का रंग वाला मान है।

यह आपसी रंग के आधार रंग है।
ह्यू अनिवार्य। रंग परिक्रमा पर की दूरी (0 से 360) - 0 (या 360) लाल है, 120 हरा है, 240 नीला है।
सैटुरेशन

अनिवार्य। रंग की सूखीदारी को परिभाषित करता है; 0% ग्रे है, 100% पूर्ण रंग (पूर्ण सूखीदारी) है।

इसके बजाय None (0% से समान) का इस्तेमाल भी किया जा सकता है।
लाइटनेस

अनिवार्य। रंग की चमकीलापन को परिभाषित करता है; 0% काला है, 50% सामान्य, 100% श्वेत है।

इसके बजाय None (0% से समान) का इस्तेमाल भी किया जा सकता है।
/ A

वैकल्पिक। रंग के एल्फा चैनल की गुणवत्ता (0% या 0 से पूरी तरह से पारदर्शी तक 100% या 100 से पूरी तरह से अविरत)।

इसके बजाय None (एल्फा चैनल को कहता है) का इस्तेमाल भी किया जा सकता है।

डिफ़ॉल्ट मान 100% है।

तकनीकी विवरण

संस्करण: CSS3

ब्राउज़र समर्थन

तालिका में दिए गए संख्या पहली बार इस फ़ंक्शन को समर्थन करने वाले ब्राउज़र का संस्करण है।

च्रोम एज फ़ायरफॉक्स सफारी ऑपेरा
hsl()
1 9 1 3.1 9.5
साथ एल्फा पारामीटर का hsl()
65 79 52 12.1 52
स्पेस से अलग संख्या के रूप में
65 79 52 12.1 52

संबंधित पृष्ठ

तस्वीरीयाँ:CSS HSL रंग

संदर्भःसीएसएस रंग

संदर्भःCSS hwb() फ़ंक्शन

संदर्भःCSS lab() फ़ंक्शन

संदर्भःCSS lch() फ़ंक्शन

संदर्भःCSS oklab() फ़ंक्शन

संदर्भःCSS oklch() फ़ंक्शन