दो रंगों के बीच रंगों की एक श्रृंखला बनाना


15

एक शुरुआती रंग और एक अंतिम रंग को देखते हुए, क्या यह संभव है कि एल्गोरिदम उनके बीच रंगों की एक श्रृंखला उत्पन्न कर सके? उदाहरण के लिए, नीचे दी गई छवि के आरंभ और अंत में नीले / ग्रे के हल्के और गहरे रंगों को देखते हुए, मैं मध्यवर्ती रंगों को कैसे उत्पन्न कर सकता हूं?

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

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


2
इस पर एक नज़र डालें: graphicdesign.stackexchange.com/questions/75417/... तो एक ducplicate होना हो सकता है?
राफेल

इस विषय पर एक और अच्छा लेख: vis4.net/blog/posts/avoid-equidistant-hsv-colors
कांटा

जवाबों:


13

इसे रंग प्रक्षेप कहा जाता है । यह है कि ग्रेडिएंट हुड के तहत क्या करते हैं। आप विभिन्न तरीकों और तरीकों का उपयोग करके ऐसा कर सकते हैं, और वास्तव में परिणाम कैसे प्रक्षेपित होते हैं यह विधि पर निर्भर करता है।

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

लाइव डेमो

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

जिसका उपयोग ऐसे किया जाता है और प्रक्षेपित रंगों की एक सरणी लौटाता है:

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

आप रंग प्रक्षेप करने के लिए फोटोशॉप (और संभावित रूप से अन्य कार्यक्रम) एक्सटेंशन भी पा सकते हैं। हालाँकि, आप यह सुनिश्चित करने के लिए जांच कर सकते हैं कि प्रक्षेप की विधि वही है जो आप चाहते हैं, जैसा कि आप किसी भी फ़ंक्शन का उपयोग करके प्रक्षेपित करने के लिए उपयोग कर सकते हैं।


2
ज़च ... आप ऐसे गीक हैं ... कि म्यूज़िक विज़ुअलाइज़र डैम कूल है!
राफेल

@ राफेल मैंने कुछ ऐसे लोगों को बनाया जिन्हें आप भी पसंद कर सकते हैं :)
Zach Saucier

धन्यवाद। Color Interpolationजो मुझे चाहिए था। मुझे यहां कुछ स्विफ्ट कार्यान्वयन मिले - stackoverflow.com/questions/22868182/uico…
बेन पैकर्ड

2
उपरोक्त लिंक टूटा हुआ है, लेकिन पोस्ट भविष्य के पाठकों के लिए यहां पाया जा सकता है: प्रगति मूल्य के आधार पर UIColor संक्रमण
Zach Saucier

23

इस जवाब पर एक नज़र डालें। किसी दिए गए रंग को थोड़ा गहरा या हल्का कैसे करें?

जहां आप बस प्रत्येक RGB घटक के अलग-अलग मान लेते हैं और मानों को विभाजित करते हैं।

लेकिन हमें एक समस्या है, एक रंग संक्रमण करने का सिर्फ एक तरीका नहीं है।

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

पहला aproach आपको सबसे छोटा मार्ग (1) देगा लेकिन शायद यह मार्ग वह नहीं है जिसकी आपको आवश्यकता है।

यह भी रंग मॉडल या तर्क द्वारा उल्लिखित है। उदाहरण के लिए, लैब * रंग मॉडल में रेड और ग्रीन पूरक रंग हैं, इसलिए उस मॉडल पर छोटा मार्ग एक तटस्थ ग्रे (3) के माध्यम से गुजर रहा होगा।

यदि आपको केवल एक रंग के रंगों की आवश्यकता है, तो दूसरा उत्तर उपयुक्त है।


5
मुझे प्रक्षेप के विभिन्न तरीकों को दिखाने वाला ग्राफिक पसंद है
Zach Saucier

मुझे लगता है कि इसका मतलब यह है कि पथ रणनीति को संहिताबद्ध करने का एक तरीका होना चाहिए।
बाओ थिएन एनगो

10

इलस्ट्रेटर में RGB या CMYK में एक मिश्रण का उपयोग करें:

  • प्रारंभ और अंत रंग के साथ 2 आकृतियाँ बनाएं (इस उदाहरण में एक ग्रे और एक काला, लेकिन आपको जो भी आवश्यक हो उसे चुनें)
  • में जाएं Object → Blend → Blend Optionsऔर Specified stepsआप में से कितने में टाइप करें (नीचे मेरे उदाहरण में 20)
  • अपनी दो वस्तुओं का चयन करें और चुनें Object → Blend → Make। यह उस मिश्रण को उत्पन्न करेगा जिसे आप बाद में अलग-अलग वस्तुओं में बदल सकते हैं Object → Expand। तब आप प्रत्येक मध्यवर्ती वस्तु को अपने रंग कोड के साथ देख सकते हैं।

