2,424 रीडिंग

2023 में CSS कलर फंक्शन - सब कुछ जो आपको आरंभ करने के लिए जानना चाहिए

द्वारा Rahul9m2023/02/24

बहुत लंबा; पढ़ने के लिए

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

featured image - 2023 में CSS कलर फंक्शन - सब कुछ जो आपको आरंभ करने के लिए जानना चाहिए

हेलो, साथी डेवलपर्स! आज, हम CSS कलर फंक्शन्स की दुनिया में गोता लगाने जा रहे हैं।

आपने वेब पेज पर किसी तत्व का रंग बदलने के लिए CSS का उपयोग किया होगा, लेकिन क्या आपने कभी CSS कलर फ़ंक्शंस के बारे में सुना है? यदि नहीं, तो अपनी सीट की पेटी कस लें क्योंकि आप कुछ नया और अत्यंत उपयोगी सीखने वाले हैं!

आइए एक उद्धरण से शुरू करते हैं जिसे मैंने कल पढ़ा था Goodreads .

रंग कीबोर्ड है, आंखें सामंजस्य हैं, आत्मा पियानो है जिसमें कई तार हैं। कलाकार वह हाथ है जो आत्मा में कंपन पैदा करने के लिए एक या दूसरी कुंजी को छूकर खेलता है।

सीएसएस रंग कार्य वास्तव में क्या हैं?

सीएसएस रंग फ़ंक्शन सीएसएस में रंगों को निर्दिष्ट करने का एक तरीका है, केवल एक साधारण रंग कोड के बजाय गणितीय कार्यों का उपयोग करना।

फ़ंक्शंस आपकी स्टाइलशीट में उपयोग किए जा रहे रंगों पर अधिक नियंत्रण और लचीलापन प्रदान करते हैं।

रंग कार्यों के साथ, आप एक रंग की छटा , संतृप्ति , लपट और अस्पष्टता को समायोजित कर सकते हैं, और यहां तक कि दो या दो से अधिक रंगों को एक साथ मिला सकते हैं।

कई सीएसएस कार्य उपलब्ध हैं, आइए कुछ देखें:

rgb() - यह क्रमशः लाल, हरे और नीले रंग का प्रतिनिधित्व करने वाले तीन मान लेता है और एक रंग देता है। मान 0 से 255 तक हो सकते हैं। उदाहरण: color: rgb(255, 0, 0) लाल रंग में परिणाम देता है।
rgba() - यह rgb() के समान है, लेकिन यह आपको रंग की अस्पष्टता सेट करने की भी अनुमति देता है। चौथा मान, अल्फ़ा, 0 से 1 तक हो सकता है। उदाहरण: color: rgba(255, 0, 0, 0.5) परिणाम अर्ध-पारदर्शी लाल रंग में होता है।
hsl() - यह रंग, संतृप्ति और हल्कापन का प्रतिनिधित्व करने वाले तीन मान लेता है, और एक रंग देता है। उदाहरण: color: hsl(0, 100%, 50%) परिणाम लाल रंग में होता है।
hsla() - यह hsl() के समान है, लेकिन यह आपको रंग की अस्पष्टता सेट करने की भी अनुमति देता है। उदाहरण: color: hsla(0, 100%, 50%, 0.5) परिणाम अर्ध-पारदर्शी लाल रंग में होता है।
mix() - यह आपको वैकल्पिक वजन पैरामीटर के साथ दो रंगों को एक साथ मिलाने की अनुमति देता है। उदाहरण: color: mix(red, blue) बैंगनी रंग की छाया में परिणाम।

आइए इनके बारे में विस्तार से जानें।

आरजीबी ()

ठीक है, चलिए सीएसएस रंग कार्यों की दुनिया में अपनी यात्रा जारी रखते हैं और आरजीबी समारोह में गोता लगाते हैं। आरजीबी फ़ंक्शन सीएसएस में सबसे अधिक इस्तेमाल किए जाने वाले रंग कार्यों में से एक है, और अच्छे कारण के लिए!

इसे समझना आसान है और यह आपको अपनी वेबसाइट पर उपयोग किए जाने वाले रंगों पर बहुत अधिक नियंत्रण प्रदान करता है।

आरजीबी फ़ंक्शन तीन मान लेता है, प्रत्येक की तीव्रता का प्रतिनिधित्व करता है

लाल,

हरा, और

