रंग योजना पीढ़ी - सिद्धांत और एल्गोरिदम [बंद]


28

मैं चार्ट और आरेख तैयार कर रहा हूं और मैं रंग योजनाओं और एल्गोरिथम उदाहरणों पर कुछ सिद्धांत खोज रहा हूं।

उदाहरण प्रश्न:

  • पूरक या अनुरूप रंग कैसे उत्पन्न करें?
  • पस्टेल, ठंडा और गर्म रंग कैसे उत्पन्न करें?
  • किसी भी यादृच्छिक लेकिन अलग-अलग रंगों की संख्या कैसे उत्पन्न करें?
  • हेक्स ट्रिपलेट (वेब ​​रंग) में सभी का अनुवाद कैसे करें?

मेरा कार्यान्वयन AS3 में होगा लेकिन छद्मकोड में किसी भी उदाहरण का स्वागत है।


मैंने केवल इस बात की पुष्टि करने के लिए अधिक शोध और प्रयोग किए कि वास्तव में किसी रंग की व्यक्तिपरक धारणा क्या होती है, परावर्तित प्रकाश की भौतिक संपत्ति नहीं। मुंसेल कलर सिस्टम प्रमुख है। हालाँकि यह अफ़सोस की बात है कि मैं बाउंटी becuase को विभाजित नहीं कर सकता @Steven Jeuris ने मुझे Colorjizz और Mojocolor पुस्तकालयों के लिंक के साथ बहुत मदद की। मदद के लिए सभी को धन्यवाद।
daniel.sedlacek

दिलचस्प जवाबों के साथ मजबूत प्रासंगिक स्टैक ओवरफ्लो प्रश्न: " एन स्वचालित रूप से" अलग "रंग कैसे उत्पन्न करें? "
एलेक्सी पोपकोव

Gamedev से एक और प्रासंगिक सवाल, दिलचस्प जवाब के साथ: क्या 10 खिलाड़ियों के लिए रंगों का एक इष्टतम सेट है?
17

जवाबों:


15

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

वह जो कुछ सलाह देता है, उसका पहला बिट यह स्पष्ट तथ्य है कि जोत और संतृप्ति को चुनने की नींव रखता है:

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

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

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

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

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

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

संपादित करें: मैं इस क्षेत्र में अतिरिक्त सहायक लिंक जोड़ूंगा क्योंकि मैं उन्हें ढूंढता हूं।

  1. Colors.pdf के लिए इंटरएक्टिव जेनेटिक एल्गोरिथम
  2. एक अवधारणात्मक रंग विभाजन एल्गोरिथ्म। पीडीएफ
  3. ग्रेट वेब Design.html के लिए रंगों और रंग योजनाओं के संयोजन के लिए एक गाइड

मैंने केवल इस बात की पुष्टि करने के लिए अधिक शोध और प्रयोग किए कि वास्तव में किसी रंग की व्यक्तिपरक धारणा क्या होती है, परावर्तित प्रकाश की भौतिक संपत्ति नहीं। मुंसेल कलर सिस्टम प्रमुख है। हालाँकि यह अफ़सोस की बात है कि मैं बाउंटी becuase को विभाजित नहीं कर सकता @Steven Jeuris ने मुझे Colorjizz और Mojocolor पुस्तकालयों के लिंक के साथ बहुत मदद की। मदद के लिए सभी को धन्यवाद।
daniel.sedlacek

9

जहाँ तक रंग पैदा करने वाले उपकरण चलते हैं, मुझे http://kuler.adobe.com सबसे अच्छा लगता है।

यहाँ छवि विवरण दर्ज करें

जब आप साइट पर एक रंग पैलेट (5 रंग) बनाते हैं, तो आपके विकल्प एनालॉग, मोनोक्रोमैटिक, ट्रायड, कॉम्प्लिमेंट्री, कम्पाउंड और शेड्स होते हैं। बेशक आप ऑटो उत्पन्न करने के बजाय अपने रंगों को अनुकूलित कर सकते हैं। प्रत्येक रंग ब्लॉक आपको RGB और Hex (साथ ही CMYK / HSV / Lab) में संख्यात्मक मान दिखाता है।

पूरक या अनुरूप रंग कैसे उत्पन्न करें?

इसमें थोड़ा और रंग सिद्धांत ज्ञान शामिल है। आप यहाँ एक अच्छा (मूल) स्पष्टीकरण देख सकते हैं । रंग के पहिये देखें।

पस्टेल, ठंडा और गर्म रंग कैसे उत्पन्न करें?

सामान्य तौर पर, पेस्टल रंग "कोमल रंग" होते हैं। वे एक टिंट के उच्च और निचले स्पेक्ट्रम हैं। देखें कुलर का उपयोगकर्ता उत्पन्न पेस्टल रंग अनुभाग।