सम्मिश्रण


5

यह अन्य उत्तरों के लिए एक अतिरिक्त है।

जब आप sRGB में रंगों को प्रक्षेपित करते हैं, तो आपको विचार करना होगा कि RGB मान प्रकाश की तीव्रता में रैखिक नहीं हैं, लेकिन मानव कथित प्रकाश तीव्रता में रैखिक हैं। यह बचत मूल्यों को आसान बनाता है, लेकिन विभिन्न रंग संचालन के लिए रैखिक रंग अंतरिक्ष में जाना आवश्यक है।

प्रकाश की तीव्रता का मानवीय बोध एक शक्ति नियम के अनुसार होता है, इसलिए

linear = sRGB^2.2
sRGB = linear^(1/2.2)

दोनों के बीच रूपांतरण के लिए इस्तेमाल किया जा सकता है। यह 2.2 के एक गामा मूल्य का उपयोग करता है जो sRGB के लिए मान है। इस बारे में अधिक जानकारी के लिए यह विकिपीडिया लेख देखें।

इस समस्या का एक विस्तृत विश्लेषण और गलत कार्यान्वयन के उदाहरण यहां मिल सकते हैं । जिनमें से एक रैखिक और sRGB प्रक्षेप का उपयोग करके रंग ढाल है।


यह sRGB मानों को प्रक्षेपित करने का एक तरीका है, लेकिन एक व्यक्ति को क्या करना चाहिए यह उस प्रभाव पर निर्भर करता है
Zach Saucier

यह सही है, लेकिन रैखिक अंतरिक्ष में प्रक्षेप वास्तविक जीवन में प्रकाश के साथ होता है। इसलिए ऐसा करना सबसे स्वाभाविक है।
हेनजे

1
@ZachSaucier जितनी बार लोगों ने प्रक्षेप किया है या किसी विशिष्ट इरादे से बाहर sRGB में सम्मिश्रण किया है, ओह-सो-टिनी ने जितनी बार लोगों ने इसे अज्ञानता या आलस्य से बाहर किया है (या तो यह सोचते हैं कि वे RGB में कर रहे हैं, या सोच (सही या नहीं) कि अंतर महत्वहीन है)।
हॉब्स

1

फ़ोटोशॉप के ढाल (या एई में "ब्लेंड" के रूप में) पहले से ही शुरू और समाप्त होने वाले रंगों के बीच एक रैखिक रंग संक्रमण प्राप्त करने के तरीके के रूप में प्रस्तुत किया गया है। बिना स्क्रिप्टिंग कोड के प्रोग्रामिंग के बिना हमें कुछ नॉनलाइन (एक घुमावदार संक्रमण पथ) कैसे मिलता है?

एक समाधान समायोजन परतों या सम्मिश्रण मोड या दोनों द्वारा ढाल संक्रमण पथ को संशोधित करना है। यह वास्तव में प्रारंभ रंग से अंत रंग में एक निरंतर परिवर्तन पैदा करता है, अगर संशोधित परतों में एक परत मुखौटा होता है जो निरंतर होता है और शुरुआत में और अंत में स्नेह = शून्य बनाता है।

यहाँ एक काफी जटिल मोड़ है। लेयर "टारगेट अलोन" में ग्रेडिएंट और लेयर है "मोडिफ़ायर" ब्लेंडिंग मोड "कलर" द्वारा एक निरंतर रंग शिफ्ट का निर्माण करता है। सभी ट्विस्टी बनाने के लिए, मॉडिफ़ायर स्वयं एक ढाल है।

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

वहाँ कुछ असंयमित सम्मिश्रण मोड और घटता है जो एक अचानक कूद का कारण बनता है। उनमें से एक "ह्यू" है। प्रभाव को खराब करने के लिए एक और भयावहता है "कोई परिवर्तन नहीं", सभी शून्य या सभी 255 के लिए क्लिपिंग के कारण दिखाई देने वाला एक निरंतर रंग क्षेत्र है। मैंने 48 बिट / पिक्सेल आरजीबी मोड का उपयोग करने के लिए परीक्षण नहीं किया है और न ही गणना की है कि यह कितना व्यवहार करता है। शायद बिल्कुल नहीं, क्योंकि हमारे पास अभी भी केवल 24 बिट्स / पिक्सेल ऑनस्क्रीन हैं।

संक्रमण

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