CSS फंडामेंटल: कलर्स के साथ काम करना

वेबसाइट डिजाइन करते समय विचार करने के लिए कई कारक हैं; फ़ॉन्ट, UX प्रवाह, और भी बहुत कुछ। एक बहुत ही महत्वपूर्ण डिजाइन तत्व रंग है। ब्रांड रंग, बॉर्डर रंग और पृष्ठभूमि रंग जैसे साधारण निर्णय भी एक निश्चित और ध्यान देने योग्य प्रभाव प्रदान करते हैं।

इस लेख में, हम CSS रंगों के मूल सिद्धांतों को कवर करेंगे और सीखेंगे कि HTML साइट को त्रुटिहीन दिखने वाली वेबसाइट में कैसे बदला जाए।

CSS कलर्स के साथ शुरुआत करना

CSS में रंगों का वर्णन करने का एक निश्चित तरीका है जिसे कंप्यूटर समझ सकता है। यह आम तौर पर रंग को विभिन्न घटकों में तोड़कर, वांछित रंग बनाने के लिए प्राथमिक रंगों के मिश्रित सेट की गणना करके किया जाता है। CSS में रंग का वर्णन करने के कई अलग-अलग तरीके हैं।

कीवर्ड के रूप में रंग नामों का उपयोग करना

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

/*Syntax*/
लाल रंग;
रंग: क्रिमसन;
रंग: स्लेटब्लू;

आरजीबी मूल्यों का उपयोग करना

वेबसाइट या ऐप डिजाइन करते समय, रंग योजना बहुत मायने रखता है—निश्चित रूप से यह आखिरी चीज नहीं होनी चाहिए जिस पर आप विचार करते हैं। CSS में, आप RGB रंग का प्रतिनिधित्व करने के लिए तीन विधियों का उपयोग कर सकते हैं। ये हेक्साडेसिमल स्ट्रिंग नोटेशन, आरजीबी फंक्शनल नोटेशन और एचएसएल फंक्शनल नोटेशन हैं। यहां उनमें से प्रत्येक पर करीब से नज़र डालें।

हेक्साडेसिमल स्ट्रिंग नोटेशन

हेक्साडेसिमल स्ट्रिंग नोटेशन हमेशा चरित्र से शुरू होता है #. इस वर्ण के बाद, आप एक विशिष्ट रंग कोड के हेक्साडेसिमल अंकों का उपयोग करके रंग निर्दिष्ट करते हैं। स्ट्रिंग केस-संवेदी नहीं है, लेकिन लोअर केस का उपयोग करना पारंपरिक है। यहां कुछ उपयोग के मामले दिए गए हैं:

#rrggbb

यह संख्यात्मक रंग का वर्णन करने का सबसे आम तरीका है। यह लाल, हरे और नीले घटकों के साथ पूरी तरह से अपारदर्शी रंग है: 0xrr, 0xgg, तथा 0xbb क्रमश।

#rrggbbaa

यह अल्फा चैनल के साथ ऊपर उल्लिखित आरजीबी मानदंडों का पालन करता है जो रंग की स्पष्टता को संभालता है। कम 0xaa मूल्य है, रंग जितना अधिक पारभासी होता है।

#आरजीबी

अगर आपके पास रंग है #556677, आप इसे बस के रूप में लिख सकते हैं #567 चूंकि यह प्रतिनिधित्व करता है 0xrr, 0xgg, तथा 0xbb क्रमश। उदाहरण के लिए, #000 (या #000000) काला है जबकि #fff (या #ffffff) सफेद है।

#आरजीबीए

यह द्वारा निर्दिष्ट अल्फा चैनल के साथ उपरोक्त मानदंडों का पालन करता है 0xaa अस्पष्टता को नियंत्रित करने के लिए।

आरजीबी कार्यात्मक संकेतन