किसी भी यादृच्छिक लेकिन अलग-अलग रंगों की संख्या कैसे उत्पन्न करें?

आपके चार्टिंग उद्देश्य के लिए, मुझे यकीन नहीं है कि यादृच्छिक रंग काम करेंगे। प्रत्येक रंग पसंद हाथ उठाया जाना चाहिए।

हेक्स ट्रिपलेट (वेब ​​रंग) में सभी का अनुवाद कैसे करें?

अधिकांश ग्राफिकल सॉफ्टवेयर रंगों के लिए हेक्स मान प्रदर्शित करता है। Hex एक RGB स्ट्रिंग है जो ## (रेड), ## (ग्रीन), ## (ब्लू) द्वारा बनाई जाती है।

उदाहरण के लिए, शुद्ध लाल FF0000 है, शुद्ध नीला # 0000FF है। बैंगनी (आप लाल और नीले रंग के मिश्रण से प्राप्त करते हैं) # FF00FF है।

चूंकि आप चार्ट बना रहे हैं, इसलिए मैं प्रेरणा के लिए निम्नलिखित ब्लॉग पर जाने की सलाह देता हूं:

http://infosthetics.com

http://flowingdata.com

यदि आपके पास समय है, तो रंग सिद्धांत में पाठ के माध्यम से पढ़ें


लंबी टिप्पणी के लिए धन्यवाद, लेकिन यह मेरे किसी भी सवाल का जवाब नहीं देता है। मुझे वास्तव में यादृच्छिक रंग उत्पन्न करने की आवश्यकता है, शासक शांत है लेकिन मेरे लिए बेकार है और मैं उन ब्लॉगों को सिंडिकेट करता हूं :)।
daniel.sedlacek

वह "रंग सिद्धांत ज्ञान" लिंक प्राथमिक रंगों को लाल, पीले और नीले रंग के रूप में परिभाषित करता है। अंतिम मैंने जाँच की, योगात्मक प्राइमरी लाल, हरे और नीले रंग की हैं, और घटिया प्राइमरी सियान, मैजेंटा और पीली हैं। तो लाल, पीला और नीला सेट कहाँ से आता है?
स्टीव ३३

@ steve314, आरवाईबी मॉडल का उपयोग कला के लिए किया जाता है। देखें: en.wikipedia.org/wiki/RYB_color_model
जिन

धन्यवाद। मुझे खुशी है कि मैंने एक प्रश्न के रूप में कहा कि - मैं दिखावा कर सकता हूं कि मैं अब बेवकूफ नहीं था।
203

4

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

मैं जिस विचार के साथ आया था, वह एक कठिन-सी चाल है। रंगों के एक चक्र की कल्पना करें (हो सकता है कि प्रत्येक समान संतृप्ति और चमक के साथ एक अलग रंग हो, हालांकि आप किसी भी रंगक्षेत्र के माध्यम से किसी भी चक्र को परिभाषित कर सकते हैं)। उस सर्कल के लिए डिग्री में एक कोण देने के बजाय, एक सीमा शून्य से 255 है। बाइनरी में, कि 00000000 से 11111111 है। एक को 8 बिट 255 में जोड़ें और यह शून्य पर वापस आ जाता है, इसलिए यह स्वाभाविक रूप से "परिपत्र मान" के रूप में कार्य करता है (तकनीकी शब्दों में, जोड़ और घटाव modulo 256 है)।

चाल जब आप रंग शून्य, रंग एक आदि का चयन करते हैं, तो उन नंबरों को बिट-रिवर्स करने के लिए। सी में ऐसा करने के लिए, मैं उपयोग करूँगा ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

तो अनुक्रम 0, 1, 2, 3, 4 को 0, 128, 64, 192, 32 में बदल दिया जाता है।

मुद्दा यह है कि आपके पास 256 अलग-अलग रंग हैं, और सबसे पहले वाले बहुत व्यापक रूप से फैले हुए हैं, बाद के वाले कम व्यापक रूप से बाहर निकलते हैं और अंतराल में भरते हैं (64 0 और 128 के बीच आधा-रास्ता है, 32 आधा-रास्ता है बीच 0 और 64 आदि)।

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

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


आकर्षक चाल! +1। लेकिन इसी तरह की एक चेतावनी, gamedev.stackexchange और stackoverflow पर दिलचस्प सवाल : ह्यू की धारणा गैर-रैखिक है, इसलिए कोण में समान परिवर्तन कुछ रंगों के लिए एक बड़ा बदलाव और दूसरों के लिए एक बहुत ही छोटा बदलाव हो सकता है।
फ्रीपा

