क्या ग्रीन-येलो-रेड कलर स्कीम स्थापित करने का एक अच्छा तरीका है?


12

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

तो, क्या कोई ऐसा तरीका है जो उपयोगकर्ताओं को अंधा किए बिना एक रंग योजना में हरे, पीले और लाल को जोड़ सकता है?

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

यहाँ मेरा उदाहरण है (अक्षर के चारों ओर नारंगी और भूरे रंग के क्षेत्रों को अनदेखा करें, वे असंबंधित हैं)।

स्क्रीनशॉट

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

मुख्य रूप से एक प्रोग्रामर होने के नाते, जैसा कि एक ग्राफिक / वेब डिजाइनर के विपरीत, रंग सिद्धांत और उपयोगकर्ता अनुभव के बारे में मेरी समझ सीमित है।

इस पर एक बिंदु रखने के लिए, मेरा सवाल यह है कि उपयोगकर्ता अनुभव से अलग किए बिना कोई पारंपरिक रूप से क्लैशिंग रंग योजना कैसे स्थापित कर सकता है?

(यदि मेरा प्रश्न अनुपयुक्त है, तो मैं इसे हटा दूंगा, मुझे यकीन नहीं था कि यह कहाँ पूछना है, यह सबसे उचित लगा)


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

जवाबों:


9

हरे, पीले और लाल एक साथ नहीं जा सकते? इथियोपियावासियों का बहुत अपमान किया जाना चाहिए। हरे, पीले और लाल चित्रों के लिए Google, और मुझे लगता है कि आपको कई आकर्षक उदाहरण मिलते हैं (बदसूरत लोगों के साथ)।

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

आकार-संतृप्ति व्यापार-बंद

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

रिक्ति

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

पैटर्न

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

प्रयोज्य

आपका प्रश्न सौंदर्यशास्त्र की चिंता करता है, लेकिन रंग कोडिंग पसंद के प्रमुख प्रयोज्य निहितार्थ भी हैं। आपका रंग चयन होना चाहिए:

  • एक-दूसरे से दृष्टिगत रूप से भिन्न, खासकर अगर अपमानित दृश्य परिस्थितियों के तहत उपयोग किया जाता है (जैसे, सूरज की रोशनी में मोबाइल पर)।

  • पृष्ठभूमि (यदि इसका अग्रभाग), या अग्रभूमि (यदि इसकी पृष्ठभूमि है) के साथ अच्छा विपरीत प्रदान करें। उदाहरण के लिए, लाल पर काला पाठ इतना अच्छा नहीं है। आम तौर पर, अग्रभूमि और पृष्ठभूमि को चमक के विभिन्न स्तरों की आवश्यकता होती है।

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

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

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

एक परियोजना में मैंने काम किया, मेरे साथ आए रंग # E00000, # FF8400, और # C0FFE0 (बहुत पीला पीला नहीं था, लेकिन फिर भी काम किया)।

गहरे लाल, नारंगी, हल्के हरे हरे

मेरे पास रंग कोड चुनने पर अधिक है, जिसमें रंग की गणना करने के तरीके और ब्रैकिंग कलर कोड के विपरीत चमक शामिल है ।


2
तुम्हें पता है, अगर तुमने अभी तक उस नीले-हरे को थोड़ा धुंधला बना दिया है, तो तुम #C0FFEEहेक्स कोड के लिए हो सकते थे । :)
इल्मरी करोनें

6

वास्तविक RGY रंगों के बजाय पेस्टल का उपयोग करने का प्रयास करें। कम संतृप्ति के साथ, जानकारी को देखना आसान होना चाहिए।

पेस्टल रेड हेक्स: # F7977A RGB: 246-150-121

पेस्टल ग्रीन हेक्स: # 82CA9D RGB: 130-202-156

पेस्टल येलो हेक्स: # FFF79A RGB: 255-247-153


1

मैं इन तीन रंगों के साथ तीन प्राथमिक चुनौतियां देखता हूं।

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

मैं केवल कुछ विकल्पों के बारे में सोच सकता हूं, यह मानते हुए कि आप संतृप्त रंग के बड़े क्षेत्रों की पॉप कला को पसंद नहीं करते हैं। ये दोनों रंगों को फीका करके संतृप्ति के प्रभाव को कम करते हैं।

  • सेल पृष्ठभूमि में एक ढाल का उपयोग करें।
  • टेक्स्ट शैडो के रूप में रंगों को लागू करें। छाया को पाठ को स्पष्ट रूप से उजागर करने के लिए उचित मात्रा में धब्बा की आवश्यकता होगी।

