एल्गोरिथ्म बेतरतीब ढंग से एक सौंदर्य-मनभावन रंग पैलेट उत्पन्न करने के लिए [बंद]


301

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

मुझे इस समस्या का समाधान मिल गया है, लेकिन वे आरजीबी की तुलना में वैकल्पिक रंग पट्टियों पर निर्भर हैं। मैं बजाय सीधे आगे और पीछे मानचित्रण की तुलना में सीधे आरजीबी का उपयोग करेगा। ये अन्य समाधान भी अधिकतम 32 उत्पन्न कर सकते हैं या यादृच्छिक रंगों को प्रसन्न कर सकते हैं।

सभी विचारों का स्वागत है।


2
मैं एक वेबसाइट बनाता हूँ जो प्रत्येक यात्रा पर एक यादृच्छिक रंग उत्पन्न करती है। एक "यह रंग चट्टानों" / "यह रंग बेकार है" वोट है। फिर वोटों के अनुपात से छांटें।
नोसरेडना

आप HSL और HSV की जांच कर सकते हैं।
जिम केनेर

48
"रंग मल की याद दिलाता है" मुझे यह पसंद है
lol

यह एक एल्गोरिथ्म नहीं है।
मैट द निंजा

मैं एक टिप्पणी जोड़ दूंगा क्योंकि प्रश्न बंद है। मैंने इसे आज़माया नहीं है, लेकिन इसका अर्थ यह होगा कि भग्न या प्रक्रियात्मक तरीके से कोशिश की जाती है, अर्थात मिडपॉइंट विस्थापन एल्गोरिथ्म या वेरिएंट ( lighthouse3d.com/opengl/terrain/index.php?mpd2 ) या Perlin शोर का उपयोग करते हुए, लेकिन ऊंचाइयों के बजाय रंगों के आरजीबी घटकों को मिलाना।
अल्फोक्स

जवाबों:


426

आप एक स्थिर रंग वाले यादृच्छिक रंगों के RGB मानों को औसत कर सकते हैं:

(जावा में उदाहरण)

public Color generateRandomColor(Color mix) {
    Random random = new Random();
    int red = random.nextInt(256);
    int green = random.nextInt(256);
    int blue = random.nextInt(256);

    // mix the color
    if (mix != null) {
        red = (red + mix.getRed()) / 2;
        green = (green + mix.getGreen()) / 2;
        blue = (blue + mix.getBlue()) / 2;
    }

    Color color = new Color(red, green, blue);
    return color;
}


सफेद (255, 255, 255) के साथ यादृच्छिक रंगों को मिलाकर मूल रंग के रंग को बनाए रखते हुए लपट को बढ़ाकर तटस्थ पेस्टल बनाता है। ये बेतरतीब ढंग से उत्पन्न पेस्टल आमतौर पर अच्छी तरह से एक साथ चलते हैं, खासकर बड़ी संख्या में।

उपरोक्त विधि का उपयोग करके कुछ पेस्टल रंग तैयार किए गए हैं:

प्रथम


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

दूसरा


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

कुछ अतिरिक्त संसाधन:


3
एकमात्र कैविएट अंतर भेद का नुकसान प्रतीत होता है। सफेद जैसे एक रंग के साथ लाल हरे और नीले रंग का औसत लेने से, स्वाभाविक रूप से सभी रंग सफेद के करीब चले जाते हैं और उनके बीच के अंतर को कम करते हैं। उदाहरण के लिए यदि आप पहले स्क्रीनशॉट को देखते हैं: जब वे साग एक दूसरे के बगल में होते हैं, तो निश्चित रूप से मैं उन्हें अलग कर सकता हूं, लेकिन क्या होगा यदि वे कुछ उत्पादित ग्राफिक में आसन्न नहीं हैं? समस्याग्रस्त हो सकता है।
ज़ेलफिर कलस्टहल

यादृच्छिक रंग घटक उत्पन्न करते समय, 200 की तरह कुछ के साथ ऊपरी बाउंड को प्रतिबंधित करने का प्रयास करें।
निकोलोडन

87

मैं एक रंग के पहिये का उपयोग करूँगा और एक यादृच्छिक स्थिति प्रदान करूँगा जो आप सुनहरा कोण जोड़ सकते हैं (137,5 डिग्री)

http://en.wikipedia.org/wiki/Golden_angle

प्रत्येक बार अलग-अलग रंग प्राप्त करने के लिए जो ओवरलैप नहीं होता है।

