ब्रांड रंगों के बीच 10-स्टेप ग्रेडिएंट बनाएं

1. दो ब्रांड रंगों का ऑडिट करें

संदर्भ के बिना आकर्षक अंतिम बिंदुओं को चुनने के बजाय दो स्थापित रंगों से शुरू करें। रंग A ब्रांड का प्राथमिक रंग हो सकता है, जबकि रंग B एक सहायक या अभियान रंग हो सकता है। रिकॉर्ड करें कि प्रत्येक वर्तमान में कहां दिखाई देता है और यह क्या संचार करता है।

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

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

यह ऑडिट एक सामान्य समस्या को रोकता है: एक पुरानी लोगो रंग, एक अनुमोदित अभियान मान या संपीड़ित स्क्रीनशॉट से कॉपी किए गए कोड से एक पॉलिश ग्रेडिएंट बनाना।

2. वैध HEX अंतिम बिंदु तैयार करें

रंग मिक्सर HEX मानों को अपने अंतिम बिंदुओं के रूप में उपयोग करता है। प्रत्येक छह-अंकीय HEX मान एक हैश प्रतीक से शुरू होता है और लाल, हरी और नीली का प्रतिनिधित्व करने वाले जोड़ी होते हैं। उदाहरण के लिए, #2563EB एक मजबूत नीला है और #E11D48 एक जीवंत लाल-गुलाबी है।

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

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

अंतिम बिंदुओं को अस्थायी कार्य नाम दें जैसे brand-start और brand-end। उन्हें "बाएं" और "दाएं" नाम देने से बचें क्योंकि ग्रेडिएंट दिशा बाद में बदल सकती है। रंग अपनी पहचान बनाए रखेंगे भले ही ग्रेडिएंट लंबवत, विकर्ण या रेडियल हो जाए।

3. एक दस-स्टेप ग्रेडिएंट बनाएं

रंग मिक्सर खोलें, रंग A और रंग B दर्ज करें और चरणों की संख्या दस पर सेट करें। परिणाम बनाएं और प्रत्येक प्रदर्शित मान को अपने मूल क्रम में एक कार्य दस्तावेज़ में कॉपी करें।

स्टॉप का नाम देने से पहले, पूर्ण संक्रमण को एक पट्टी के रूप में देखें। क्या यह निरंतर लगता है, या एक क्षेत्र अचानक कूद प्रतीत होता है? क्या बीच में बेकार हो गया? क्या एक अंतिम बिंदु दूसरे की तुलना में दृश्य रूप से बहुत अधिक शक्तिशाली है?

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

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

4. मध्य बिंदु और संक्रमण पथ का निरीक्षण करें

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

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

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

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

5. कमजोर या अस्पष्ट स्टॉप हटाएं

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

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

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

हर असामान्य संक्रमण को "मरम्मत" न करें। दो ब्रांड रंगों को मिलाने का उद्देश्य यह पता लगाना है कि वे कैसे संबंधित हैं। कभी-कभी सही निष्कर्ष यह है कि उन्हें एक निरंतर ग्रेडिएंट नहीं बनाना चाहिए। वे अलग ठोस रंगों के साथ उनके बीच एक तटस्थ संक्रमण के रूप में बेहतर काम कर सकते हैं।

6. एक अनुमानित नामकरण प्रणाली बनाएं

एक बार स्टॉप की समीक्षा के बाद, स्थिर नाम निर्दिष्ट करें। सबसे सरल प्रणाली रंगों को उनकी स्थिति के अनुसार क्रमांकित करती है, जैसे blend-01 से blend-10 तक। यह अनुक्रम को संरक्षित करता है लेकिन यह वर्णन नहीं करता है कि प्रत्येक मान का उपयोग कैसे किया जाना चाहिए।

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

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

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

7. उपयोगी डिज़ाइन भूमिकाएं निर्दिष्ट करें

एक ग्रेडिएंट अनुक्रम मूल्यवान हो जाता है जब इसके स्टॉप को लगातार पुनः उपयोग किया जा सकता है। परियोजना के बजाय प्रत्येक रंग के लिए एक कृत्रिम उपयोग खोजने के आधार पर भूमिकाएं निर्दिष्ट करें।

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

एक निरंतर ब्रांड ग्रेडिएंट का उपयोग करने से बचें जब तक कि अनुक्रम पहचाना जा सकने वाला और सार्थक न रहे। उपयोगकर्ताओं को मानों के बीच अंतर को समझने में सक्षम होना चाहिए। जब ग्रेडिएंट सजावटी है, तो अधिक स्वतंत्रता है; जब यह जानकारी संचार करता है, तो स्पष्टता को प्राथमिकता दी जाती है।

8. ग्रेडिएंट दिशा और टाइपोग्राफी का परीक्षण करें

दिशा बदलने पर एक ही रंग विभिन्न छाप बना सकते हैं। एक क्षैतिज ग्रेडिएंट एक पृष्ठ पर गति का सुझाव दे सकता है। एक लंबवत ग्रेडिएंट गहराई बना सकता है। एक विकर्ण दिशा अक्सर अधिक ऊर्जावान महसूस होती है, जबकि एक रेडियल ग्रेडिएंट एक केंद्रीय बिंदु की ओर ध्यान आकर्षित करता है।

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

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

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

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

9. CSS में ग्रेडिएंट को लागू करें

एक बार दिशा और स्टॉप अनुमोदित हो जाने के बाद, CSS का उपयोग करके वेब संस्करण बनाएं। MDN linear-gradient() को एक CSS फ़ंक्शन के रूप में परिभाषित करता है जो एक सीधी रेखा के साथ दो या अधिक रंगों के बीच एक प्रगतिशील संक्रमण उत्पन्न करता है।

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

ठोस background-color एक फॉलबैक प्रदान करता है। चुने हुए ग्रेडिएंट स्टॉप जानबूझकर रखे जाते हैं न कि सभी दस मानों को स्वचालित रूप से जोड़ने के बजाय। CSS में कम स्टॉप का उपयोग करना दस-स्टेप अन्वेषण को अमान्य नहीं करता है; यह दर्शाता है कि समीक्षा प्रक्रिया ने अंतिम प्रभाव के लिए आवश्यक मान की पहचान की है।

CSS-Tricks दिशाओं, रंग स्टॉप, रेडियल ग्रेडिएंट, दोहराए गए ग्रेडिएंट और संबंधित कार्यान्वयन पैटर्न को कवर करने वाली एक विस्तृत CSS ग्रेडिएंट गाइड प्रदान करता है।

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

10. प्रणाली का परीक्षण, दस्तावेज़ और निर्यात करें

एक ग्रेडिएंट तब तक समाप्त नहीं होता है जब तक यह एक मॉनिटर पर आकर्षक न दिखे। इसे बड़े और छोटे आकार में, पाठ के साथ और बिना, हल्की और गहरी आसपास की सतहों पर और निम्न-गुणवत्ता वाले डिस्प्ले पर परीक्षण करें।

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

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

यदि प्रत्येक विनिर्देश पृष्ठ JPG के रूप में तैयार किया जाता है, तो JPG से PDF कनवर्टर उन्हें एक आदेशित दस्तावेज़ में संयोजित कर सकता है। निर्यात की गई PDF खोलें और ग्राहक या विकास टीम के साथ साझा करने से पहले रंगों की मूल डिज़ाइन के साथ तुलना करें।