HTML Colors – HSL और HSLA

इस चैप्टर में हम जानेंगे कि HTML और CSS में Colors को HSL और HSLA format में कैसे इस्तेमाल किया जाता है। यह format अधिक visually intuitive होता है, खासकर डिज़ाइनर और UI developers के लिए।

---

🔹 1. HSL क्या है?

HSL का पूरा नाम है:

• H → Hue (रंग की पहचान)
• S → Saturation (रंग की तीव्रता)
• L → Lightness (रंग की चमक/गहराई)

✅ Syntax:

hsl(hue, saturation, lightness)

---

🔸 Hue:

• मान (value) होती है: 0 से 360 डिग्री तक
• यह रंग को दर्शाता है — रंग चक्र पर
  • 0 = लाल (red)
  • 120 = हरा (green)
  • 240 = नीला (blue)

🔸 Saturation:

• रंग की तीव्रता (intensity)
• प्रतिशत में होता है: 0% (gray) से लेकर 100% (full color)

🔸 Lightness:

• रंग की चमक या उजाला
• 0% = काला (black)
• 50% = असली रंग
• 100% = सफेद (white)

---

🧾 HSL Example

<p style="color: hsl(0, 100%, 50%);">This is pure red</p>
<p style="color: hsl(120, 100%, 25%);">This is dark green</p>
<p style="color: hsl(240, 100%, 75%);">This is light blue</p>

---

🔹 2. HSLA क्या है?

HSLA = HSL + Alpha (opacity/transparency)

✅ Syntax:

hsla(hue, saturation, lightness, alpha)

• Alpha: transparency value (0 to 1)
  • 0 = पूरी तरह पारदर्शी
  • 1 = पूरी तरह अपारदर्शी (opaque)

---

🧾 HSLA Example

<div style="background-color: hsla(0, 100%, 50%, 0.3); padding: 10px;">
  This has a semi-transparent red background
</div>

---

🧠 HSL में Shades बनाना आसान

<p style="color: hsl(200, 100%, 20%);">Dark blue shade</p>
<p style="color: hsl(200, 100%, 50%);">Normal blue</p>
<p style="color: hsl(200, 100%, 80%);">Light blue shade</p>

🎯 केवल lightness value बदलकर आप dark/light रंग बना सकते हैं।

---

📋 Comparison Table

Format	Syntax Example	Transparent?	Human-Readable
RGB	rgb(255, 0, 0)	❌	Medium
RGBA	rgba(255, 0, 0, 0.5)	✅	Medium
HSL	hsl(0, 100%, 50%)	❌	✅ Easy
HSLA	hsla(0, 100%, 50%, 0.5)	✅	✅ Easy

---

🧪 Practice Task

1. एक HTML पेज बनाइए जिसमें:
   • एक div हो, जिसकी background hsla(120, 100%, 50%, 0.4) हो
   • एक heading हो जिसमें hsl(240, 100%, 50%) (blue) use हो

👉 Hint:

<h1 style="color: hsl(240, 100%, 50%);">This is Blue Heading</h1>
<div style="background-color: hsla(120, 100%, 50%, 0.4); padding: 15px;">
  Transparent Green Box
</div>

---

🔚 Conclusion:

• HSL/HSLA color formats ज्यादा समझने योग्य हैं, खासकर shades और contrasts बनाने में।
• Alpha channel से transparency control करना बहुत आसान होता है।
• यह format modern CSS में तेजी से लोकप्रिय हो रहा है।

---

✅ अब आपने HTML Colors के चारों formats (Color Name, RGB/RGBA, HEX, HSL/HSLA) सीख लिए!