algorithm随机生成一个美观的调色板

我正在寻找一个简单的algorithm来生成大量的随机,美观的颜色。 所以没有疯狂的霓虹灯颜色,让人想起粪便的颜色等

我已经find了这个问题的解决scheme,但他们依赖于替代调色板比RGB。 我宁愿只使用直线RGB而不是来回映射。 这些其他解决scheme最多也只能生成32个左右随意的颜色。

任何想法都会很棒。

您可以将随机颜色的RGB值与常量颜色的RGB值进行平均:

(在Java中的例子)

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)混合,通过增加亮度,同时保持原始色彩的色调,创build中性色彩。 这些随机生成的粉彩通常很好地结合在一起,特别是大量的。

以下是使用上述方法生成的一些柔和的颜色:

第一

你也可以把随机的颜色和一个常量的粉彩混合起来,形成一组有色的中性色。 例如,使用浅蓝色可以创build如下所示的颜色:

第二

更进一步,您可以将启发式algorithm添加到您的生成器中,并考虑到补色或阴影水平,但这一切都取决于您想用随机颜色实现的印象。

一些额外的资源:

我会用一个色轮,给一个随机的位置,你可以添加金色的angular度(137.5度)

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

以便每次获得不同的颜色不重叠。

调整色轮的亮度,可以得到不同的亮/暗色组合。

我发现这个博客文章很好地解释了这个问题以及使用黄金比例的解决scheme。

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

更新:我刚刚发现了另一种方法:

它被称为RYB(红,黄,蓝)方法,并在本文中描述:

mirror/ryb_TR.html

作为“Paint Inspired Color Compositing”。

该algorithm生成颜色,并且select每种新颜色以最大化其与先前select的颜色的欧氏距离。

在这里你可以find一个很好的实现在JavaScript中:

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

更新2:

Science Po Medialb刚刚发布了一个名为“我要色调”的工具,为数据科学家生成调色板。 使用不同的颜色空间并使用k-means聚类或力vector(排斥图)生成调色板这些方法的结果非常好,它们在其网页中显示了理论和实现。

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

在javascript中:

 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-generator.html

转换到另一个调色板是一个很好的方法来做到这一点。 他们这样做是有原因的:其他调色板是“感知的” – 也就是说,他们把相似的看似颜色放在一起,调整一个variables以可预测的方式改变颜色。 对于RGB来说,这一切都是不正确的,那些颜色之间没有明显的关系。

一个不容忽视的答案,因为它很简单,并呈现出优势,是现实生活中的照片和绘画的样本。 样品随机像素,你想在现代艺术照片,塞尚,梵高,莫内,缩略图随机颜色照片… …的好处是,你可以得到的颜色的主题,他们是有机的颜色。 只需在一个文件夹中放入20-30张图片,并随机抽取一张随机图片。

转换为HSV值是基于心理调色板的广泛代码algorithm。 hsv更容易随机化。

在PHP中:

 function pastelColors() { $r = dechex(round(((float) rand() / (float) getrandmax()) * 127) + 127); $g = dechex(round(((float) rand() / (float) getrandmax()) * 127) + 127); $b = dechex(round(((float) rand() / (float) getrandmax()) * 127) + 127); return "#" . $r . $g . $b; } 

来源: https : //stackoverflow.com/a/12266311/2875783

这里是C#中的快速和肮脏的颜色生成器(使用本文中描述的'RYB方法')。 这是从JavaScript重写。

使用:

 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])); } } } 

大卫·克罗的方法在R双线:

 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)) } 
 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

你可以让他们在一定的亮度。 这将控制“霓虹灯”颜色的一点点。 例如,如果“亮度”

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

在一定的上限内,会有一个冲淡的,淡淡的颜色。 相反,如果在一定的下限内,则会更暗一些。 这将消除任何疯狂的,突出的颜色,如果你select了一个非常高或非常低的界限,他们都将相当接近白色或黑色。

包括David Crow的原始答案,IE和Nodejs特定代码的JavaScript改编。

 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) + ')'; } 

运行该function使用:

 generateRandomComplementaryColor(240, 240, 240); 

很难得到你想要的algorithm – 人们一直在研究色彩理论很长一段时间,他们甚至不知道所有的规则。

但是,您可以使用一些规则来挑选不良的颜色组合(即,存在颜色冲突和select补充颜色的规则)。

我build议你访问你的图书馆的艺术部分,并检查出有关色彩理论的书籍,以便更好地了解什么是一种好的色彩,然后再尝试制作一个 – 看来你可能不知道为什么某些组合可以工作,吨。

-亚当

我强烈build议使用CG HSVtoRGB着色器function,它们是真棒…它给你自然的色彩控制像一个画家,而不是控制像一个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); 

结果是真棒颜色随机化! 这不是自然的,但它使用自然的颜色渐变,它看起来有机和可控irridescent /柔和的参数。

对于perlin,你可以使用这个函数,它是perlin的一个快速zig zag版本。

 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; } 

这是我为我所做的一个网站写的东西。 它会自动生成一个随机平坦的背景颜色的任何与类.flat-color-gen div。 jquery只是为了将css添加到页面而需要的; 这不是主要部分,这是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); 

使用不同的颜色 。

用javascript编写。

它生成视觉上不同颜色的调色板。

独特的颜色是高度可configuration的:

  • select调色板中有多less种颜色
  • 将色调限制在特定的范围内
  • 将色度(饱和度)限制在特定的范围内
  • 将亮度限制在特定范围内
  • configuration调色板的一般质量

我已经成功使用TriadMixing和CIE94来避免类似的颜色。 以下图像使用input颜色红色,黄色和白色。 看到这里 。

TriadMixing + CIE94