HTML रंग

आप पहले ही style विशेषता से रूप बदल चुके हैं और स्वरूपण तथा उद्धरणों से अर्थ चिह्नित कर चुके हैं। रंग मनोदशा और पठनीयता दोनों गढ़ते हैं। इस शुरुआती HTML पथ में आप style के अंदर रंग के मान का अभ्यास करते हैं: सामान्य नाम, hex कोड, और rgb() फ़ंक्शन। पूरे डिज़ाइन सिस्टम बाद में CSS में आते हैं; यहाँ आप रूपों को सही पढ़ना और लिखना सीखते हैं, ताकि पृष्ठ केवल «रंगीन» न दिखे बिना यह समझे कि आपने वास्तव में क्या लिखा। जब तीनों रूप स्पष्ट हो जाएँ, साझा स्टाइलशीट की ओर जाना आसान लगता है क्योंकि वही मान दोहराए गए लंबी इनलाइन विशेषताओं के बाहर भी दिखते हैं।

HTML रंग मान क्या है?

रंग मान ब्राउज़र को बताता है कि color या background-color जैसी CSS प्रॉपर्टी के लिए कौन सा रंग लगाना है। वही मान रूप इनलाइन style और स्टाइलशीट दोनों में काम करते हैं। शुरुआती पहले तीन व्यावहारिक रूपों से मिलते हैं: पठनीय नाम (tomato), हेक्स कोड (#c0392b), और rgb() मिश्रण (rgb(192, 57, 43))। ये एक ही रंग को अलग वर्तनी में बता सकते हैं—जब आप पैलेट से कॉपी करें या एक चैनल समायोजित करें तब यह उपयोगी है। यह समझना कि नाम, hex और rgb अक्सर एक ही रंग दर्शाते हैं, अलग स्रोतों के उदाहरण मिलाते समय भ्रम कम करता है।

सीधा उत्तर

पाठ को color से और सामग्री के पीछे के क्षेत्र को background-color से सेट करें। उस क्षण के अनुकूल मान रूप चुनें: तेज़ डेमो के लिए नाम, पैलेट से कॉपी करते समय hex, या जब आप 0 से 255 तक लाल/हरा/नीला चैनल सोचते हैं तो rgb()। पढ़ने के लिए कंट्रास्ट पर्याप्त रखें। परियोजनाएँ बढ़ें तो साझा रंग CSS में ले जाएँ, हर पृष्ठ पर लंबी इनलाइन विशेषताएँ दोहराने के बजाय। यह आदत समय बचाती है और बाद में ब्रांड रंग बदलने पर पृष्ठों के बीच छोटे अंतर रोकती है।

मान रूप एक नज़र में

नामों से रंग

नामित रंग सबसे मित्रवत शुरुआत हैं। पाठ और पृष्ठभूमि का रंग सावधानी से जोड़ें ताकि शब्द पठनीय रहें। नाम तेज़ प्रयोग में मदद करते हैं बिना संख्याएँ याद किए, पर वास्तविक डिज़ाइन का हर शेड नहीं देते। उन्हें सीखने का पुल मानें, फिर जब अधिक सटीकता या डिज़ाइन टूल के रंग चाहिए हों तो hex या rgb पर जाएँ।

नमूना पढ़ना

• पहला पैराग्राफ़ केवल पाठ का रंग बदलता है
• दूसरा पृष्ठभूमि और पाठ दोनों सेट करता है ताकि नेवी हल्के नीले पर स्पष्ट रहे
• CSS में नाम बड़े/छोटे अक्षरों के प्रति असंवेदनशील हैं, फिर भी लोअरकेस स्पष्ट आदत है
• हर अंग्रेज़ी रंग शब्द वैध CSS नाम नहीं होता — जाँचे हुए सामान्य नामों पर टिके रहें
• यदि रंग «कुछ नहीं करता», पहले देखें कि नाम ठीक CSS शब्द से मेल खाता है, मुक्त अनुवाद नहीं

हेक्स रंग

हेक्स रंग आमतौर पर # से शुरू होता है और उसके बाद 0–9 तथा a–f के छह वर्ण आते हैं। जोड़े लाल, हरा और नीला दर्शाते हैं। #000000 काला है; #ffffff सफ़ेद। पूरा कैटलॉग याद रखने की ज़रूरत नहीं — पैलेट से चुनें और सावधानी से चिपकाएँ। कई डिज़ाइन टूल कॉपी के लिए हेक्स देते हैं; आपका काम # और छह वैध अंक रखना है ताकि ब्राउज़र मान को चुपचाप न छोड़ दे।

हेक्स सुझाव

• # रखें — इस पाठ के रूप में अकेला 336699 #336699 के समान नहीं है
• केवल वैध हेक्स अंक; अक्षर f पर रुकते हैं
• CSS में तीन-अंकीय हेक्स भी है (#333), पर इस पाठ्यक्रम स्तर पर छह-अंकीय कोड पर्याप्त हैं
• कॉपी/पेस्ट दोबारा जाँचें ताकि गायब अंक रंग को बिना स्पष्ट संदेश के विफल न करे
• पैलेट से सही शेड चिपकाया है यह पुष्टि करने के लिए #c0392b की तुलना समतुल्य नाम या rgb से करें

rgb() रंग

rgb() फ़ंक्शन लाल, हरा और नीला 0 से 255 तक की संख्याओं से मिलाता है। rgb(255, 0, 0) शुद्ध लाल है। जब आप एक समय में एक चैनल समायोजित करते हैं—जैसे चमक बढ़ाना या नीला घटाना बिना हाथ से हेक्स पुनर्गणना किए—यह रूप सुविधाजनक है। तीन संख्याएँ हमेशा क्रम में हैं: लाल, फिर हरा, फिर नीला; अल्पविराम सिंटैक्स का हिस्सा हैं।

रूपों को जोड़ना

एक ही रंग अक्सर नाम, hex या rgb के रूप में लिखा जा सकता है। प्रत्येक डेमो में एक रूप चुनें ताकि आँख सिंटैक्स सीखे। बाद में CSS में अन्य नोटेशन भी मिलेंगे; ये तीन शुरुआती HTML अभ्यास को कवर करते हैं। जब एक पैलेट हेक्स दे और दूसरा टूल rgb, याद रखें कि अक्सर वही रंग दो तरीकों से लिखा होता है। महत्वपूर्ण यह है कि style के अंदर पूरा, सही रूप हो।

कंट्रास्ट और पठनीयता

वैध रंग फिर भी बुरा चुनाव हो सकता है। सफ़ेद पर हल्का पीला पाठ सही पार्स हो सकता है और फिर भी पढ़ना कठिन रहे। जब आप color और background-color दोनों सेट करें, देखें कि पाठ उभरता है। वास्तविक साइटों पर कंट्रास्ट पहुँच का हिस्सा है — छोटी डेमो में भी अभी से आदत शुरू करें। अच्छा कंट्रास्ट केवल सजावट नहीं; यह शर्त है कि आगंतुक सामग्री बिना थकान पढ़ सकें, खासकर अलग स्क्रीन या तेज़ रोशनी में।

अपने एडिटर में अभ्यास

1. एक शीर्षक के नीचे तीन छोटे पैराग्राफ़ बनाएँ।
2. पहले पाठ को नाम से रंगें (teal या समान)।
3. दूसरे पाठ को हेक्स मान से रंगें।
4. तीसरे को rgb() से background-color दें, और ज़रूरत हो तो कंट्रास्ट के लिए गहरा color लगाएँ।
5. सहेजें और रिफ़्रेश करें। पुष्टि करें कि प्रत्येक रूप काम करता है।
6. जानबूझकर एक हेक्स तोड़ें (एक अंक हटाएँ), रिफ़्रेश करें, फिर ठीक करें — यह सावधान सिंटैक्स का अभ्यास है।
   अलग रंगों से अभ्यास दोहराएँ जब तक आप बिना नोट्स देखे जल्दी नाम, hex और rgb पहचान सकें। यह भी देखें कि style मान के चारों ओर उद्धरण बंद हैं; विशेषता में छोटी गलती पूरा रंग हटा सकती है।

गलतियाँ जो रंग छुपाती या कमज़ोर करती हैं

• color (पाठ) को background-color (पाठ के पीछे) से मिलाना
• छह-अंकीय कोड चाहते हुए #33, #gggggg, या # के बिना हेक्स लिखना
• कम कंट्रास्ट संयोजन जो «स्टाइल वाले» लगते हैं पर पढ़ना कठिन हैं
• आगे साझा CSS सीखने के बजाय केवल दोहराए इनलाइन स्टाइल से पूरा ब्रांड थीम बनाना
• जाँच के बिना मानना कि हर अंग्रेज़ी रंग शब्द वैध CSS नाम है
• style मान के उद्धरण बंद न करना जिससे ब्राउज़र विशेषता अधूरी पढ़े
  इनमें से प्रत्येक गलती समय बर्बाद करती है या सामग्री पर भरोसा घटाती है। पृष्ठ को आगंतुक की नज़र से पढ़ें: क्या पाठ अपनी पृष्ठभूमि पर स्पष्ट है? क्या आप समझते हैं कि यह मान रूप क्यों चुना?

सारांश

• तेज़ रंग डेमो के लिए style में color और background-color का उपयोग करें
• मान: नाम, hex (#RRGGBB), या rgb(r, g, b)
• हेक्स जोड़े लाल, हरा, नीला से मेल खाते हैं; rgb चैनल 0 से 255 तक चलते हैं
• जब पाठ रंगीन पृष्ठभूमि पर हो तो पठनीय कंट्रास्ट चुनें
• पृष्ठ और परियोजनाएँ बढ़ें तो साझा रंग CSS में ले जाएँ
• सहेजकर और रिफ़्रेश करके जाँचें; जब रंग «कुछ नहीं करता» तो सिंटैक्स सावधानी से ठीक करें
  इस क्रम में आप स्पष्ट आदत बनाते हैं: सही प्रॉपर्टी चुनें, पूरा मान लिखें, कंट्रास्ट से पठनीयता बचाएँ, फिर व्यापक साझा स्टाइल की ओर बढ़ें।