आरजीबी कार्यात्मक संकेतन लाल, हरे और नीले घटकों का उपयोग करके रंगों का प्रतिनिधित्व करता है। इसे का उपयोग करके परिभाषित किया गया है आरजीबी () फ़ंक्शन जो प्राथमिक लाल, हरे और नीले घटकों (और एक वैकल्पिक अल्फा चैनल) के रूप में इनपुट पैरामीटर स्वीकार करता है। लाल, हरा और नीला मान. के बीच एक पूर्णांक होना चाहिए 0 प्रति 255 (समावेशी), या 0% से 100% तक भिन्न प्रतिशत। दूसरी ओर, अल्फा चैनल 0.0 (पूरी तरह से पारदर्शी) से 1.0 (पूरी तरह से अपारदर्शी) के मूल्यों को स्वीकार करता है। यह 0% (0.0 के समान) और 100% (1.0 के समान) से प्रतिशत मान भी स्वीकार करता है।

/*Syntax*/
रंग: आरजीबी (आरआर, जीजी, बीबी);
रंग: आरजीबीए (आरआर, जीजी, बीबी, ए);

एचएसएल कार्यात्मक संकेतन

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

रंग मान (H) CSS में समर्थित कोण इकाई द्वारा निर्दिष्ट किया जाता है। इसमें शामिल है डिग्री, रेड, ग्रैड, तथा मोड़. संतृप्ति (S) ह्यू से बने अंतिम रंग का प्रतिशत निर्दिष्ट करती है। चमक (एल) घटक ग्रे स्तर को परिभाषित करता है।

/*Syntax*/
रंग: एचएसएल (XXdeg, XX%, XX%);
रंग: एचएसएल (XXटर्न, XX%, XX%);

HTML तत्वों में रंग लागू करना

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

ग्रंथों के लिए रंग संपत्ति

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

बक्से के लिए रंग संपत्ति

जैसा कि आप जानते हैं, वेब पेज पर सब कुछ बॉक्स मॉडल का अनुसरण करता है। इस प्रकार, प्रत्येक तत्व किसी प्रकार की सामग्री और वैकल्पिक पैडिंग, सीमा और मार्जिन क्षेत्र वाला एक बॉक्स है। आप का उपयोग कर सकते हैं पीछे का रंग संपत्ति जब कोई अग्रभूमि सामग्री नहीं है। जब आप किसी टेक्स्ट के कॉलम को अलग करने के लिए एक लाइन ड्रा कर रहे हों, तो आप इसका उपयोग कर सकते हैं स्तंभ-नियम-रंग इसके लिए संपत्ति। वहाँ एक है रूपरेखा रंग रूपरेखा को रंगने के लिए संपत्ति। ध्यान दें कि आउटलाइन बॉर्डर से अलग होती है—यह फ़ोकस इंडिकेटर के रूप में कार्य करता है।

सीमाओं के लिए रंग संपत्ति

किसी भी HTML तत्व की सीमा हो सकती है। आप सेट कर सकते हैं सीमा रंग संपत्ति के रूप में बॉर्डर-शीर्ष-रंग, बॉर्डर-दायां-रंग, सीमा-नीचे-रंग, तथा सीमा-बाएं-रंग संबंधित पक्षों का बॉर्डर रंग सेट करने के लिए। हालांकि, शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करना अच्छा अभ्यास है।

NS सीमा-इनलाइन-शुरू-रंग संपत्ति आपको सीमा के किनारों को रंगने देती है जो शुरुआत के सबसे करीब हैं। दूसरी ओर, सीमा-इनलाइन-अंत-रंग संपत्ति आपको एक बॉक्स के भीतर पाठ की पंक्तियों की शुरुआत के अंत को रंगने देती है। हालांकि यह आपके के आधार पर भिन्न होता है लेखन-मोड, पाठ-अभिविन्यास, तथा दिशा.

रैपिंग अप: रंग और अभिगम्यता

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

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

अपनी रचनात्मक परियोजनाओं को ऊंचा करने के लिए रंग सिद्धांत का उपयोग कैसे करें

सही रंगों का सही तरीके से उपयोग करके आप अपनी रचनात्मक परियोजनाओं को एक नए स्तर पर ले जा सकते हैं।

आगे पढ़िए

लेखक के बारे में