CSS RGB Colors

RGB किसी color को उस तरीके से describe करता है जैसे एक screen असल में उसे produce करती है: अलग-अलग intensities पर red, green, और blue light को mix करके, 0 (कुछ नहीं) से 255 (पूरी brightness) तक।

In this page:

rgb() Function
RGB से Colors Mix करना
rgba() से Transparency जोड़ना
RGB बनाम दूसरे Color Formats
Practical RGB Patterns

Syntax

css

selector {
  color: rgb(red, green, blue);
  color: rgba(red, green, blue, alpha);
}

rgb() Function

rgb(red, green, blue) 0 से 255 तक तीन numbers लेता है जो बताते हैं कि हर light channel का कितना mix करना है -- rgb(255, 0, 0) pure red है, rgb(0, 0, 0) black है, और rgb(255, 255, 255) white है।

Modern CSS percentages या rgb(255 0 0) जैसी space-separated syntax भी accept करता है, दोनों comma form के बराबर ही हैं।

Note:

Accepted values:
rgb(r, g, b) — हर channel 0 से 255 या 0% से 100%
rgb(r g b / a) — alpha वाला modern syntax
rgba(r, g, b, a) — 0 से 1 या 0% से 100% तक alpha
rgb(255 0 0) — pure red
rgb(0 0 0) — black, rgb(255 255 255) white है

उदाहरण: The rgb() Function

css

<style>
.red { background: rgb(255, 0, 0); }
.black { background: rgb(0, 0, 0); }
.white { background: rgb(255, 255, 255); }
</style>
<div class="red">Pure red</div>
<div class="black">Black</div>
<div class="white">White</div>

RGB से Colors Mix करना

क्योंकि RGB paint mixing के बजाय additive light mixing है, channels को combine करना art class वाली intuition से अलग behave करता है -- red और green light मिलकर yellow बनाती हैं, brown नहीं।

Additive model को समझना यह predict करने में मदद करता है कि कोई दिया गया rgb() triple test करने से पहले असल में कैसा दिखेगा।

Note:

Accepted values:
rgb(r, g, b) — हर channel 0 से 255
rgb(r g b) — modern space-separated syntax
rgb(r g b / a) — slash के बाद alpha जोड़ता है
rgb(0% 50% 100%) — channels percentages के रूप में
rgba(r, g, b, a) — 0 से 1 तक alpha वाला legacy alias

उदाहरण: Mixing Colors with RGB

css

<style>
.mix {
  background: rgb(255, 255, 0);
}
</style>
<div class="mix">Red light + green light = yellow, not brown</div>

rgba() से Transparency जोड़ना

rgba(red, green, blue, alpha) एक चौथी value जोड़ता है 0 (पूरी तरह transparent) से 1 (पूरी तरह opaque) तक, जो control करती है कि element के पीछे जो कुछ भी है वह कितना दिखे।

Semi-transparent overlays, tinted backgrounds, या fade effects बनाने का यह standard तरीका है, बिना किसी separate opacity property के जो पूरे element को असर करे।

Note:

Accepted values:
rgba(r, g, b, a) — alpha 0 (transparent) से 1 (opaque)
rgb(r g b / 50%) — percentage के रूप में लिखा गया alpha
hsla(h, s%, l%, a) — alpha वाला HSL color
#rrggbbaa — alpha वाला 8-digit hex
transparent — पूरी तरह transparent black का shorthand

उदाहरण: Adding Transparency with rgba()

css

<style>
.overlay {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
</style>
<div class="overlay">Semi-transparent overlay</div>

RGB बनाम दूसरे Color Formats

RGB values सीधे hex color codes में map होते हैं (हर channel दो hex digits बन जाता है), इसलिए rgb(255, 0, 0) और #FF0000 बिल्कुल एक ही color हैं -- इनके बीच चुनाव सिर्फ इस बात पर है कि context में कौन-सा पढ़ने या लिखने में आसान है।

जब किसी color को JavaScript में calculate या interpolate करने की ज़रूरत हो तो RGB के explicit numeric channels इसे खासतौर पर सुविधाजनक बनाते हैं।

उदाहरण: RGB vs Other Color Formats

css

<style>
.rgb-red { background: rgb(255, 0, 0); }
.hex-red { background: #FF0000; }
</style>
<div class="rgb-red">rgb(255, 0, 0)</div>
<div class="hex-red">#FF0000 — the same color</div>

Practical RGB Patterns

एक common pattern यह है कि एक base color को एक बार define करें और hover states, disabled states, या layered shadows के लिए अलग-अलग alpha values के साथ rgba() को reuse करें, जिससे underlying color consistent रहता है जबकि सिर्फ opacity बदलती है।

यह एक ही concept वाले color को अलग-अलग strengths के लिए कई almost-duplicate hex colors maintain करने से बचाता है।

उदाहरण: Practical RGB Patterns

css

<style>
.btn {
  background: rgba(37, 99, 235, 1);
}
.btn:hover {
  background: rgba(37, 99, 235, 0.8);
}
</style>
<button class="btn">Hover me</button>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Colors Next Lesson → CSS HEX Colors

CSS RGB Colors

rgb() Function

RGB से Colors Mix करना

rgba() से Transparency जोड़ना

RGB बनाम दूसरे Color Formats

Practical RGB Patterns

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code