रंग परिभाषा विधियाँ
CSS3 में रंग परिभाषित करने के लिए RGB, RGBA, HSL, HSLA का उपयोग करें। साथ ही कलर वैल्यू और हेक्साडेसिमल वैल्यू भी उपयोग कर सकते हैं।
RGBA कलर वैल्यू
RGBA: Red, Green, Blue, Alpha। अल्फा रंग की अस्पष्टता है (0.0 से 1.0)। 1.0 पूर्ण अपारदर्शी के लिए।
उदाहरण: RGBA
<!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>Cricketers</h1>
<p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p>
</body>
</html>
आउटपुट
HSL कलर वैल्यू
HSL: Hue (0-360), Saturation (%), Lightness (%)।
उदाहरण: HSL
<!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>Cricketers</h1>
<p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p>
</body>
</html>
आउटपुट
HSLA कलर वैल्यू
HSLA: Hue, Saturation, Lightness, Alpha (0.0 पारदर्शी, 1.0 अपारदर्शी)।
उदाहरण: HSLA
<!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>Cricketers</h1>
<p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Andy Bichel</p>
</body>
</html>
आउटपुट
हेक्साडेसिमल कलर वैल्यू
<!DOCTYPE html>
<html>
<head>
<style>
div { text-align: justify; text-justify: inter-word; color: white; background-color: #B13838; }
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text...</div>
</body>
</html>
आउटपुट