रंग पहिया के लिए चमक को समायोजित करने से आपको अलग-अलग उज्ज्वल / गहरे रंग संयोजन भी मिल सकते हैं।

मुझे यह ब्लॉग पोस्ट मिला है जो वास्तव में समस्या और समाधान का सुनहरा अनुपात का उपयोग करता है।

http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/

अद्यतन: मैं सिर्फ यह अन्य दृष्टिकोण पाया है:

इसे RYB (लाल, पीला, नीला) विधि कहा जाता है और यह इस पत्र में वर्णित है:

http://threekings.tk/mirror/ryb_TR.pdf

"पेंट प्रेरित रंग सम्मिश्रण" के रूप में।

एल्गोरिथ्म रंग उत्पन्न करता है और प्रत्येक नए रंग को पहले के चुने हुए लोगों के लिए अपनी यूक्लिडियन दूरी को अधिकतम करने के लिए चुना जाता है।

यहाँ आप जावास्क्रिप्ट में एक अच्छा कार्यान्वयन पा सकते हैं:

http://afriggeri.github.com/RYB/

अद्यतन 2:

द साइन्स पो मेडियाल्ब ने "आई वांट ह्यू" नामक एक उपकरण जारी किया है जो डेटा वैज्ञानिकों के लिए रंग पट्टियाँ उत्पन्न करता है। अलग-अलग रंग की जगहों का उपयोग करना और k- साधन क्लस्टरिंग या बल वैक्टर (प्रतिकर्षण ग्राफ) का उपयोग करके पैलेट उत्पन्न करना। उन विधियों से परिणाम बहुत अच्छे हैं, वे अपने वेब पेज में सिद्धांत और एक कार्यान्वयन दिखाते हैं।

http://tools.medialab.sciences-po.fr/iwanthue/index.php


iWantHue जवाब है। वहा जाओ। चौंकना।
इरोंगेज़.कॉम

23

जावास्क्रिप्ट में:

function pastelColors(){
    var r = (Math.round(Math.random()* 127) + 127).toString(16);
    var g = (Math.round(Math.random()* 127) + 127).toString(16);
    var b = (Math.round(Math.random()* 127) + 127).toString(16);
    return '#' + r + g + b;
}

इस विचार को यहाँ देखा: http://blog.functionalfun.net/2008/07/random-pastel-colour-nenerener.html


पूरी तरह से सही नहीं: आपको सिंगल-डिजिट नंबरों के लिए भी जीरो-पेडिंग करने की जरूरत है ... वैसे भी, यहां दर्शकों के लिए एक वर्किंग फिडेल है: jsfiddle.net/RedDevil/LLYBQ ----- स्क्रैच है कि ... मैंने नहीं किया नोटिस +127 बिट ... लेकिन फिर यह अंधेरे रंगों को उत्पन्न नहीं करेगा।
कुमारहर्ष

2
मूल विचार मनमाने ढंग से सुखद रंगों को उत्पन्न करना था। डार्क शेड्स मेरे लिए सुखद नहीं लगते;)
मोदोबोई

11

किसी अन्य पैलेट में परिवर्तित करना ऐसा करने का एक बेहतर तरीका है। एक कारण यह है कि वे ऐसा करते हैं: अन्य पैलेट 'अवधारणात्मक' हैं - अर्थात, वे समान प्रतीत होने वाले रंगों को एक साथ जोड़ते हैं, और एक चर को समायोजित करने से रंग पूर्वानुमेय रूप से बदल जाता है। RGB में से कोई भी सच नहीं है, जहां रंगों के बीच कोई स्पष्ट संबंध नहीं है जो "एक साथ अच्छी तरह से चलते हैं"।


6

मुझे ऐसे ही रंगों से बचने के लिए TriadMixing और CIE94 का उपयोग करके सफलता मिली है । निम्न छवि इनपुट रंगों का उपयोग करती है लाल, पीला और सफेद। देखें यहाँ

ट्रायडामिक्सिंग + CIE94


5

एक उत्तर जिसे अनदेखा नहीं किया जाना चाहिए, क्योंकि यह सरल है और लाभ प्रस्तुत करता है, वास्तविक जीवन की तस्वीरों और चित्रों का नमूना है। आधुनिक आर्ट पिक्स, सिज़न, वैन गॉग, मोनेट, फोटो के थंबनेल पर जितने यादृच्छिक रंग चाहते हैं, उतना ही नमूना ... फ़ायदा यह है कि आप थीम द्वारा रंग प्राप्त कर सकते हैं और वे कार्बनिक रंग हैं। बस एक फ़ोल्डर में 20 - 30 pics और यादृच्छिक नमूना हर बार एक यादृच्छिक तस्वीर डाल दिया।