क्रमशः नीला।

ये मान 0 से 255 तक हो सकते हैं। लाल, हरे और नीले रंग की विभिन्न तीव्रताओं को मिलाकर आप अपनी पसंद का कोई भी रंग बना सकते हैं।

उदाहरण:

लाल रंग के लिए - rgb(255, 0, 0)
हरे रंग के लिए - rgb(0, 255, 0)
नीले रंग के लिए - rgb(0, 0, 255)

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

एचएसएल ()

ठीक है, चलो सीएसएस में एक और उपयोगी रंग फ़ंक्शन - एचएसएल फ़ंक्शन पर चलते हैं!

एचएसएल फ़ंक्शन आरजीबी फ़ंक्शन के समान है, लेकिन लाल, हरे और नीले रंग के मानों का उपयोग करने के बजाय, यह इसके लिए मानों का उपयोग करता है:

रंग,

संतृप्ति, और

हल्कापन।

इससे इसे समझना और उपयोग करना थोड़ा आसान हो जाता है, खासकर उन लोगों के लिए जो इसके लिए नए हैं रंग सिद्धांत .

एचएसएल फ़ंक्शन में रंग का मान 0 से 360 तक के मानों के साथ रंग का ही प्रतिनिधित्व करता है।

0 का ह्यू मान लाल रंग का प्रतिनिधित्व करता है, 120 का ह्यू मान हरे रंग का प्रतिनिधित्व करता है, और 240 का ह्यू मान नीले रंग का प्रतिनिधित्व करता है।
एचएसएल फ़ंक्शन में संतृप्ति मान रंग की तीव्रता का प्रतिनिधित्व करता है, जिसमें 0% से 100% तक के मान होते हैं। 100% के संतृप्ति मान का अर्थ है कि रंग पूरी तरह से संतृप्त है, जबकि 0% के मान का अर्थ है कि रंग ग्रे है।
एचएसएल फ़ंक्शन में हल्कापन मान 0% से 100% तक के मानों के साथ रंग की चमक का प्रतिनिधित्व करता है। 50% के हल्केपन मान का अर्थ है कि रंग तटस्थ ग्रे है, जबकि 100% के मान का अर्थ है कि रंग पूरी तरह से हल्का है, और 0% के मान का अर्थ है कि रंग पूरी तरह से गहरा है।

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

आरजीबीए ()

ठीक है दोस्तों, आरजीबीए समारोह के बारे में बात करते हैं!

आरजीबीए फ़ंक्शन आरजीबी फ़ंक्शन की तरह ही है लेकिन एक अतिरिक्त बोनस के साथ:

यह आपको रंग की अस्पष्टता निर्दिष्ट करने की अनुमति देता है।

यह तब उपयोगी हो सकता है जब आप अपने तत्वों के लिए एक पारभासी प्रभाव बनाना चाहते हैं, जैसे कि जब आप चाहते हैं कि पृष्ठभूमि का रंग आंशिक रूप से पारदर्शी हो।

RGBA फ़ंक्शन चार मान लेता है, पहले तीन मान RGB फ़ंक्शन की तरह ही लाल, हरे और नीले रंग के होते हैं।

चौथा मान अल्फा मान है, जो रंग की अपारदर्शिता का प्रतिनिधित्व करता है और 0 से 1 तक होता है।

0 के मान का अर्थ है कि रंग पूरी तरह से पारदर्शी है, जबकि 1 के मान का अर्थ है कि रंग पूरी तरह से अपारदर्शी है।

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

एचएसएलए ()

ठीक है दोस्तों, चलिए HSLA फंक्शन के बारे में बात करते हैं!

एचएसएलए फ़ंक्शन एचएसएल फ़ंक्शन की तरह ही है, लेकिन एक अतिरिक्त बोनस के साथ: यह आपको रंग की अस्पष्टता निर्दिष्ट करने की अनुमति देता है।

यह तब उपयोगी हो सकता है जब आप अपने तत्वों के लिए एक पारभासी प्रभाव बनाना चाहते हैं, जैसे कि जब आप चाहते हैं कि पृष्ठभूमि का रंग आंशिक रूप से पारदर्शी हो।

HSLA फ़ंक्शन चार मान लेता है, पहले तीन HSL फ़ंक्शन की तरह रंग, संतृप्ति और हल्कापन मान होते हैं।

