CSS3 RGBA, HSL और HSLA कलर वैल्यूज

CSS3 कलर मॉडल्स

CSS3 में रंगों को परिभाषित करने के लिए RGBA, HSL और HSLA मॉडल्स का उपयोग करें।

1. RGBA कलर वैल्यू

RGBA = Red, Green, Blue, Alpha। अल्फा रंग की पारदर्शिता है (0.0 से 1.0 के बीच)। 1.0 = पूरी तरह अपारदर्शी।

सिंटैक्स:

rgba(red, green, blue, alpha)

• Red, Green, Blue: 0-255 या 0%-100%
• Alpha: 0.0 (पारदर्शी) से 1.0 (अपारदर्शी)

उदाहरण: विभिन्न अल्फा मान

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: rgba(108, 111, 35, 0.6); }
#demo2 { background-color: rgba(108, 111, 35, 0.5); }
#demo3 { background-color: rgba(108, 111, 35, 0.4); }
#demo4 { background-color: rgba(108, 111, 35, 0.3); }
#demo5 { background-color: rgba(108, 111, 35, 0.2); }
#demo6 { background-color: rgba(108, 111, 35, 0.1); }
</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>

आउटपुट

समान RGB रंग (ऑलिव ग्रीन) लेकिन घटती हुई अपारदर्शिता (0.6 से 0.1 तक)।

2. HSL कलर वैल्यू

HSL = Hue (रंग), Saturation (संतृप्ति), Lightness (हल्कापन)।

पैरामीटर्स:

• Hue: 0-360 डिग्री (0/360=लाल, 120=हरा, 240=नीला)
• Saturation: 0%-100% (0% = ग्रे, 100% = पूर्ण रंग)
• Lightness: 0%-100% (0% = काला, 50% = सामान्य, 100% = सफेद)

उदाहरण

<!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>

आउटपुट

विभिन्न ह्यू, सैचुरेशन, लाइटनेस मानों के साथ हरे रंग के शेड्स।

3. HSLA कलर वैल्यू

HSLA = Hue, Saturation, Lightness, Alpha। अल्फा पारदर्शिता कंट्रोल करता है।

सिंटैक्स:

hsla(hue, saturation%, lightness%, alpha)

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: hsla(140, 100%, 50%, 0.8); }
#demo2 { background-color: hsla(130, 100%, 50%, 0.6); }
#demo3 { background-color: hsla(190, 100%, 50%, 0.4); }
#demo4 { background-color: hsla(170, 100%, 50%, 0.3); }
#demo5 { background-color: hsl(150, 100%, 60%); }
#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>

आउटपुट

विभिन्न ह्यू के साथ सेमी-ट्रांसपेरेंट बैकग्राउंड्स।

कलर मॉडल्स तुलना:

मॉडर्न CSS Color Level 4:

color: rgb(255 0 0 / 50%);      /* स्पेस-सेपरेटेड + अल्फा */
color: hsl(120 100% 50% / 0.5); /* नया सिंटैक्स */