अपने डिज़ाइन के लिए रंग पैलेट कैसे उत्पन्न करें
रंग पहली चीज़ों में से एक है जिसे हम एक साइट, एक एप्लिकेशन या एक डिज़ाइन पर नोटिस करते हैं। एक अच्छी तरह से चुना गया पैलेट एक सुसंगत और पेशेवर रेंडर बनाता है। एक खराब चयनित पैलेट अच्छी सामग्री को भी अस्थिर दिखाता है।
अच्छे रंग चुनने के लिए एक डिज़ाइनर होने की आवश्यकता नहीं है। रंग सिद्धांत विश्वसनीय सूत्र प्रदान करता है।
रंग सामंजस्य मोड
ये रंग पहिये पर रंगों के बीच संबंधों पर आधारित हैं:
पूरक — दो विपरीत रंग (उदाहरण के लिए नीला और नारंगी)। मज़बूत कंट्रास्ट, ऊर्जावान। उन कॉल-टू-एक्शन के लिए आदर्श जो बाहर खड़े होने चाहिए।
अनुरूप — पहिये पर तीन साथ-साथ रंग (उदाहरण के लिए नीला, नीला-हरा, हरा)। सामंजस्यपूर्ण और सुखदायक। पृष्ठभूमि और प्राकृतिक रेंडर के लिए आदर्श।
त्रिकोणीय — पहिये पर तीन समान दूरी वाले रंग (उदाहरण के लिए लाल, पीला, नीला)। जीवंत और संतुलित। चंचल या रचनात्मक डिज़ाइनों के लिए आदर्श।
विभाजित पूरक — एक रंग और इसके पूरक के दो पड़ोसी। पूरक के समान कंट्रास्ट लेकिन कम तनाव के साथ।
मोनोक्रोमैटिक — एक ही रंग के विभिन्न शेड, टिंट और टोन। हमेशा सामंजस्यपूर्ण, लेकिन अधिक उपयोग करने पर दृश्य रुचि की कमी हो सकती है।
एक पैलेट कैसे उत्पन्न करें
- एक सामंजस्य मोड चुनें — रंगों के बीच संबंध तय करने के लिए यादृच्छिक, अनुरूप, पूरक, त्रिकोणीय या एक और मोड चुनें।
- आपको पसंद आने वाले रंग लॉक करें — जब आप एक ऐसा रंग पाते हैं जिसे आप रखना चाहते हैं, तो इसे लॉक करें और अन्य को फिर से उत्पन्न करें जब तक कि पूरा पैलेट सामंजस्यपूर्ण हो।
- निर्यात करें — HEX कोड, CSS चर कॉपी करें, या पैलेट को एक छवि के रूप में सहेजें।
एक उपयोगी पैलेट का निर्माण
एक पैलेट केवल सुंदर रंगों का एक समूह नहीं है। एक वास्तविक परियोजना के लिए, आपको चाहिए:
- प्राथमिक रंग — आपका ब्रांड रंग, बटन, लिंक और मुख्य UI तत्वों के लिए उपयोग किया जाता है
- द्वितीयक रंग — प्राथमिक का समर्थन करता है, कम प्रमुख इंटरैक्टिव तत्वों के लिए उपयोग किया जाता है
- तटस्थ रंग — टेक्स्ट, पृष्ठभूमि और बॉर्डर के लिए भूरे या मौन टोन (आपके इंटरफ़ेस का अधिकांश भाग)
- एक्सेंट रंग — हाइलाइट करने, सूचित करने या एक महत्वपूर्ण स्थिति का संकेत देने के लिए संयम से उपयोग किया जाता है
- त्रुटि/सफलता रंग — त्रुटियों के लिए लाल, सफलता के लिए हरा (आमतौर पर पैलेट से अलग)
सुझाव
- एक रंग से शुरू करें — एक ऐसा प्राथमिक रंग चुनें जो आपको पसंद हो, फिर इसका पूरक करने वाले रंग खोजने के लिए एक सामंजस्य मोड का उपयोग करें। यह 5 रंगों को स्वतंत्र रूप से चुनने की कोशिश करने से अधिक सरल है।
- वास्तविक सामग्री पर परीक्षण करें — एक पैलेट जो स्वॉच में अच्छा दिखता है वह वास्तविक टेक्स्ट, बटन और पृष्ठभूमि पर लागू होने पर काम नहीं कर सकता। हमेशा वास्तविक इंटरफ़ेस के साथ परीक्षण करें।
- कंट्रास्ट जाँचें — यदि टेक्स्ट पठनीय नहीं है तो सुंदर रंग बेकार हैं। WCAG का सम्मान करने के लिए अपने टेक्स्ट/पृष्ठभूमि संयोजनों को एक कंट्रास्ट चेकर में पास करें (सामान्य टेक्स्ट के लिए 4.5 : 1 अनुपात)।
- कम, बेहतर — 3 अच्छी तरह से चुने गए रंगों वाला एक डिज़ाइन 7 के साथ एक डिज़ाइन से अधिक पेशेवर दिखता है। अपने इंटरफ़ेस के अधिकांश भाग के लिए तटस्थ का उपयोग करें और जीवंत रंगों को आवश्यक के लिए आरक्षित करें।
अक्सर पूछे जाने वाले प्रश्न
एक पैलेट में कितने रंग होने चाहिए?
अधिकांश डिज़ाइन 3 से 5 रंगों के साथ सबसे अच्छे काम करते हैं — एक प्राथमिक रंग, एक द्वितीयक, एक तटस्थ और एक या दो एक्सेंट रंग। इससे अधिक, डिज़ाइन अराजक दिख सकता है।
रंग सामंजस्य क्या है?
रंग सामंजस्य उन संयोजनों को संदर्भित करता है जो देखने में सुखद हैं, रंग पहिये पर रंगों की स्थितियों पर आधारित। सामान्य सामंजस्य पूरक (विपरीत रंग), अनुरूप (आसन्न रंग) और त्रिकोणीय (तीन समान दूरी वाले रंग) हैं।
मैं कैसे सत्यापित करूँ कि मेरे रंग सुलभ हैं?
अपने टेक्स्ट और पृष्ठभूमि रंगों की WCAG अभिगम्यता मानकों को पूरा करने की पुष्टि करने के लिए एक कंट्रास्ट चेकर का उपयोग करें। सामान्य टेक्स्ट के लिए न्यूनतम अनुपात 4.5 : 1 (स्तर AA) है।
क्या मैं अपने पैलेट को निर्यात कर सकता हूँ?
हाँ। आप रंगों को HEX कोड, CSS चर के रूप में कॉपी कर सकते हैं, या Figma, Canva, Sketch आदि में उपयोग करने के लिए पैलेट को एक छवि के रूप में निर्यात कर सकते हैं।