यहां एक और चुनौती है जिसका सौंदर्यशास्त्र से कोई लेना-देना नहीं है। लाल अन्य दो रंगों को पछाड़ रहा है और परिणाम पृष्ठ पर नकारात्मक निशान की ओर ध्यान आकर्षित कर रहा है। यदि यह आपका लक्ष्य है, तो आप अच्छे हैं। यदि आप चाहते हैं कि आपका चार्ट एक सकारात्मक प्रकृति का हो, तो आप संघर्ष करेंगे।


1

"रेड", "येलो", "ग्रीन" व्याख्या के लिए बहुत जगह छोड़ते हैं इसलिए आपके पास एक संयोजन खोजने का अच्छा मौका है जो अच्छी तरह से काम करता है।

आपके सौंदर्यशास्त्र की समस्या के लिए मैंने आपका "लाल" और "हरा" रंग लिया और इसे रंगीन ब्लेंडर में डाल दिया । फिर मैंने ब्लेंडिंग के लिए कलर मॉडल के रूप में pHSL को चुना। इससे पहले से ही रंग सेट में सुधार हुआ।

आगे मैंने छाप को और बेहतर बनाने के लिए अलग-अलग "रेड्स" और "ग्रीन्स" की कोशिश की। थोड़ा सा गहरा, अधिक संतृप्त / मजबूत लाल। एक हरे रंग की थोड़ी अधिक पीली, और अधिक संतृप्ति।

ठीक है, बुरा नहीं है लेकिन अभी भी तैयार नहीं है।

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

मैंने फ़ोटोशॉप में अपने संयोजन की कोशिश की और महसूस किया कि सफेद (रिक्ति) सीमाओं ने एक अच्छा प्रभाव डाला। इसलिए मैं प्रविष्टियों की प्रत्येक पंक्ति को विभाजित करने के लिए कोशिकाओं के लिए और अधिकतम एक पतली काली रेखा पर सफेद रिक्ति की सिफारिश करूंगा।

ऊपर उल्लिखित टूल का उपयोग करके आप एक ऐसा रंग संयोजन पा सकते हैं जो आपके व्यक्तिगत स्वाद या आवश्यकताओं को और भी बेहतर तरीके से पूरा करता है (उदाहरण के लिए हरे रंग के लिए उच्च संतृप्ति) ...


0

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

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

हालाँकि, यदि आप उपयोगकर्ता को यह समझने की जल्दी देना चाहते हैं कि आप क्या करने की कोशिश कर रहे हैं, तो मैं सुझाव देता हूं कि मैं कोशिकाओं को खाली (हल्का रंग) छोड़ दूं और बस एक छोटा प्रतीक जोड़ दूंगा जो कि स्थिति (वर्ग या 5%) या सेल से भरा संकेत देता है रंग)

इस तरह से उपयोगकर्ता पाठ को पढ़ सकता है और उस श्रेणी को देख सकता है जो काफी जल्दी से संबंधित है।

हालाँकि, यदि आप रंगों को संयोजित करना चाहते हैं, तो मेरा सुझाव है कि आप "कलर इंडेक्स" पुस्तक खरीदें। वहां आपको हजार संयोजन मिलेंगे जो एक साथ अच्छी तरह से चलेंगे और आप कुछ समय खुद को बचाएंगे।


0

यदि आपको रंगों के सही शेड्स मिलते हैं, तो सुनिश्चित करें कि आप एक साथ लाल, पीले और हरे रंग का उपयोग कर सकते हैं।

मैं इन साइटों में से कुछ को देखने की सलाह देता हूं जहां आप कुछ ठीक संयोजन पा सकते हैं:

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search

या उनमें से कुछ खुद बनाने की कोशिश करें:

http://colorschemedesigner.com/

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

उचित रंगों का चयन करते समय पाठ के विपरीत और दृश्यता के बारे में सोचना न भूलें।

मैं आपको हल्के पीले रंग का उपयोग करने की सलाह दूंगा क्योंकि आप इसे काफी तटस्थ रंग के रूप में उपयोग करते हैं।


0

यहां तीन योजनाएं हैं, आशा है कि आप इसे पसंद करेंगे।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.