@ फरेपा - सच है, जब तक आप सावधान रहें कि आप कम से कम आरजीबी का नक्शा कैसे बनाते हैं - आरजीबी के लिए एक तुच्छ मानचित्रण शायद अधिकांश उद्देश्यों के लिए अच्छे परिणाम नहीं देगा। मुझे इस मुद्दे के बारे में पता है, लेकिन जैसा कि मैंने कहा, मैं उस पर कोई विशेषज्ञ नहीं हूं - मुझे शायद कम से कम कहा जाना चाहिए कि इस मुद्दे में अलग-अलग रंग के स्थान शामिल हैं और उनके बीच परिवर्तित करना, हालांकि।
स्टीव ३१

3

इस पर एक दिलचस्प स्टैक ओवरफ्लो प्रश्न " रंग के पहिये बनाने का कार्य " है। आप अनुशंसित कागजात (पीडीएफ) में से एक पढ़ना चाह सकते हैं ।


इससे पहले कि मैंने यह प्रश्न पूछा है, मैंने विशेष रूप से SE और प्रोग्रामर ( meta.stackexchange.com/questions/68384/… ) के बीच अंतर की जाँच की है । धन्यवाद, मैं इसकी जाँच करूंगा, लेकिन मैं इसे अपने प्रश्न का उत्तर नहीं मानता। PS: +1
daniel.sedlacek

2

इस सवाल ने मुझे मोहित कर दिया इसलिए मैंने कुछ गोलगप्पे बनाने शुरू कर दिए। :) अनुभव के आधार पर उत्तर की अपेक्षा न करें।

मूल रूप से, रंगों के साथ गणना करने के लिए, रंग पहिया पर संचालन करना सबसे अच्छा है, जिसे एचएसएल प्रारूप में दर्शाया गया है ।

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

यदि आप भाग्यशाली हैं, तो आपको उनमें से किसी को भी समझने की आवश्यकता नहीं होगी, यदि निम्नलिखित में से एक नाम AS3 लाइब्रेरी आपके लिए काम करता है।


इस बीच मैंने और भी शोध किया और मैं उसी नतीजे पर पहुँचा! (सिवाय मैं HSL पर HSV पसंद करते हैं)। लिंक के लिए धन्यवाद, Colorjizz भयानक लग रहा है! ps: +1
daniel.sedlacek

1

मैंने निम्नलिखित कोड का उपयोग किया है। नोट: यह इस बारे में कोई सिद्धांत का उपयोग नहीं करता है कि आंख / मस्तिष्क कैसे काम करता है, मैं सिर्फ रंगों का एक तालु बनाना चाहता था जैसे कि लाल + हरा + नीला = 1, और रंग लगभग समान रूप से दूरी पर हैं। पैरामीटर "मी" वह है जो कुल संख्या में संभव रंग से बाहर है। यह 91 ish के लगभग संख्या के लिए काम करता है। नोट मुझे शून्य से संख्या -1 तक चलना चाहिए। अन्य चीजें संभव हैं, ऊपर दी गई बाधा बहुत मनमानी है, लेकिन कम से कम यह अलग-अलग रंगों को उत्पन्न करता है-यह मानते हुए कि आपको उनमें से कई की आवश्यकता नहीं है।

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

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

आप बस प्राथमिक रंग वैरिएबल्स को यादृच्छिक संख्याओं पर सेट कर सकते हैं, लेकिन वे नेत्रहीन अलग सेट बनाने की संभावना भी कम हैं।


0

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


0

मुझे तस्वीरों से रंगों का नमूना पसंद है । एक डिजाइनर के रूप में मैं इसे मैन्युअल रूप से करता हूं। एक प्रोग्रामर के रूप में मैं आमतौर पर एक यादृच्छिक पिक्सेल चुनता हूं। यदि आप अधिक नियंत्रण चाहते हैं तो आप अपनी स्वयं की 'फोटो' बना सकते हैं जो एक निश्चित नियम का पालन करती है।


0

मुझे हमेशा से ही VisiBone की ऑनलाइन उपयोगिताएँ पसंद हैं क्योंकि आप कई रंगों का चयन कर सकते हैं और अंतःक्रियात्मक रूप से मूल्यांकन कर सकते हैं कि वे एक-दूसरे के साथ कितनी बुरी तरह टकराते हैं: http://www.visibone.com/colorlab/

मैं कहता हूं कि वे बुरी तरह से टकराते हैं क्योंकि मैं रंग के विपरीत से परिचित हूं क्योंकि यह "एनालॉग" कला पर लागू होता है और यह देखकर आश्चर्य होता है कि मैंने जिस रंग को चुना है वह डिजिटल कला में एक दूसरे के साथ टकरा गया है। (स्पष्ट रूप से मैं कोई डिजाइनर नहीं हूं)

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