जब आपके UI को सबसे अलग दिखाने की बात आती है, तो सही कलर पैलेट चुनने जैसा कुछ नहीं होता। इस ट्यूटोरियल के साथ आप सीखेंगे कि एलिमेंट्स, फॉन्ट्स, और UI बनाते समय लगभग किसी भी चीज़ को कलर असाइन करना कितना आसान है।
कलर जोड़ने के लिए, CSS में color डेटा टाइप होता है, जो स्टैंडर्ड रेड, ग्रीन, ब्लू (RGB) फॉर्मेट में कलर को दर्शाता है।
कलर सिंटैक्स
CSS में कलर डिफाइन करने के कुछ तरीके हैं:
- कीवर्ड्स के साथ। ये स्ट्रिंग्स की तरह टाइप किए जाते हैं, जैसे 'red', 'white', 'yellow' या हेक्स नंबर्स जैसे #fff।
- हेक्साडेसिमल नोटेशन के साथ, उदाहरण के लिए #fff।
rgb()याrgba()फंक्शनल नोटेशन के माध्यम से।- या HSL फंक्शन्स जैसे
hsl()औरhsla()का उपयोग करके।
कीवर्ड आइडेंटिफायर्स का उपयोग
किसी भी एलिमेंट को कलर देने का सबसे आसान तरीका कीवर्ड एट्रिब्यूट्स का उपयोग करना है।
कृपया ध्यान दें कि जिस स्पेसिफिक प्रॉपर्टी का उपयोग आप कलर जोड़ने के लिए करेंगे, उसके अनुसार बारीकियां हैं - चाहे वह बैकग्राउंड हो, टेक्स्ट हो या एलिमेंट। हमारे उदाहरण के लिए हम एक अच्छे पुराने बटन का उपयोग करेंगे।
<button class="color">Color Me</button>
हमारे बटन एलिमेंट के साथ हमारे पास कलर जोड़ने के दो विकल्प हैं। या तो background-color प्रॉपर्टी के माध्यम से या color प्रॉपर्टी के माध्यम से। इस मामले में color प्रॉपर्टी टेक्स्ट का कलर बदलती है और background-color, बैकग्राउंड का। चलिए आगे बढ़ते हैं और अपने बटन को सेलेक्ट करके उसमें कलर जोड़ते हैं!
आसान है ना?
rgba() और hsl() फंक्शन्स
तो आप देख सकते हैं कि स्पेसिफिक कलर प्रॉपर्टीज में कलर जोड़ने के लिए कीवर्ड्स का उपयोग कैसे करें। आप सभी उपलब्ध विकल्पों को देखने के लिए इस कीवर्ड कलर चीटशीट को देख सकते हैं। हालांकि कीवर्ड कलर्स हमें संभावित कलर्स की एक विस्तृत श्रृंखला देते हैं, यह सीमित हो सकते हैं।
ये कीवर्ड कलर्स, या बहुत अधिक कोई अन्य कलर, हेक्स RGB या RGB डेसिमल के रूप में भी व्यक्त किए जा सकते हैं। उदाहरण के लिए 'black' #000000 या डेसिमल में 0,0,0 होगा और इसी तरह। आप इन हेक्स या डेसिमल विकल्पों के साथ अधिक विशिष्ट कलर प्राप्त कर सकते हैं।
RGB डेसिमल जोड़ने का एक आसान तरीका rgb() फंक्शन का उपयोग करना होगा। प्रत्येक डेसिमल का अधिकतम मान 255 है। आइए अपने कीवर्ड कलर्स को बदलकर इन दो नए विकल्पों को दिखाते हैं:
button.color { /* RGB और डेसिमल */ color: #fff; background-color: rgb(210,105,30); }
क्या आपने देखा कि ब्लैक में वही कैरेक्टर दोहराए गए हैं? जब यह वही कैरेक्टर हो तो आप व्हाइट के लिए ऊपर की तरह केवल पहले तीन टाइप कर सकते हैं। इसे #ffffff के रूप में भी व्यक्त किया जा सकता है।
कलर जोड़ने का एक और विकल्प hsl() फंक्शन का उपयोग करना होगा। HSL का मतलब ह्यू, सैचुरेशन, और लाइटनेस है। लाइटनेस व्हाइट (100%) से ब्लैक (0%) तक का प्रतिशत दर्शाता है। सैचुरेशन भी ग्रे कलर का एक प्रतिशत है जहां 100% 'फुल' ग्रे कलर है। ह्यू कलर व्हील में डिग्री (0 से 360) को RGB के रूप में दर्शाता है जहां 0 रेड है, 120 ग्रीन है और 240 ब्लू है। मुझे पता है यह जटिल लगता है 😊।
विजुअल स्टूडियो जैसे कोड एडिटर्स एक कलर पिकर प्रदान करते हैं जिससे आप खेल सकते हैं। आगे बढ़ें और hsl() टाइप करें फिर होवर करें और कलर पिकर पॉप अप देखें।
बाईं ओर आप ह्यू में हेरफेर कर सकते हैं, और अन्य दो बार सैचुरेशन और लाइटनेस। इसके साथ खेलें और देखें कि आप कितने कूल कलर प्राप्त कर सकते हैं। HSL शेड्स के लिए उपयोगी है, और हम सैचुरेशन और लाइटनेस के साथ हेरफेर कर सकते हैं। कुछ लोग इसे अपनी विशेष जरूरतों के कारण पसंद करते हैं।
कलर ऑपेसिटी मॉडिफाई करना
आप देख सकते हैं कि rgb और hsl दोनों फंक्शन्स को या तो rgba() या hsla() के रूप में व्यक्त किया जा सकता है। 'a' अल्फा के लिए है लेकिन यह बहुत अधिक ट्रांसपेरेंसी/ऑपेसिटी है जहां 0 ट्रांसपेरेंट है और 1 पूरी तरह से ओपेक है।
ऑपेसिटी मॉडिफाई करके आप अपने कलर्स के साथ और भी अधिक परिष्कृत हो सकते हैं। आइए अपने बटन कलर को ऑपेसिटी मॉडिफाई करके समाप्त करते हैं:
button.color { color: #fff; background-color: rgba(210,105,30, 0.7); }
ऑपेसिटी के साथ हमारा टेक्स्ट वास्तव में बेहतर पढ़ा जाता है!
