CSS कलर प्रॉपर्टीज — वेब डेवलपर्स के लिए पूरी गाइड

सबसे बुनियादी दो CSS कलर प्रॉपर्टीज हैं color (टेक्स्ट के लिए) और background-color (एलिमेंट बैकग्राउंड के लिए)। ये नामित रंग, HEX, RGB, HSL और आधुनिक कलर फंक्शन सहित कोई भी वैध CSS कलर वैल्यू स्वीकार करती हैं। color प्रॉपर्टी एलिमेंट का फोरग्राउंड कलर सेट करती है। background-color प्रॉपर्टी एलिमेंट के पूरे कंटेंट और पैडिंग एरिया को भरती है।

CSS बेसिक rgb() और hsl() से आगे बढ़ चुका है: rgb() फंक्शन अब आधुनिक स्पेस-सेपरेटेड सिंटैक्स सपोर्ट करता है: rgb(255 0 0)। अल्फा ट्रांसपेरेंसी स्लैश का उपयोग करती है: rgb(255 0 0 / 50%)। hsl() फंक्शन भी इसी तरह काम करता है। HSL कलर वेरिएशन बनाने के लिए विशेष रूप से उपयोगी है। color-mix() फंक्शन दो रंगों को मिलाता है। oklch() और oklab() फंक्शन परसेप्चुअली यूनिफॉर्म कलर स्पेस प्रदान करते हैं।

CSS ग्रेडिएंट स्मूथ कलर ट्रांजिशन बनाते हैं: लीनियर ग्रेडिएंट सीधी रेखा में बहते हैं: background: linear-gradient(to right, #ff0000, #0000ff)। रेडियल ग्रेडिएंट केंद्र बिंदु से विकिरित होते हैं: background: radial-gradient(circle, red, blue)। कॉनिक ग्रेडिएंट पाई चार्ट की तरह केंद्र बिंदु के चारों ओर घूमते हैं। ये कलर व्हील बनाने के लिए बेहतरीन हैं।

CSS ट्रांसपेरेंसी को नियंत्रित करने के कई तरीके प्रदान करता है: opacity प्रॉपर्टी पूरे एलिमेंट और सभी चिल्ड्रन को प्रभावित करती है। अल्फा चैनल केवल विशिष्ट प्रॉपर्टी को प्रभावित करते हैं। transparent कीवर्ड rgba(0, 0, 0, 0) के बराबर है। currentColor कीवर्ड वर्तमान टेक्स्ट कलर को इनहेरिट करता है।

CSS कस्टम प्रॉपर्टीज आधुनिक कलर सिस्टम की नींव हैं। ये रंगों को एक बार डिफाइन करके पूरी स्टाइलशीट में रीयूज करने देती हैं। डार्क मोड के लिए बस वेरिएबल्स को ओवरराइड करें। हमारा कलर पिकर टूल सभी CSS फॉर्मेट में कलर वैल्यू तुरंत जनरेट करता है।