CSS rgb() फंक्शन

rgb() फंक्शन

rgb() फंक्शन का उपयोग RGB कलर वैल्यू सेट करने के लिए किया जाता है। फंक्शन के पैरामीटर 0 से 255 तक के मान या प्रतिशत में रंग की तीव्रता सेट करते हैं।

सिंटैक्स:

rgb(red, green, blue)
rgb(red%, green%, blue%)

पैरामीटर्स:

red: लाल की तीव्रता (0-255 या 0%-100%)
green: हरे की तीव्रता (0-255 या 0%-100%)
blue: नीले की तीव्रता (0-255 या 0%-100%)

उदाहरण 1: टेक्स्ट और बैकग्राउंड कलर

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-align: justify;
  text-justify: inter-word;
  color: rgb(213, 33, 33);
  background-color: rgb(211, 211, 211);
  font-size: 1.1em;
}
</style>
</head>
<body>
<h2>डेमो हेडिंग</h2>
<div>यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। </div>
</body>
</html>

आउटपुट

लाल टेक्स्ट (rgb 213,33,33) हल्के ग्रे बैकग्राउंड (rgb 211,211,211) पर।

उदाहरण 2: CSS ग्रिड के साथ rgb()

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  grid-area: newArea;
  font-size: xx-large;
}
.item3 { font-size: small; }
.item4 { font-size: medium; }
.item5 { font-size: x-large; }
.grid-container {
  display: grid;
  grid-template-areas:
    'newArea newArea . . .'
    'newArea newArea . . .';
  grid-gap: 5px;
  background-color: rgb(0, 255, 255);
  padding: 5px;
}
.grid-container > div {
  background-color: rgb(255, 50, 80);
  text-align: center;
  padding: 5px 0;
}
</style>
</head>
<body>
<h1>हेडिंग वन</h1>
<p>कुछ रैंडम नंबर सेट करें</p>
<div class="grid-container">
  <div class="demo">250</div>
  <div class="item2">120</div>
  <div class="item3">333</div>
  <div class="item4">298</div>
  <div class="item5">645</div>
  <div class="item6">543</div>
  <div class="item7">555</div>
</div>
</body>
</html>

आउटपुट

सियान बैकग्राउंड (rgb 0,255,255) के साथ ग्रिड कंटेनर और कोरल/लाल ग्रिड आइटम्स (rgb 255,50,80)।

rgb() vs अन्य कलर फॉर्मेट्स:

फॉर्मेट	उदाहरण	विवरण
rgb()	rgb(255, 0, 0)	लाल, हरा, नीला (0-255)
rgba()	rgba(255, 0, 0, 0.5)	rgb + अल्फा (पारदर्शिता)
Hex	#ff0000	हेक्साडेसिमल नोटेशन
hsl()	hsl(0, 100%, 50%)	ह्यू, सैचुरेशन, लाइटनेस

मॉडर्न CSS (Color Level 4):

नए ब्राउज़र्स स्पेस-सेपरेटेड मानों का भी समर्थन करते हैं:

color: rgb(255 0 0);        /* स्लैश के बिना */
color: rgb(255 0 0 / 0.5);    /* अल्फा के साथ स्लैश सिंटैक्स */