एचएसवी मूल्यों में रूपांतरण मनोवैज्ञानिक रूप से आधारित पैलेट के लिए एक व्यापक कोड एल्गोरिथ्म है। hsv को यादृच्छिक करना आसान है।


1
mkweb.bcgsc.ca/color_summarizer/?analyze यहां एक ऑनलाइन टूल है जो वास्तविक जीवन की तस्वीरों का विश्लेषण कर सकता है और आपके पास लौट सकता है आरजीबी मूल्यों के ग्राफ़र का कहना है कि उनके ग्राफ़ में वास्तविक जीवन की तस्वीरों का क्या अनुभव हो सकता है ...। अत्यंत उपयोगी वेबसाइट, जो जरूरी है यदि आप यादृच्छिक
कॉलर्स के


3

यहां सी # में त्वरित और गंदा रंग जनरेटर है (इस लेख में वर्णित 'आरवाईबी दृष्टिकोण' का उपयोग करके )। यह जावास्क्रिप्ट से एक फिर से लिखना है ।

उपयोग:

List<Color> ColorPalette = ColorGenerator.Generate(30).ToList();

पहले दो रंग सफेद होते हैं और काले रंग की छाया। मैं अक्सर उन्हें इस तरह से छोड़ देता हूं (Linq का उपयोग करके):

List<Color> ColorsPalette = ColorGenerator
            .Generate(30)
            .Skip(2) // skip white and black
            .ToList(); 

कार्यान्वयन:

public static class ColorGenerator
{

    // RYB color space
    private static class RYB
    {
        private static readonly double[] White = { 1, 1, 1 };
        private static readonly double[] Red = { 1, 0, 0 };
        private static readonly double[] Yellow = { 1, 1, 0 };
        private static readonly double[] Blue = { 0.163, 0.373, 0.6 };
        private static readonly double[] Violet = { 0.5, 0, 0.5 };
        private static readonly double[] Green = { 0, 0.66, 0.2 };
        private static readonly double[] Orange = { 1, 0.5, 0 };
        private static readonly double[] Black = { 0.2, 0.094, 0.0 };

        public static double[] ToRgb(double r, double y, double b)
        {
            var rgb = new double[3];
            for (int i = 0; i < 3; i++)
            {
                rgb[i] = White[i]  * (1.0 - r) * (1.0 - b) * (1.0 - y) +
                         Red[i]    * r         * (1.0 - b) * (1.0 - y) +
                         Blue[i]   * (1.0 - r) * b         * (1.0 - y) +
                         Violet[i] * r         * b         * (1.0 - y) +
                         Yellow[i] * (1.0 - r) * (1.0 - b) *        y +
                         Orange[i] * r         * (1.0 - b) *        y +
                         Green[i]  * (1.0 - r) * b         *        y +
                         Black[i]  * r         * b         *        y;
            }

            return rgb;
        }
    }

    private class Points : IEnumerable<double[]>
    {
        private readonly int pointsCount;
        private double[] picked;
        private int pickedCount;

        private readonly List<double[]> points = new List<double[]>();

        public Points(int count)
        {
            pointsCount = count;
        }

        private void Generate()
        {
            points.Clear();
            var numBase = (int)Math.Ceiling(Math.Pow(pointsCount, 1.0 / 3.0));
            var ceil = (int)Math.Pow(numBase, 3.0);
            for (int i = 0; i < ceil; i++)
            {
                points.Add(new[]
                {
                    Math.Floor(i/(double)(numBase*numBase))/ (numBase - 1.0),
                    Math.Floor((i/(double)numBase) % numBase)/ (numBase - 1.0),
                    Math.Floor((double)(i % numBase))/ (numBase - 1.0),
                });
            }
        }

        private double Distance(double[] p1)
        {
            double distance = 0;
            for (int i = 0; i < 3; i++)
            {
                distance += Math.Pow(p1[i] - picked[i], 2.0);
            }

            return distance;
        }