चौथा मान अल्फा मान है, जो रंग की अपारदर्शिता का प्रतिनिधित्व करता है और 0 से 1 तक होता है।

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

यह सब समान है A का अर्थ है अल्फा जो कि हम (0.75 का अल्फा मान) एड दोनों कार्यों में पारभासी प्रभाव के लिए सरल है।

कस्टम गुण या CSS चर

अब, CSS में कस्टम गुणों के बारे में बात करते हैं, जिसे CSS वेरिएबल्स के रूप में भी जाना जाता है। कस्टम गुण आपको उन मूल्यों को संग्रहीत करने की अनुमति देते हैं जिन्हें आप अपनी स्टाइलशीट में पुन: उपयोग कर सकते हैं, जिससे आपकी शैलियों को बनाए रखना आसान हो जाता है और आपका कोड अधिक हो जाता है मॉड्यूलर और लचीला।

एक कस्टम संपत्ति बनाने के लिए, आप बस -- सिंटैक्स का उपयोग करें जिसके बाद संपत्ति का नाम और उसके बाद एक मूल्य हो

 :root { --primary-color: blue; }

यहाँ, हमने blue रंग के मान के साथ --primary-color नामक एक कस्टम गुण बनाया है।

अब, इस कस्टम गुण का उपयोग करने के लिए, आप अपने CSS चयनकर्ताओं में var() फ़ंक्शन का उपयोग कर सकते हैं।

 button { background-color: var(--primary-color); }

उपरोक्त कोड सभी <button> तत्वों की पृष्ठभूमि का रंग नीला कर देता है क्योंकि हम कस्टम गुण --primary-color उपयोग कर रहे हैं।

यदि हम --primary-color का मान बदलना चाहते हैं, तो हमें इसे केवल एक स्थान पर बदलने की आवश्यकता है, और यह स्वचालित रूप से पूरे में अपडेट हो जाएगा शैली पत्रक .

कस्टम गुणों का उपयोग करने के लाभों में शामिल हैं:

कोड पुन: उपयोग : अपनी संपूर्ण स्टाइलशीट में मानों को दोहराने के बजाय, आप मानों को कस्टम गुणों में संग्रहीत कर सकते हैं और आवश्यकतानुसार उनका पुन: उपयोग कर सकते हैं।

रख-रखाव : कस्टम गुण आपकी शैलियों को बनाए रखना आसान बनाते हैं क्योंकि आपको केवल एक ही स्थान पर मूल्यों को अपडेट करने की आवश्यकता होती है।

लचीलापन : कस्टम गुण आपको एकाधिक चयनकर्ताओं में परिवर्तन करने के बजाय मूल्यों को एक स्थान पर बदलकर अपनी साइट का स्वरूप बदलने की अनुमति देते हैं।

सीएसएस रंग कार्य सर्वोत्तम अभ्यास

ठीक है, आइए अपने प्रोजेक्ट्स में CSS कलर फ़ंक्शंस का उपयोग करने के सर्वोत्तम तरीकों के बारे में बात करते हैं।

ये टिप्स आपको एक सुसंगत और दिखने में आकर्षक बनाने में मदद करेंगे रंगो की पटिया साथ ही यह भी सुनिश्चित करें कि आपके रंग पठनीय हैं और सभी उपयोगकर्ताओं के लिए सुलभ हैं।

अपनी वेबसाइट के लिए कलर पैलेट बनाना:

CSS रंगों के साथ काम करते समय आपको जो सबसे पहले काम करना चाहिए, वह है अपनी वेबसाइट के लिए एक रंग पैलेट बनाना। यह आपके पसंद के कुछ रंगों को चुनने जितना आसान हो सकता है और जो एक साथ अच्छी तरह से काम करते हैं।

आप अपने रंगों को परिभाषित करने के लिए RGB, HSL, RGBA, या HSLA फ़ंक्शंस का उपयोग कर सकते हैं।

शुरू करने के लिए एक अच्छी जगह एक मुख्य रंग चुनना है, और उसके पूरक के लिए 2-3 उच्चारण रंग चुनें।

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

कंट्रास्ट और पदानुक्रम के लिए CSS कलर फ़ंक्शंस का उपयोग करना:

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

आप विशिष्ट तत्वों, जैसे बटन या लिंक पर ध्यान आकर्षित करने के लिए भी रंग का उपयोग कर सकते हैं।

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

