HTML Colors: नाम, HEX, RGB और HSL कलर कोड
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
HTML के रंग CSS से तय होते हैं। आप किसी रंग को नाम (red), hex code (#ff0000), RGB value (rgb(255, 0, 0)), या HSL value (hsl(0, 100%, 50%)) से लिख सकते हैं। चारों एक ही लाल रंग को बताते हैं — बस लिखने के अलग-अलग तरीके हैं।
Hex codes — सबसे ज़्यादा इस्तेमाल होने वाले
Hex code # से शुरू होता है, उसके बाद छह अक्षर आते हैं: दो लाल के लिए, दो हरे के लिए, दो नीले के लिए। हर जोड़ा 00 (कुछ नहीं) से FF (पूरा) तक जाता है। इसलिए #000000 काला है, #ffffff सफेद है, और #e13611 इस वेबसाइट पर इस्तेमाल होने वाला नारंगी-लाल रंग है। Hex codes सटीक, छोटे होते हैं, और हर designer इन्हीं का इस्तेमाल करता है।
याद रखने की तरकीब: hex में पहले दो अंक लाल, बीच के दो हरे, आखिरी दो नीले — लाल-हरा-नीला, दो-दो अंक।
RGB और RGBA
rgb(255, 0, 0) का मतलब है लाल 255, हरा 0, नीला 0। हर संख्या 0 से 255 तक जाती है। Transparency के लिए चौथा अंक जोड़ें: rgba(255, 0, 0, 0.5) वही लाल रंग 50% opacity पर है, इसलिए उसके पीछे जो कुछ है वह दिखता है।
HSL — इंसानी तरीका
HSL का मतलब है Hue, Saturation, Lightness। Hue रंग के पहिए पर रंग है (0 = लाल, 120 = हरा, 240 = नीला)। Saturation बताता है कि रंग कितना गहरा है। Lightness बताता है कि वह कितना चमकीला है। कई designers HSL को पसंद करते हैं क्योंकि इसमें सोचना आसान है: "इसे थोड़ा हल्का करो" का मतलब सिर्फ lightness का अंक बढ़ाना है।
अच्छे लगने वाले रंग कैसे चुनें
एक मुख्य रंग चुनें, text के लिए एक गहरा रंग, और button और links के लिए एक accent रंग। Contrast ऊँचा रखें — हल्की पृष्ठभूमि पर गहरा text पढ़ने में सबसे आसान होता है। Google का colour picker या coolors.co एक अच्छा मुफ्त tool है, जहाँ आप इस्तेमाल करने से पहले combinations को परख सकते हैं।
रंग के formats
HTML और CSS कई formats में रंग स्वीकार करते हैं। वे सब एक ही चीज़ बताते हैं — लाल, हरी और नीली रोशनी का मिश्रण। जिस काम के लिए जो format सबसे आसान हो, उसे चुनें।
| Format | मान | विवरण |
|---|---|---|
| Colour name | red, tomato, skyblue | साधारण शब्द। सिर्फ 140 standard नाम मौजूद हैं। |
| Hex | #ff0000 | छह अंक: दो लाल के लिए, दो हरे के लिए, दो नीले के लिए। सबसे ज़्यादा इस्तेमाल होने वाला format। |
| RGB | rgb(255, 0, 0) | 0 से 255 तक तीन संख्याएँ, हर रंग के लिए एक। |
| RGBA | rgba(255, 0, 0, 0.5) | RGB और चौथा अंक, alpha, 0 (अदृश्य) से 1 (ठोस) तक। |
| HSL | hsl(0, 100%, 50%) | Hue (0–360), saturation, lightness। हल्के या गहरे shades बनाना आसान। |
वही लाल रंग तीन तरीकों से लिखा गया — screen पर नतीजा एक जैसा है:
<p style="color: red;">Red</p> <p style="color: #ff0000;">Red</p> <p style="color: rgb(255, 0, 0);">Red</p>
#ff0000 का मतलब है लाल = ff (255), हरा = 00 (0), नीला = 00 (0)। #ffffff सफेद है, #000000 काला है, और #808080 grey है।आम गलतियाँ
- सफेद पृष्ठभूमि पर हल्का grey text — स्टाइलिश लगता है लेकिन बहुत से लोग उसे पढ़ नहीं पाते।
- एक पेज पर बहुत सारे चमकीले रंग इस्तेमाल करना — दो या तीन रंग ही काफी हैं।
- CSS में
colourलिखना — property की spellingcolorहै। - Hex code में
#भूल जाना — उसके बिना browser उस value को नज़रअंदाज़ कर देता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Colors</title>
</head>
<body>
<p style="color: #e13611;">Orange-red text (hex).</p>
<p style="background-color: rgb(255, 235, 200);">Light orange background (RGB).</p>
<p style="color: hsl(210, 80%, 40%);">Blue text (HSL).</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. HTML में रंग लिखने के कितने तरीके हैं?
चार तरीके हैं: नाम, जैसे red; हेक्स कोड, जैसे #ff0000; RGB वैल्यू, जैसे rgb(255, 0, 0); और HSL वैल्यू, जैसे hsl(0, 100%, 50%)।
2. हेक्स कोड का मतलब क्या है?
हेक्स कोड # से शुरू होता है और उसके बाद छह अक्षर होते हैं: दो लाल के लिए, दो हरे के लिए, दो नीले के लिए। हर जोड़ी 00 से FF तक जाती है।
3. रंग को हल्का-पारदर्शी (transparent) कैसे बनाएँ?
RGBA इस्तेमाल करें, जिसमें पारदर्शिता के लिए चौथा नंबर जुड़ता है। जैसे rgba(255, 0, 0, 0.5) वही लाल रंग 50 प्रतिशत पारदर्शिता पर दिखाता है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
