कलर पैलेट जेनरेटर

एक अच्छा कलर पैलेट पूरे डिज़ाइन को क्यों संभालता है

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

अच्छी ख़बर यह है कि एक ठोस योजना तक पहुंचने के लिए आपको ललित-कला की डिग्री की ज़रूरत नहीं। आपको रंग सिद्धांत के मुट्ठी भर नियम और विचार आज़माने का एक तेज़ तरीक़ा चाहिए। जनरेटर ठीक इसी के लिए है: यह आपको दर्जनों संयोजनों में उतने ही समय में घूमने देता है जितने में पहले आप एक पर माथापच्ची करते थे।

रंग सिद्धांत, शब्दजाल को छोड़कर

ज़्यादातर सामंजस्य एक सीधे विचार से आते हैं: रंग एक-दूसरे के सापेक्ष पहिये पर कहां बैठते हैं। चार पैटर्न सीख लीजिए और आप लगभग किसी भी योजना को पढ़ या बना सकते हैं।

• पूरक (Complementary) दो ऐसे रंग इस्तेमाल करता है जो एक-दूसरे के ठीक सामने होते हैं, जैसे नीला और नारंगी। यह उच्च-ऊर्जा वाला और ध्यान खींचने के लिए शानदार है, हालांकि दोनों की अति ध्यान के लिए आपस में लड़ती है, इसलिए एक को आगे रखें और दूसरे को एक उभार के रूप में इस्तेमाल करें।
• समान (Analogous) तीन ऐसे रंग इस्तेमाल करता है जो एक-दूसरे के बगल में बैठते हैं, जैसे लाल, नारंगी, और पीला। यह कम-कंट्रास्ट वाला, शांत, और वैसा सामंजस्य है जो प्रकृति में चारों ओर दिखता है। आंखों के लिए सहज, पर आपको कहीं कंट्रास्ट जोड़ना पड़ सकता है ताकि चीज़ें फीकी न पड़ जाएं।
• त्रिकोणीय (Triadic) तीन ऐसे रंग इस्तेमाल करता है जो पहिये के चारों ओर बराबर दूरी पर हों, जैसे लाल, पीला, और नीला। चमकीला और संतुलित, यह तब सबसे अच्छा काम करता है जब एक रंग हावी हो और बाक़ी दो सहायक भूमिका निभाएं।
• एकवर्णी (Monochromatic) एक ही रंगत पर टिका रहता है और उसकी हल्केपन व संतृप्ति को बदलता है। यह सबसे भरोसेमंद योजना है, साफ़ और एकजुट, और एक अच्छा सहारा जब और कुछ ठीक न लगे।

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

HEX, RGB, और HSL सरल शब्दों में

आप जो भी रंग कॉपी करते हैं वह कुछ अलग-अलग नोटेशन में आता है, और वे सब एक ही चीज़ का अलग-अलग ढंग से वर्णन करते हैं।

HEX वह छह-अक्षरीय कोड है जो आप सबसे ज़्यादा देखते हैं, जैसे #3A7BD5। यह बस लाल, हरा, और नीला एक स्ट्रिंग में पैक किए हुए हैं, हर एक दो अक्षर। यह सघन है और इसे ही आप CSS या किसी डिज़ाइन टूल में चिपकाएंगे।

RGB उन्हीं तीन चैनलों को 0 से 255 तक की संख्याओं के रूप में लिख देता है, जैसे rgb(58, 123, 213)। वही रंग, पढ़ने में अधिक सहज, और तब काम का जब आपको पारदर्शिता के लिए अल्फ़ा चैनल चाहिए हो।

HSL रंग का वर्णन उस तरह करता है जैसे लोग वाकई सोचते हैं: रंगत (कौन-सा रंग, पहिये के चारों ओर 0 से 360 डिग्री), संतृप्ति (कितना चटक), और हल्कापन (कितना उजला)। हाथ से संवारने के लिए यह सबसे आसान फ़ॉर्मेट है, क्योंकि हल्कापन या संतृप्ति को ज़रा-सा खिसकाने पर ठीक वही होता है जिसकी आप उम्मीद करते हैं, बिना किसी अंदाज़े के। अगर कभी आपको फ़ॉर्मेट के बीच जाना हो, तो एक त्वरित HEX से RGB रूपांतरण इसे आसान बना देता है।

कंट्रास्ट और सुलभता को न भूलें

एक पैलेट शानदार दिख सकता है और फिर भी उसी पल नाकाम हो सकता है जब कोई उस पर पाठ पढ़ने की कोशिश करे। कंट्रास्ट वही जगह है जहां सुंदरता उपयोगिता से मिलती है। Web Content Accessibility Guidelines एक साफ़ मानदंड तय करते हैं: सामान्य बॉडी पाठ को अपनी पृष्ठभूमि के मुक़ाबले कम से कम 4.5:1 का कंट्रास्ट अनुपात छूना चाहिए, और बड़े पाठ को कम से कम 3:1। यह लालफ़ीताशाही नहीं है, यह उस पाठक और इस पाठक के बीच का फ़र्क़ है जो आपके पेज पर सरसराता हुआ निकल जाता है और जो आंखें मूंदकर देखता है, हार मानता है, और चला जाता है।

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

एक व्यावहारिक कार्यप्रवाह

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

एक बार कोई उम्मीदवार मिल जाए, तो भूमिकाएं तय करें। पृष्ठभूमि और बड़े क्षेत्रों के लिए एक प्रमुख रंग चुनें, संरचना के लिए एक द्वितीयक, और उन हिस्सों के लिए एक चटक उभार जिन्हें उभरने की ज़रूरत है। एक ढीला 60-30-10 बंटवारा, प्रमुख से द्वितीयक से उभार, चीज़ों को कठोर लगे बिना संतुलित रखता है। फिर हर पाठ जोड़ी पर कंट्रास्ट जांचें, हेक्स कोड कॉपी करें, और काम पूरा। जो काम करते हैं उन्हें सहेज लें, क्योंकि एक परियोजना के लिए जो पैलेट आपने सही किया वह अक्सर अगली का बीज होता है। जब आप बनाते रहने को तैयार हों, तो हमारे बाक़ी सभी जनरेटर संग्रह बाक़ी हिस्से संभाल सकते हैं।

अक्सर पूछे जाने वाले प्रश्न