我正在寻找一种简单的算法来生成大量随机的,美观的颜色。因此,没有疯狂的霓虹色,让人想起粪便的颜色等。
我已经找到了解决此问题的方法,但是它们依赖于替代RGB的调色板。我宁愿只使用纯RGB,也不愿来回映射。这些其他解决方案最多也只能生成32种左右的令人愉悦的随机颜色。
任何想法都很棒。
我正在寻找一种简单的算法来生成大量随机的,美观的颜色。因此,没有疯狂的霓虹色,让人想起粪便的颜色等。
我已经找到了解决此问题的方法,但是它们依赖于替代RGB的调色板。我宁愿只使用纯RGB,也不愿来回映射。这些其他解决方案最多也只能生成32种左右的令人愉悦的随机颜色。
任何想法都很棒。
Answers:
您可以将随机颜色的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)混合会通过增加亮度并同时保持原始颜色的色调来创建中性柔和的粉彩。这些随机生成的粉彩通常搭配得很好,尤其是数量很大时。
这是使用上述方法生成的一些柔和的颜色:
您还可以将随机颜色与恒定的柔和色混合在一起,以产生一组中性色。例如,使用浅蓝色可创建以下颜色:
更进一步,您可以在生成器中添加启发式算法,以考虑到互补色或阴影级别,但是这完全取决于您希望使用随机色获得的印象。
一些其他资源:
我将使用色轮,并在随机位置上添加黄金角(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
作为“绘画风格的色彩合成”。
该算法生成颜色,并选择每种新颜色,以使其与先前选择的颜色之间的欧氏距离最大化。
在这里,您可以在javascript中找到一个好的实现:
http://afriggeri.github.com/RYB/
更新2:
Sciences Po Medialb刚刚发布了一个名为“我想要色相”的工具,该工具可以为数据科学家生成调色板。使用不同的色彩空间并通过k均值聚类或力矢量(斥力图)生成调色板。这些方法的结果非常好,它们在其网页中展示了理论和实现。
在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
我已经成功使用TriadMixing和CIE94避免了相似的颜色。下图使用红色,黄色和白色作为输入颜色。看这里。
因为它很简单并且具有优势,所以一个不容忽视的答案是对真实照片和绘画的采样。在现代艺术图片,塞尚,梵高,梦网,照片的缩略图上随意采样任意数量的随机像素...优点是您可以按主题获得颜色,并且它们是有机颜色。只需将20-30张图片放在一个文件夹中,然后每次随机抽取一张随机图片。
转换为HSV值是用于基于心理的调色板的广泛编码算法。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;
}
这是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]));
}
}
}
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的所有积分
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);
从算法上很难获得想要的东西-人们已经研究颜色理论很长时间了,他们甚至不知道所有规则。
但是,您可以使用一些规则来剔除不良的颜色组合(即,有一些规则可以使颜色发生冲突并选择互补色)。
我建议您访问图书馆的艺术版块,并阅读有关色彩理论的书籍,以便在尝试制作一种好色彩之前更好地了解什么是好色彩-看来您甚至可能不知道为什么某些组合有效而其他组合却不起作用t。
-亚当
我强烈建议您使用CG HSVtoRGB着色器功能,它们非常棒...它为您提供了自然的色彩控制(如绘画工具),而不是诸如crt监视器的控制,您大概不会!
这是使1浮点值的一种方法。即灰色,分为颜色,亮度和饱和度等的1000 ds:
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);
结果是超棒的颜色随机化!它不是自然的,但使用自然的颜色渐变,看起来有机且可控制的虹彩/粉彩参数。
对于perlin,您可以使用此功能,它是perlin的快速之字形版本。
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;
}
这是我为自己制作的网站写的。它将为该类的任何div自动生成随机的平坦背景颜色.flat-color-gen
。仅在将CSS添加到页面中时才需要Jquery。它的主要部分(generateFlatColorWithOrder()
方法)不是必需的。
(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);