पठनीयता और अभिगम्यता के लिए परीक्षण रंग कार्य:

अंत में, पठनीयता और पहुंच के लिए अपने रंगों का परीक्षण करना महत्वपूर्ण है। सुनिश्चित करें कि आपके रंगों में आसानी से पढ़ने योग्य होने के लिए पर्याप्त कंट्रास्ट है, विशेष रूप से रंग दृष्टि की कमियों वाले उपयोगकर्ताओं के लिए।

आप अपने रंगों के कंट्रास्ट की जांच करने के लिए ऑनलाइन टूल का उपयोग कर सकते हैं और यह सुनिश्चित कर सकते हैं कि वे एक्सेसिबिलिटी मानकों को पूरा करते हैं।

WebAIM कंट्रास्ट चेकर

मुजली कलर पैलेट जेनरेटर

विशेषज्ञ - कंट्रास्ट चेकर

कूलर - पैलेट जेनरेटर

कैनवा पैलेट जेनरेटर

सीएसएस रंग कार्य उन्नत तकनीकें

इस खंड में, हम CSS रंग कार्यों के साथ कुछ उन्नत तकनीकों के बारे में जानेंगे।

गतिशील रंग योजनाओं के लिए CSS वेरिएबल्स का उपयोग करना

क्या आप कभी कोड की कुछ पंक्तियों के साथ अपनी वेबसाइट की रंग योजना बदलना चाहते हैं? CSS वेरिएबल्स के साथ, जिसे कस्टम प्रॉपर्टी के रूप में भी जाना जाता है, आप कर सकते हैं!

आप अपने रंग पैलेट को संग्रहीत करने के लिए चर का एक सेट बना सकते हैं और फिर उन्हें अपनी स्टाइलशीट में उपयोग कर सकते हैं।

इस तरह, यदि आप कभी भी अपनी रंग योजना बदलना चाहते हैं, तो आपको केवल अपने वेरिएबल्स में मानों को अपडेट करना होगा।

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

इस उदाहरण में, हमने अपने प्राथमिक और द्वितीयक रंगों के लिए दो कस्टम गुण बनाए। फिर हमने उनका उपयोग अपने h1 और button तत्वों को स्टाइल करने के लिए किया।

सीएसएस रंग कार्यों के साथ एनिमेशन बनाना

सीएसएस रंग कार्यों के साथ आप जो अच्छी चीजें कर सकते हैं उनमें से एक उन्हें एनिमेट करना है! आप अपनी वेबसाइट में कुछ गतिशीलता जोड़ने के लिए रंगों के बीच आसान बदलाव कर सकते हैं। उदाहरण के लिए, जब कोई उपयोगकर्ता इस पर होवर करता है, तो आप बटन का रंग बदल सकते हैं।

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

यहां, हमने अपने बटन का डिफ़ॉल्ट पृष्ठभूमि रंग हरे रंग ( hsl(120, 100%, 50%) पर सेट किया है और बटन के ऊपर होवर करने पर रंग को सुचारू रूप से बदलने के लिए एक संक्रमण जोड़ा है।

होवर स्थिति के लिए हमने रंग को नीले रंग में बदल दिया ( hsl(240, 100%, 50%) )।

ग्रेडियेंट और पारदर्शिता के लिए सीएसएस कलर फ़ंक्शंस का उपयोग करना

एक और मज़ेदार चीज़ जो आप CSS कलर फ़ंक्शंस के साथ कर सकते हैं वह है ग्रेडिएंट्स और ट्रांसपेरेंसी। आप अर्ध-पारदर्शी रंग बनाने के लिए RGBA और HSLA रंग फ़ंक्शन का उपयोग कर सकते हैं और फिर ग्रेडिएंट बनाने के लिए उन्हें संयोजित कर सकते हैं।

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

यहाँ, हमने एक रेखीय ग्रेडिएंट बनाया है जो लाल RGBA रंग से हरे HSLA रंग में जाता है। दोनों रंगों का अल्फा मान 0.5 है, जो उन्हें अर्ध-पारदर्शी बनाता है।

आखिर तुमने इसे हासिल कर ही लिया है!

सीएसएस रंग कार्यों के साथ कुछ उन्नत तकनीकें। इन तकनीकों के साथ प्रयोग करने का मज़ा लें, और अपनी रचनात्मकता को बेतहाशा चलने दें!

संसाधन