HTML Colors

📘 Basic जानकारी HTML Colors के बारे में

HTML में Colors का उपयोग webpage को आकर्षक और readable बनाने के लिए किया जाता है। आप किसी भी text, background, border, या element में colors जोड़ सकते हैं।

🎯 HTML में Color कैसे Apply होता है?

HTML में colors को आमतौर पर CSS (Cascading Style Sheets) के माध्यम से apply किया जाता है।

आप colors इन तरीकों से specify कर सकते हैं:

Color Name (जैसे – red, blue, green)
RGB value (जैसे – rgb(255,0,0))
HEX value (जैसे – #FF0000)
HSL value (जैसे – hsl(0, 100%, 50%))
RGBA / HSLA (alpha transparency के साथ)

इस chapter में हम Color Name method पर फोकस करेंगे।

🔹 1. Color Name का उपयोग

HTML में predefined 140+ color names होते हैं। ये colors browser द्वारा पहचान लिए जाते हैं और आप इन्हें सीधा use कर सकते हैं।

✅ Syntax:

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

🧾 Example: Text Color with Color Name

<h3 style="color: blue;">This is Blue Text</h3>
<p style="color: green;">This paragraph is in Green</p>
<p style="color: orange;">Orange is a bright color!</p>

🖥 Output:

This is Blue Text
This paragraph is in Green
Orange is a bright color!

🧾 Example: Background Color

<body style="background-color: lightgray;">
  <h2 style="color: navy;">Welcome to My Website</h2>
</body>

🖥 Output:

(Page background will be light gray, and heading text will be navy)

📋 Common Color Names

Color Name	Output
red	`red`
green	`green`
blue	`blue`
black	`black`
white	`white`
gray	`gray`
orange	`orange`
pink	`pink`
purple	`purple`
yellow	`yellow`

🧪 Practice Task

एक HTML पेज बनाएं जिसमें:
- एक heading हो “Color Demo”
- 5 paragraphs हों, हर एक अलग color में
- एक paragraph ऐसा हो जिसकी background और text color दोनों set हों

👉 Hint:

<p style="color: white; background-color: black;">This is white on black</p>

🔚 Conclusion:

HTML में color add करना बहुत आसान है।
शुरूआत में आप color name से practice करें।
CSS में colors को और बेहतर तरीके से customize किया जा सकता है।

⬅ Previous Next ➡