HTML Colors

अपने वेब पेज को रंगों से सजाना! क्योंकि एक पेज बिना रंग के वैसा ही होता है जैसे खाना बिना नमक के HTML में Colors का इस्तेमाल हर जगह होता है — टेक्स्ट में, बैकग्राउंड में, बॉर्डर में, बटन में, हेडिंग्स में, और भी बहुत कुछ में। चलिए, एक-एक करके पूरे मज़े से सीखते हैं

HTML Colors क्या होते हैं?

HTML में Colors का इस्तेमाल CSS properties जैसे color, background-color, और border के साथ किया जाता है। उदाहरण के लिए:

<p style="color: red;">यह टेक्स्ट लाल रंग में है।</p>

Output:

यह टेक्स्ट लाल रंग में है।

HTML में Colors लिखने के 4 तरीके

तरीका (Method)	उदाहरण (Example)	समझ (Explanation)
1️⃣ Color Name	`color: red;`	नाम से रंग (140+ predefined colors)
2️⃣ HEX Code	`color: #ff0000;`	6-अंकों वाला hex कोड
3️⃣ RGB Value	`color: rgb(255,0,0);`	Red, Green, Blue वैल्यू (0 से 255)
4️⃣ HSL Value	`color: hsl(0,100%,50%);`	Hue, Saturation, Lightness (रंगत, संतृप्ति, हल्कापन)

Example 1: Color Name से रंग लगाना

HTML में 140 से ज्यादा कलर नाम पहले से दिए गए हैं जैसे red, blue, green, orange, purple इत्यादि।

<h2 style="color: blue;">Welcome to HTML Colors</h2>
<p style="color: green;">यह टेक्स्ट हरे रंग में है।</p>
<p style="color: orange;">यह टेक्स्ट नारंगी रंग में है।</p>

Output :

Welcome to HTML Colors

यह टेक्स्ट हरे रंग में है।

यह टेक्स्ट नारंगी रंग में है।

Example 2: HEX Code से रंग लगाना

हर रंग को hexadecimal (HEX) format में भी लिखा जा सकता है — जो #RRGGBB के रूप में होता है।

रंग	HEX कोड
Red (लाल)	#ff0000
Green (हरा)	#00ff00
Blue (नीला)	#0000ff
Black (काला)	#000000
White (सफेद)	#ffffff
Gray (स्लेटी)	#808080

<p style="color: #ff0000;">यह टेक्स्ट HEX कोड से लाल है।</p>
<p style="background-color: #0000ff; color: #ffffff;">यह नीले बैकग्राउंड में सफेद टेक्स्ट है।</p>

Example 3: RGB (Red Green Blue) Colors

हर रंग RGB के तीन वैल्यू से बनता है — जहां 0 से 255 तक की वैल्यू दी जाती है।

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

Output :

Red (255,0,0)

Green (0,255,0)

Blue (0,0,255)

आप चाहें तो transparency भी जोड़ सकते हैं rgba() से:

<p style="background-color: rgba(255,0,0,0.3);">Red with Transparency</p>

Example 4: HSL (Hue, Saturation, Lightness)

यह color model थोड़ा नया और स्मार्ट है। यह रंगों को color wheel के आधार पर दर्शाता है।

Syntax:

hsl(hue, saturation%, lightness%)

Hue (0–360): रंग का कोण (0=लाल, 120=हरा, 240=नीला)
Saturation (0–100%): रंग की गहराई
Lightness (0–100%): चमक

<p style="color: hsl(0, 100%, 50%);">Red (HSL)</p>
<p style="color: hsl(120, 100%, 25%);">Green (HSL)</p>
<p style="color: hsl(240, 100%, 50%);">Blue (HSL)</p>

Example 5: Text और Background दोनों में रंग लगाना

<h2 style="color: white; background-color: black; padding: 10px;"> Dark Theme Example </h2>

Output:

Dark Theme Example

Example 6: Gradient (Multiple Colors) का Magic

Gradient का मतलब होता है “एक रंग से दूसरे रंग में बदलाव”। हालांकि ये CSS property है, पर HTML के style में आप इसे inline भी लिख सकते हैं।

<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); padding: 20px; color: white;">
  यह एक खूबसूरत Gradient Background है!
</div>

Output:

यह एक खूबसूरत Gradient Background है!

Example 7: Table के साथ रंग प्रयोग

<table border="1" style="border-collapse: collapse;">
  <tr style="background-color: lightblue;">
    <th>रंग</th>
    <th>HEX कोड</th>
  </tr>
  <tr style="background-color: #ff9999;">
    <td>Light Red</td>
    <td>#ff9999</td>
  </tr>
  <tr style="background-color: #99ff99;">
    <td>Light Green</td>
    <td>#99ff99</td>
  </tr>
  <tr style="background-color: #9999ff;">
    <td>Light Blue</td>
    <td>#9999ff</td>
  </tr>
</table>

Output:

रंग	HEX कोड
Light Red	#ff9999
Light Green	#99ff99
Light Blue	#9999ff

Important Tips

हमेशा टेक्स्ट और बैकग्राउंड के बीच अच्छा contrast रखें ताकि टेक्स्ट पढ़ने योग्य रहे।
Branding या design के लिए एक consistent color palette इस्तेमाल करें।
Dark mode और Light mode दोनों को ध्यान में रखकर रंग चुनें।
Transparent colors (rgba) attractive और modern लुक देते हैं।

Bonus: Color Picker Tool (ब्राउज़र में)

आप किसी भी वेब ब्राउज़र (Chrome/Edge) के Developer Tools में Color Picker खोलकर रंग चुन सकते हैं और उसका HEX या RGB कोड कॉपी कर सकते हैं।

तरीका (Method)	उदाहरण (Example)	समझ (Explanation)
1️⃣ Color Name	`color: red;`	नाम से रंग (140+ predefined colors)
2️⃣ HEX Code	`color: #ff0000;`	6-अंकों वाला hex कोड
3️⃣ RGB Value	`color: rgb(255,0,0);`	Red, Green, Blue वैल्यू (0 से 255)
4️⃣ HSL Value	`color: hsl(0,100%,50%);`	Hue, Saturation, Lightness (रंगत, संतृप्ति, हल्कापन)