HTML Colors

HTML Colors क्या हैं?

HTML Colors का उपयोग वेब पेज के विभिन्न तत्वों, जैसे टेक्स्ट, बैकग्राउंड, बॉर्डर्स, और अन्य ग्राफिकल तत्वों को आकर्षक बनाने के लिए किया जाता है। HTML Colors को विभिन्न तरीकों से निर्दिष्ट किया जा सकता है, जैसे नाम, HEX कोड, RGB, RGBA, HSL और HSLA।

इस अध्याय में, हम HTML Colors के विभिन्न फॉर्मेट्स और उनके उपयोग को विस्तार से समझेंगे।

HTML Colors निर्दिष्ट करने के तरीके

HTML में Colors को स्टाइल देने के लिए आमतौर पर CSS का उपयोग किया जाता है। उदाहरण के लिए:

उदाहरण: CSS के साथ Colors

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue; /* टेक्स्ट का रंग */
    }
    p {
      color: #ff5733; /* HEX कोड */
    }
    body {
      background-color: lightgray; /* बैकग्राउंड का रंग */
    }
  </style>
</head>
<body>
  <h1>यह हेडिंग है</h1>
  <p>यह पैराग्राफ है।</p>
</body>
</html>

आउटपुट:

हेडिंग का टेक्स्ट नीले रंग में होगा।
पैराग्राफ का टेक्स्ट नारंगी (#ff5733) रंग में होगा।
बैकग्राउंड हल्के ग्रे रंग में होगा।

HTML Colors निर्दिष्ट करने के विभिन्न तरीके

1. Color Names

HTML में Colors को उनके नाम (जैसे “red”, “blue”, “green”) द्वारा निर्दिष्ट किया जा सकता है।

उदाहरण:

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

HTML में 140 से अधिक प्री-डिफाइंड Color Names उपलब्ध हैं।

2. HEX कोड

HEX (Hexadecimal) कोड का उपयोग HTML Colors को निर्दिष्ट करने के लिए किया जाता है। HEX कोड # से शुरू होता है और इसमें 6 अंकों का कोड होता है।

उदाहरण:

<p style="color: #ff0000;">यह टेक्स्ट लाल रंग में है।</p>
<p style="color: #00ff00;">यह टेक्स्ट हरे रंग में है।</p>
<p style="color: #0000ff;">यह टेक्स्ट नीले रंग में है।</p>

HEX कोड को समझें:

#RRGGBB
- RR = Red (लाल)
- GG = Green (हरा)
- BB = Blue (नीला)

3. RGB (Red, Green, Blue)

RGB मॉडल में Colors को तीन मानों (Red, Green, और Blue) के आधार पर निर्दिष्ट किया जाता है। हर मान 0 से 255 के बीच होता है।

उदाहरण:

<p style="color: rgb(255, 0, 0);">यह टेक्स्ट लाल रंग में है।</p>
<p style="color: rgb(0, 255, 0);">यह टेक्स्ट हरे रंग में है।</p>
<p style="color: rgb(0, 0, 255);">यह टेक्स्ट नीले रंग में है।</p>

4. RGBA (Red, Green, Blue, Alpha)

RGBA में “A” का मतलब Alpha होता है, जो पारदर्शिता (transparency) को दर्शाता है। Alpha मान 0 (पूर्ण पारदर्शी) से 1 (पूर्ण अपारदर्शी) तक होता है।

उदाहरण:

<p style="color: rgba(255, 0, 0, 0.5);">यह टेक्स्ट लाल रंग में है, लेकिन 50% पारदर्शी है।</p>
<p style="background-color: rgba(0, 255, 0, 0.3);">यह बैकग्राउंड 30% पारदर्शी है।</p>

5. HSL (Hue, Saturation, Lightness)

HSL मॉडल में Colors को तीन मानों के आधार पर निर्दिष्ट किया जाता है:

Hue: रंग का प्रकार (0 से 360 तक)
Saturation: रंग की तीव्रता (0% से 100% तक)
Lightness: रंग की चमक (0% से 100% तक)

उदाहरण:

<p style="color: hsl(0, 100%, 50%);">यह टेक्स्ट लाल रंग में है।</p>
<p style="color: hsl(120, 100%, 50%);">यह टेक्स्ट हरे रंग में है।</p>
<p style="color: hsl(240, 100%, 50%);">यह टेक्स्ट नीले रंग में है।</p>

6. HSLA (Hue, Saturation, Lightness, Alpha)

HSLA में Alpha का उपयोग पारदर्शिता (transparency) को नियंत्रित करने के लिए किया जाता है।

उदाहरण:

<p style="color: hsla(0, 100%, 50%, 0.5);">यह टेक्स्ट लाल रंग में है, लेकिन 50% पारदर्शी है।</p>

Default Colors और Background Colors

HTML में आप बैकग्राउंड और टेक्स्ट के Colors को अलग-अलग सेट कर सकते हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: black; /* बैकग्राउंड का रंग */
      color: white; /* टेक्स्ट का रंग */
    }
  </style>
</head>
<body>
  <h1>यह टेक्स्ट सफेद रंग में है।</h1>
  <p>बैकग्राउंड काला है।</p>
</body>
</html>

आउटपुट:

बैकग्राउंड काला होगा।
टेक्स्ट सफेद रंग में होगा।

HTML Colors के साथ CSS ग्रेडिएंट्स

CSS ग्रेडिएंट्स का उपयोग बैकग्राउंड को आकर्षक बनाने के लिए किया जाता है।

उदाहरण: Linear Gradient

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: linear-gradient(to right, red, yellow);
    }
  </style>
</head>
<body>
  <h1>CSS Linear Gradient</h1>
</body>
</html>

उदाहरण: Radial Gradient

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: radial-gradient(circle, blue, green);
    }
  </style>
</head>
<body>
  <h1>CSS Radial Gradient</h1>
</body>
</html>

निष्कर्ष

HTML Colors का उपयोग वेब पेज को आकर्षक और उपयोगकर्ता-अनुकूल बनाने के लिए किया जाता है। Colors को निर्दिष्ट करने के लिए Color Names, HEX, RGB, RGBA, HSL, और HSLA जैसे विभिन्न फॉर्मेट्स का उपयोग किया जा सकता है। इसके अलावा, CSS ग्रेडिएंट्स का उपयोग करके बैकग्राउंड को और अधिक आकर्षक बनाया जा सकता है। अगले अध्याय में, हम HTML Links के बारे में जानेंगे।