सीएसएस में रंगों को परिभाषित करने के 4 तरीके

चाबी छीनना

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

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

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

1. रंग नामों का उपयोग करना

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

नामित रंगों का उपयोग करना सीधा है: आप "लाल" जैसे रंग का नाम चुनते हैं और इसे सीएसएस प्रॉपर्टी में उपयोग करते हैं जो रंग मानों का समर्थन करता है। ऐसा गुणों में स्पष्ट शामिल है रंग और पृष्ठभूमि का रंग, लेकिन सीमा रंग, रूपरेखा रंग, और पाठ की छाया, दूसरों के बीच में।

रंग नाम तब उपयोगी होते हैं जब आपको प्रोटोटाइप के लिए अस्थायी रंग की आवश्यकता होती है या आप अपने कोड को पढ़ने में आसान रखना चाहते हैं। यहाँ वाक्यविन्यास है:

color_property: color_name;

इस मामले में, बस प्रतिस्थापित करें रंग_नाम उस विशिष्ट रंग के साथ जिसका आप उपयोग करना चाहते हैं। उदाहरण के लिए, यदि आप टेक्स्ट सेट करना चाहते हैं रंग एक पैराग्राफ के लिए लाल, लिखना:

p {
color: red;
}

इससे आपके अनुच्छेदों को लाल टेक्स्ट रंग मिल जाएगा:

पेशेवरों: इन्हें आपके सीएसएस कोड में पढ़ना और समझना आसान है। वे शुरुआती-अनुकूल हैं, सभी ब्राउज़रों पर अच्छा काम करते हैं, और त्वरित डिज़ाइन विचारों के लिए उपयोगी हैं।

दोष: उनके पास सीमित विकल्प हैं और वे आपके लिए आवश्यक सटीक शेड्स प्रदान नहीं कर सकते हैं, जिससे डिज़ाइन रचनात्मकता सीमित हो जाती है। इसके अतिरिक्त, वे हमेशा सख्त पहुंच आवश्यकताओं को पूरा नहीं कर सकते हैं, और पुराने सिस्टम में समर्थन भिन्न हो सकता है।

2. हेक्साडेसिमल रंग कोड

हेक्साडेसिमल रंग कोड, जिन्हें अक्सर "हेक्स कोड" कहा जाता है, वेब डिज़ाइन में रंग निर्दिष्ट करने के सबसे सामान्य तरीके हैं। इन कोडों में संख्याओं और अक्षरों (0-9, ए-एफ) के छह-वर्ण संयोजन होते हैं, जो एक रंग में लाल, हरे और नीले (आरजीबी) घटकों के मिश्रण का प्रतिनिधित्व करते हैं।

हालाँकि उनका उपयोग करना आसान है, लेकिन यह समझना कि वे कैसे काम करते हैं चुनौतीपूर्ण हो सकता है। आप ले सकते हैं हेक्स कोड में गहराई से उतरें बेहतर ढंग से समझने के लिए. आप सीएसएस में हेक्स कोड का उपयोग कैसे कर सकते हैं इसका एक बुनियादी उदाहरण यहां दिया गया है:

color: #RRGGBB;

इस प्रारूप में, आरआर, जीजी और बीबी क्रमशः लाल, हरे और नीले घटकों का प्रतिनिधित्व करते हैं। प्रत्येक घटक 00 (कोई तीव्रता नहीं) से एफएफ (अधिकतम तीव्रता) तक हो सकता है। उदाहरण के लिए, यदि आप किसी वेबसाइट हेडर के पृष्ठभूमि रंग को नीले रंग की एक विशिष्ट छाया में सेट करना चाहते हैं, तो आप इस तरह एक हेक्स कोड का उपयोग कर सकते हैं:

header {
background-color: #336699;
}

इससे गहरा नीला रंग उत्पन्न होगा:

​​​​​

यदि तीन घटकों में से प्रत्येक एक ही वर्ण को दो बार दोहराता है तो आप शॉर्टहैंड का भी उपयोग कर सकते हैं। आप उपरोक्त उदाहरण को इस प्रकार लिख सकते हैं:

header {
background-color: #369;
}

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

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

3. आरजीबी और आरजीबीए रंग मान

हेक्साडेसिमल कोड की तरह, यह प्रारूप आपको उनके लाल, हरे और नीले घटकों द्वारा रंग निर्दिष्ट करने देता है। हालाँकि, इस बार आप मित्रवत पूर्णांकों का उपयोग कर सकते हैं।

आरजीबी रंग मान

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

यहाँ वाक्यविन्यास है:

rgb(red_value, green_value, blue_value);

प्रतिस्थापित करें red_value, हरा_मूल्य, और नीला_मूल्य उनके संबंधित संख्यात्मक मानों के साथ। उदाहरण के लिए, आप इस छवि में दिखाए गए जैसे सफेद, काले और लाल रंग प्राप्त कर सकते हैं:

जब आप सभी तीन रंग चैनलों (लाल, हरा और नीला) को उनके अधिकतम मान 255 पर सेट करते हैं, तो इसके परिणामस्वरूप प्रत्येक चैनल के लिए उच्चतम तीव्रता होती है, जिससे रंग सफेद बनता है:

.white-box {
 color: rgb(255, 255, 255);
}

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

.black-box {
color: rgb(0, 0, 0);
}

लाल चैनल को उसके अधिकतम मान 255 पर सेट करने से, जबकि अन्य चैनलों को उनके न्यूनतम मान 0 पर रखने से, रंग लाल उत्पन्न होता है:

.red-box {
color: rgb(255, 0, 0); 
}

आरजीबीए रंग मान

RGBA, RGB की तरह ही कार्य करता है, एकमात्र अंतर अल्फा मान को शामिल करने का है। आरजीबीए में "ए" का मतलब अल्फा है, जो चुने हुए रंग के लिए पारदर्शिता या अस्पष्टता का स्तर निर्धारित करता है। 0 का मान पूर्ण पारदर्शिता का प्रतिनिधित्व करता है, जिससे रंग पूरी तरह से अदृश्य हो जाता है, जबकि 1 का मान पूर्ण अस्पष्टता का प्रतिनिधित्व करता है, जिससे रंग पूरी तरह से दृश्यमान हो जाता है।

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

color: rgba(red_value, green_value, blue_value, alpha_value);

यहाँ, red_value, हरा_मूल्य, और नीला_मूल्य आरजीबी के रूप में रंगीन चैनलों का प्रतिनिधित्व करें, और अल्फ़ा_वैल्यू पारदर्शिता के स्तर को निर्दिष्ट करता है।

div {
background-color: rgba(0, 128, 0, 0.5);
}

इस उदाहरण में, 0.5 का अल्फा मान हरे रंग को 50% पारदर्शिता प्रदान करता है, जिससे इसके नीचे की सामग्री दिखाई जा सकती है:

पेशेवरों: आरजीबी और आरजीबीए आपको रंगों को सटीक रूप से नियंत्रित करने देते हैं, जिससे सटीक रंगों को चुनना और आकर्षक डिजाइन तैयार करना आसान हो जाता है। वे विभिन्न वेब ब्राउज़रों के साथ संगत हैं, जिससे यह सुनिश्चित होता है कि आपके चुने हुए रंग एक जैसे दिखें।

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

4. एचएसएल और एचएसएलए रंग मान

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

रंग: यह रंग चक्र पर 0 से 360 तक की डिग्री का उपयोग करके रंग का प्रतिनिधित्व करता है। इसे एक वृत्त पर एक बिंदु चुनने के रूप में कल्पना करें, जहां प्रत्येक डिग्री एक अलग रंग से मेल खाती है। उदाहरण के लिए, लाल के लिए 0 और 360 डिग्री, हरे के लिए 120 डिग्री और नीले के लिए 240 डिग्री।

परिपूर्णता: संतृप्ति रंग की जीवंतता या तीव्रता को निर्धारित करती है। यह ग्रे के साथ रंग के संबंध को परिभाषित करता है, जिसमें 0% पूरी तरह से ग्रेस्केल (असंतृप्त) होता है और 100% पूरी तरह से संतृप्त (जीवंत और शुद्ध) होता है।

लपट: हल्कापन दर्शाता है कि रंग कितना चमकीला या गहरा दिखाई देता है। यह काले (0%) और सफेद (100%) के बीच स्पेक्ट्रम पर रंग की स्थिति से संबंधित है। 50% का मान सामान्य रंग का प्रतिनिधित्व करता है, जबकि 50% से नीचे का मान रंग को गहरा कर देता है, और 50% से ऊपर का मान इसे हल्का कर देता है।

एचएसएल के अलावा, एचएसएलए है, जहां "ए" का अर्थ "अल्फा" है। यह आरजीबीए में "ए" के समान है और पारदर्शिता का प्रतीक है।

यहाँ वाक्यविन्यास है:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

इस वाक्यविन्यास का उपयोग करके, प्रतिस्थापित करें रंग_मूल्य, संतृप्ति_प्रतिशत, और हल्कापन_प्रतिशत प्रत्येक घटक के लिए आपके इच्छित विशिष्ट मानों के साथ। उदाहरण के लिए:

div {
background-color: hsl(120, 100%, 50%);
}

इस उदाहरण में, a का पृष्ठभूमि रंग डिव एचएसएल मानों का उपयोग करके तत्व को जीवंत हरे रंग में सेट किया गया है। 120 रंग (हरा) का प्रतिनिधित्व करता है, 100% पूर्ण संतृप्ति के लिए है, और 50% हल्केपन को संतुलित स्तर पर सेट करता है।

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

दोष: एचएसएल सीखने में शामिल है रंग विज्ञान को समझना, जैसे कि रंग और संतृप्ति, जो परिचित आरजीबी रंगों की तुलना में अधिक चुनौतीपूर्ण हो सकते हैं।

सीएसएस रंगों की शक्ति को अपनाना

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

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