        private double[] Pick()
        {
            if (picked == null)
            {
                picked = points[0];
                points.RemoveAt(0);
                pickedCount = 1;
                return picked;
            }

            var d1 = Distance(points[0]);
            int i1 = 0, i2 = 0;
            foreach (var point in points)
            {
                var d2 = Distance(point);
                if (d1 < d2)
                {
                    i1 = i2;
                    d1 = d2;
                }

                i2 += 1;
            }

            var pick = points[i1];
            points.RemoveAt(i1);

            for (int i = 0; i < 3; i++)
            {
                picked[i] = (pickedCount * picked[i] + pick[i]) / (pickedCount + 1.0);
            }

            pickedCount += 1;
            return pick;
        }

        public IEnumerator<double[]> GetEnumerator()
        {
            Generate();
            for (int i = 0; i < pointsCount; i++)
            {
                yield return Pick();
            }
        }

        IEnumerator IEnumerable.GetEnumerator()
        {
            return GetEnumerator();
        }
    }

    public static IEnumerable<Color> Generate(int numOfColors)
    {
        var points = new Points(numOfColors);

        foreach (var point in points)
        {
            var rgb = RYB.ToRgb(point[0], point[1], point[2]);
            yield return Color.FromArgb(
                (int)Math.Floor(255 * rgb[0]),
                (int)Math.Floor(255 * rgb[1]),
                (int)Math.Floor(255 * rgb[2]));
        }
    }
}

मैंने जावा उत्तर हटा दिया है, लेकिन यदि आवश्यक हो, तो जावा संस्करण को इस Gist
Dylan

3

आर टू लाइनर में डेविड क्रो की विधि:

GetRandomColours <- function(num.of.colours, color.to.mix=c(1,1,1)) {
  return(rgb((matrix(runif(num.of.colours*3), nrow=num.of.colours)*color.to.mix)/2))
}

2
function fnGetRandomColour(iDarkLuma, iLightLuma) 
{       
  for (var i=0;i<20;i++)
  {
    var sColour = ('ffffff' + Math.floor(Math.random() * 0xFFFFFF).toString(16)).substr(-6);

    var rgb = parseInt(sColour, 16);   // convert rrggbb to decimal
    var r = (rgb >> 16) & 0xff;  // extract red
    var g = (rgb >>  8) & 0xff;  // extract green
    var b = (rgb >>  0) & 0xff;  // extract blue

    var iLuma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709


    if (iLuma > iDarkLuma && iLuma < iLightLuma) return sColour;
  }
  return sColour;
} 

पेस्टल के लिए, उच्च लूमा डार्क / लाइट पूर्णांक में पास करें - यानी fnGetRandomColour (120, 250)

क्रेडिट: http://paulirish.com/2009/random-hex-color-code-snippets/ stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black पर सभी क्रेडिट


1

डेविड क्रो के मूल उत्तर, IE और Nodejs विशिष्ट कोड के जावास्क्रिप्ट अनुकूलन शामिल थे।

