CSS Academy · पाठ

रंग मान: नामित, Hex, RGB, HSL

CSS के सभी रंग प्रारूप सीखिए: नामित रंग, hex codes, rgb() और hsl() फ़ंक्शन।

पाठ 1, कुल 4 में से13 चरण

रंग मान: नामित, Hex, RGB, HSL, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

CSS रंग प्रारूप

CSS कई रंग प्रारूपों का समर्थन करता है। सही प्रारूप चुनना आपके कार्यप्रवाह, उपकरणों और इस बात पर निर्भर करता है कि आपको पारदर्शिता या गतिशील हेरफेर की आवश्यकता है या नहीं।

नामित रंग

CSS में 140 से अधिक नामित रंग परिभाषित हैं, जैसे red, tomato, cornflowerblue। ये त्वरित प्रोटोटाइप बनाने के लिए अच्छे हैं, लेकिन इनसे सीमित सटीकता मिलती है।

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

हेक्स रंग

हेक्साडेसिमल रंगों में # के बाद 6 हेक्स अंक होते हैं (संक्षिप्त रूप में 3)। अंकों की प्रत्येक जोड़ी लाल, हरे और नीले रंग को दर्शाती है (0–255)।

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

अल्फ़ा सहित हेक्स रंग

अल्फ़ा पारदर्शिता के लिए हेक्स अंकों की चौथी जोड़ी (या संक्षिप्त रूप में चौथा अंक) जोड़ें:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

RGB रंग

rgb() लाल, हरे और नीले चैनलों के लिए तीन पूर्णांक (0–255) लेता है। इसे पढ़ना बहुत आसान है और प्रोग्राम के माध्यम से समझना भी सरल है।

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

RGBA रंग

अल्फ़ा पारदर्शिता के लिए rgb() में चौथा पैरामीटर (0–1) जोड़ें। यह स्लैश सिंटैक्स वाले नए rgb() के समतुल्य है।

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

HSL रंग

hsl() रंग को ह्यू (0–360°), संतृप्ति (0–100%) और हल्केपन (0–100%) के आधार पर परिभाषित करता है। रंग पट्टियाँ और उनके विभिन्न रूप बनाने के लिए यह अधिक सहज है।

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

HSLA रंग

rgba() की तरह, hsla() एक अल्फ़ा चैनल जोड़ता है। आधुनिक CSS में इसके बजाय स्लैश विभाजक का उपयोग किया जा सकता है:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

HSL से रंगों के विभिन्न रूप बनाना

टिंट और शेड बनाने में HSL बहुत उपयोगी है। ह्यू और संतृप्ति को स्थिर रखें और हल्केपन को बदलें:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

currentColor मुख्यशब्द

currentColor एक गतिशील मान है, जो तत्व की वर्तमान color प्रॉपर्टी के बराबर होता है। इसका उपयोग बॉर्डर, छाया या SVG फिल को टेक्स्ट का रंग अपने-आप अपनाने के लिए करें।

<a href="#">Link with currentColor border</a>

transparent मुख्यशब्द

transparent मुख्यशब्द rgba(0,0,0,0) के बराबर होता है — यानी पूरी तरह पारदर्शी। यह उन हॉवर प्रभावों के लिए उपयोगी है जिनमें पारदर्शी रंग से किसी रंग की ओर संक्रमण किया जाता है।

<button>Transparent background</button>

त्वरित जाँच

एक ही ह्यू के हल्के और गहरे शेड बनाना किस रंग प्रारूप से सबसे आसान होता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

CSS नामित, हेक्स, RGB और HSL रंग प्रारूप प्रदान करता है। प्रोग्राम के माध्यम से रंगों में बदलाव करने के लिए HSL आदर्श है। सभी प्रारूप पारदर्शिता के लिए अल्फ़ा चैनल स्वीकार करते हैं। currentColor और transparent उपयोगी विशेष मुख्यशब्द हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “रंग मान: नामित, Hex, RGB, HSL” पाठ निःशुल्क है?

हाँ—“रंग मान: नामित, Hex, RGB, HSL” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“रंग मान: नामित, Hex, RGB, HSL” में मैं क्या सीखूँगा?

CSS के सभी रंग प्रारूप सीखिए: नामित रंग, hex codes, rgb() और hsl() फ़ंक्शन। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“रंग मान: नामित, Hex, RGB, HSL” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