HTML Colors – RGB और RGBA

इस अध्याय में हम सीखेंगे कि HTML में RGB (Red, Green, Blue) और RGBA (Red, Green, Blue, Alpha) color formats का उपयोग कैसे किया जाता है।

---

🔹 1. RGB क्या है?

RGB का मतलब है:

• R → Red (लाल)
• G → Green (हरा)
• B → Blue (नीला)

हर color इन तीन मूल रंगों के मिलाने से बनता है।
प्रत्येक मान 0 से 255 के बीच होता है।

✅ Syntax:

rgb(red, green, blue)

उदाहरण के लिए:

• rgb(255, 0, 0) = लाल
• rgb(0, 255, 0) = हरा
• rgb(0, 0, 255) = नीला

---

🧾 RGB Example 1: Text Color

<h2 style="color: rgb(255, 0, 0);">This is Red</h2>
<h2 style="color: rgb(0, 255, 0);">This is Green</h2>
<h2 style="color: rgb(0, 0, 255);">This is Blue</h2>

🖥 Output:

This is Red
This is Green
This is Blue

---

🧾 RGB Example 2: Background Color

<div style="background-color: rgb(240, 240, 240); padding: 10px;">
  This has a light gray background using RGB
</div>

---

🎯 Why Use RGB?

RGB आपको ज्यादा fine control देता है। आप किसी भी shade को custom बना सकते हैं।

उदाहरण:

rgb(128, 0, 128) → Purple
rgb(255, 165, 0) → Orange

---

🔹 2. RGBA क्या है?

RGBA में A यानी Alpha Channel जो transparency (पारदर्शिता) को दर्शाता है।

• Alpha Value: 0.0 (fully transparent) से लेकर 1.0 (fully opaque)

✅ Syntax:

rgba(red, green, blue, alpha)

---

🧾 RGBA Example

<p style="background-color: rgba(255, 0, 0, 0.3);">
  This paragraph has a transparent red background
</p>

🖥 Output:

Red background होगा लेकिन हल्का transparent — नीचे की चीजें हल्की सी दिखेंगी।

---

🧪 Practice Task

1. एक HTML पेज बनाइए जिसमें:
   • एक div हो जिसकी background में rgba(0, 0, 255, 0.5) use किया गया हो।
   • कुछ text transparent background पर हो।

👉 Hint:

<div style="background-color: rgba(0, 0, 255, 0.5); color: white; padding: 20px;">
  Semi-transparent blue background with white text
</div>

---

🧠 Tips:

Format	Example	Transparent?
RGB	rgb(255, 255, 0)	❌ No
RGBA	rgba(255, 255, 0, 0.5)	✅ Yes

---

🔚 Conclusion:

• RGB से आप precise color बना सकते हैं।
• RGBA transparency control देता है – डिजाइन में layered look के लिए बहुत उपयोगी।