generateRandomComplementaryColor = function(r, g, b){
    //--- JavaScript code
    var red = Math.floor((Math.random() * 256));
    var green = Math.floor((Math.random() * 256));
    var blue = Math.floor((Math.random() * 256));
    //---

    //--- Extra check for Internet Explorers, its Math.random is not random enough.
    if(!/MSIE 9/i.test(navigator.userAgent) && !/MSIE 10/i.test(navigator.userAgent) && !/rv:11.0/i.test(navigator.userAgent)){
        red = Math.floor((('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 256));
        green = Math.floor((('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 256));
        blue = Math.floor((('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 256));
    };
    //---

    //--- nodejs code
    /*
    crypto = Npm.require('crypto');
    red = Math.floor((parseInt(crypto.randomBytes(8).toString('hex'), 16)) * 1.0e-19 * 256);
    green = Math.floor((parseInt(crypto.randomBytes(8).toString('hex'), 16)) * 1.0e-19 * 256);
    blue = Math.floor((parseInt(crypto.randomBytes(8).toString('hex'), 16)) * 1.0e-19 * 256);
    */
    //---

    red = (red + r)/2;
    green = (green + g)/2;
    blue = (blue + b)/2;

    return 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')';
}

फ़ंक्शन का उपयोग करके चलाएं:

generateRandomComplementaryColor(240, 240, 240);

1

अलग-अलग रंगों का प्रयोग करें ।

जावास्क्रिप्ट में लिखा है।

यह नेत्रहीन एक पैलेट उत्पन्न करता है अलग-अलग रंगों ।

अलग-अलग रंग अत्यधिक विन्यास योग्य हैं:

  • चुनें कि पैलेट में कितने रंग हैं
  • एक विशिष्ट सीमा तक रंग को प्रतिबंधित करें
  • क्रोमा (संतृप्ति) को एक विशिष्ट सीमा तक सीमित करें
  • एक विशिष्ट सीमा तक लपट को प्रतिबंधित करें
  • पैलेट की सामान्य गुणवत्ता कॉन्फ़िगर करें

0

तुम उन्हें एक निश्चित चमक के भीतर हो सकता है। यह "नीयन" रंगों के अमाउंट को थोड़ा नियंत्रित करेगा। उदाहरण के लिए, अगर "चमक"

brightness = sqrt(R^2+G^2+B^2)

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


0

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

हालांकि, कुछ नियम हैं, जिनका उपयोग आप खराब रंग संयोजनों को कम करने के लिए कर सकते हैं (यानी, रंगों का टकराव करना और पूरक रंग चुनना)।

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

-Adam


0

मैं दृढ़ता से एक सीजी HSVtoRGB shader फ़ंक्शन का उपयोग करने की सलाह दूंगा, वे भयानक हैं ... यह आपको एक crt मॉनिटर की तरह नियंत्रण के बजाय एक चित्रकार की तरह प्राकृतिक रंग नियंत्रण प्रदान करता है, जिसे आप संभवतः मानते हैं!

यह 1 फ्लोट मान बनाने का एक तरीका है। अर्थात् ग्रे, रंग और चमक और संतृप्ति के संयोजन के 1000 डीएस में:

int rand = a global color randomizer that you can control by script/ by a crossfader etc.
float h = perlin(grey,23.3*rand)
float s = perlin(grey,54,4*rand)
float v = perlin(grey,12.6*rand)

Return float4 HSVtoRGB(h,s,v);

परिणाम भयानक रंग का संग्राम है! यह प्राकृतिक नहीं है, लेकिन यह प्राकृतिक रंग ढ़ाल का उपयोग करता है और यह जैविक और नियंत्रित रूप से इंद्रधनुषी / पेस्टल मापदंडों को देखता है।

पेर्लिन के लिए, आप इस फ़ंक्शन का उपयोग कर सकते हैं, यह एक तेज़ ज़िग ज़ैग संस्करण है।

function  zig ( xx : float ): float{    //lfo nz -1,1
    xx= xx+32;
    var x0 = Mathf.Floor(xx);
    var x1 = x0+1;
    var v0 = (Mathf.Sin (x0*.014686)*31718.927)%1;
    var v1 = (Mathf.Sin  (x1*.014686)*31718.927)%1;
    return Mathf.Lerp( v0 , v1 , (xx)%1 )*2-1;
}

0

यहाँ कुछ ऐसा है जो मैंने एक साइट के लिए लिखा है। यह वर्ग के साथ किसी भी div के लिए एक यादृच्छिक फ्लैट पृष्ठभूमि-रंग को स्वतः उत्पन्न करेगा .flat-color-gen। पृष्ठ पर सीएसएस जोड़ने के प्रयोजनों के लिए केवल जेकरी की आवश्यकता होती है; यह इसके मुख्य भाग के लिए आवश्यक नहीं है, जो कि generateFlatColorWithOrder()विधि है।

JsFiddle लिंक

(function($) {
    function generateFlatColorWithOrder(num, rr, rg, rb) {
        var colorBase = 256;
        var red = 0;
        var green = 0;
        var blue = 0;
        num = Math.round(num);
        num = num + 1;
        if (num != null) {

            red = (num*rr) % 256;
            green = (num*rg) % 256;
            blue = (num*rb) % 256;
        }
        var redString = Math.round((red + colorBase) / 2).toString();
        var greenString = Math.round((green + colorBase) / 2).toString();
        var blueString = Math.round((blue + colorBase) / 2).toString();
        return "rgb("+redString+", "+greenString+", "+blueString+")";
        //return '#' + redString + greenString + blueString;
    }

    function generateRandomFlatColor() {
        return generateFlatColorWithOrder(Math.round(Math.random()*127));
    }

    var rr = Math.round(Math.random()*1000);
    var rg = Math.round(Math.random()*1000);
    var rb = Math.round(Math.random()*1000);
    console.log("random red: "+ rr);
    console.log("random green: "+ rg);
    console.log("random blue: "+ rb);
    console.log("----------------------------------------------------");
    $('.flat-color-gen').each(function(i, obj) {
        console.log(generateFlatColorWithOrder(i));
        $(this).css("background-color",generateFlatColorWithOrder(i, rr, rg, rb).toString());
    });
})(window.jQuery);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.