HTML Colors – HEX Codes
इस चैप्टर में हम जानेंगे कि HTML और CSS में Colors को HEX (Hexadecimal) format में कैसे उपयोग किया जाता है। HEX format डिज़ाइनर्स और डेवलपर्स दोनों के लिए बहुत common और लोकप्रिय है।
🔹 1. HEX Code क्या होता है?
HEX (Hexadecimal) एक 6-digit code होता है जो color को दर्शाता है। यह # से शुरू होता है और उसके बाद 6 characters होते हैं।
✅ Structure:
#RRGGBB
- RR → Red (00 से FF)
- GG → Green (00 से FF)
- BB → Blue (00 से FF)
👉 00 = 0 (minimum)
👉 FF = 255 (maximum)
🎨 उदाहरण:
| Color Name | HEX Code | RGB Equivalent |
|---|---|---|
| Black | #000000 | rgb(0, 0, 0) |
| White | #FFFFFF | rgb(255, 255, 255) |
| Red | #FF0000 | rgb(255, 0, 0) |
| Green | #00FF00 | rgb(0, 255, 0) |
| Blue | #0000FF | rgb(0, 0, 255) |
🧾 Example 1: Text Color with HEX
<h2 style="color: #FF5733;">This is orange-red using HEX</h2>
<h2 style="color: #4CAF50;">This is green shade</h2>
🧾 Example 2: Background Color with HEX
<div style="background-color: #f0f0f0; padding: 15px;">
Light gray background using HEX
</div>
🔹 2. Short HEX Format
अगर color code repeat होता है, तो उसे short form में भी लिखा जा सकता है (3-digit version):
✅ Example:
<p style="color: #0F0;">This uses short HEX (#0F0 → #00FF00)</p>
| Short HEX | Expands to |
|---|---|
#FFF | #FFFFFF |
#000 | #000000 |
#F00 | #FF0000 |
🧠 HEX Code Reading Guide
| Code | Meaning |
|---|---|
#FF0000 | Pure Red (Full Red, no Green/Blue) |
#00FF00 | Pure Green |
#0000FF | Pure Blue |
#FFFF00 | Yellow (Red + Green) |
#00FFFF | Cyan (Green + Blue) |
#FF00FF | Magenta (Red + Blue) |
🧪 Practice Task
- एक पेज बनाइए जिसमें:
- तीन paragraphs हों।
- हर एक paragraph में अलग-अलग HEX color use हो – एक text में, एक background में, और एक short HEX code के साथ।
👉 Hint:
<p style="color: #FF1493;">This is deep pink text</p>
<p style="background-color: #D3D3D3;">Light gray background</p>
<p style="color: #0F0;">Short HEX for green</p>
📌 HEX vs RGB vs Color Name
| Format | Example | Advantage |
|---|---|---|
| Color Name | red | Easy to remember |
| RGB | rgb(255,0,0) | Fine control |
| HEX | #FF0000 | Compact & web-friendly |
🔚 Conclusion:
- HEX Codes concise और precise होते हैं।
- वेबसाइट डिज़ाइन में सबसे ज्यादा उपयोग होने वाला color format है।
- आप HEX को easily color pickers, graphics tools (जैसे Photoshop, Figma) से ले सकते हैं।