सीएसएस रंग
CSS 140+ रंग नाम, HEX मान, RGB मान , RGBA मान, HSL मान, HSLA मान और अस्पष्टता का समर्थन करता है।
आरजीबीए रंग
आरजीबीए रंग मान अल्फा चैनल के साथ आरजीबी रंग मूल्यों का विस्तार है - जो रंग के लिए अस्पष्टता निर्दिष्ट करता है।
एक RGBA रंग मान के साथ निर्दिष्ट किया गया है: rgba (लाल, हरा, नीला, अल्फा)। अल्फा पैरामीटर 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अपारदर्शी) के बीच की संख्या है।
निम्न उदाहरण विभिन्न RGBA रंगों को परिभाषित करता है:
उदाहरण
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
एचएसएल रंग
HSL का मतलब ह्यू, सैचुरेशन और लाइटनेस है।
एक एचएसएल रंग मान के साथ निर्दिष्ट किया गया है: एचएसएल (रंग, संतृप्ति, हल्कापन)।
- रंग पहिया पर रंग एक डिग्री है (0 से 360 तक):
- 0 (या 360) लाल है
- 120 हरा है
- 240 नीला है
- संतृप्ति एक प्रतिशत मान है: 100% पूर्ण रंग है।
- हल्कापन भी एक प्रतिशत है; 0% गहरा (काला) है और 100% सफेद है।
निम्नलिखित उदाहरण विभिन्न एचएसएल रंगों को परिभाषित करता है:
उदाहरण
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
एचएसएलए रंग
HSLA रंग मान एक अल्फा चैनल के साथ HSL रंग मानों का एक विस्तार हैं - जो एक रंग के लिए अस्पष्टता को निर्दिष्ट करता है।
एक HSLA रंग मान के साथ निर्दिष्ट किया जाता है: hsla (रंग, संतृप्ति, हल्कापन, अल्फा), जहां अल्फा पैरामीटर अस्पष्टता को परिभाषित करता है। अल्फा पैरामीटर 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अपारदर्शी) के बीच की संख्या है।
निम्नलिखित उदाहरण विभिन्न HSLA रंगों को परिभाषित करता है:
उदाहरण
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
अस्पष्टता
CSS opacityगुण पूरे तत्व के लिए अस्पष्टता निर्धारित करता है (पृष्ठभूमि का रंग और पाठ दोनों अपारदर्शी/पारदर्शी होंगे)।
प्रॉपर्टी का opacityमान 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अपारदर्शी) के बीच की कोई संख्या होनी चाहिए.
ध्यान दें कि ऊपर दिया गया टेक्स्ट भी पारदर्शी/अपारदर्शी होगा!
निम्न उदाहरण अस्पष्टता के साथ विभिन्न तत्वों को दिखाता है:
उदाहरण
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */