我正在寻找一种简单的算法来生成大量随机的、美观的颜色。所以没有疯狂的霓虹灯颜色,让人联想到粪便的颜色等等。
我已经找到了这个问题的解决方案,但它们依赖于替代调色板而不是RGB。 我宁愿直接使用RGB,而不是来回映射。这些其他解决方案也最多只能生成32种左右令人愉悦的随机颜色。
任何想法都很好。
我正在寻找一种简单的算法来生成大量随机的、美观的颜色。所以没有疯狂的霓虹灯颜色,让人联想到粪便的颜色等等。
我已经找到了这个问题的解决方案,但它们依赖于替代调色板而不是RGB。 我宁愿直接使用RGB,而不是来回映射。这些其他解决方案也最多只能生成32种左右令人愉悦的随机颜色。
任何想法都很好。
当前回答
转换到另一个调色板是一种更好的方式。他们这样做是有原因的:其他调色板是“感性的”——也就是说,他们把相似的颜色放在一起,调整一个变量会以可预测的方式改变颜色。对于RGB来说,这些都不是真的,在RGB中,颜色之间没有明显的“搭配良好”的关系。
其他回答
你可以让它们在一定的亮度范围内。这样可以稍微控制“霓虹灯”颜色的数量。例如,如果“亮度”
brightness = sqrt(R^2+G^2+B^2)
在一定的高度范围内,它就会被洗掉,变成浅色。相反,如果它在某个下限内,它就会更暗。这将消除任何疯狂的、突出的颜色,如果你选择一个非常高或非常低的边界,它们都将非常接近白色或黑色。
这是我为我做的一个网站写的东西。它会自动为任何带有.flat-color-gen类的div生成随机的平面背景色。Jquery仅用于向页面添加css;它的主要部分是generateFlatColorWithOrder()方法,而不是必需的。
JsFiddle Link
(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);
一个不应该被忽视的答案,因为它简单而有优势,就是对现实生活中的照片和绘画进行采样。在现代艺术图片、塞尚、梵高、莫内、照片的缩略图上随机选取你想要的任意数量的像素。这样做的好处是,您可以根据主题获取颜色,而且它们是有机颜色。只要把20 - 30张照片在一个文件夹和随机抽样随机PIC每次。
转换到HSV值是一种广泛的代码算法心理基于调色板。HSV更容易随机化。
我会使用色轮并在任意位置加上黄金角(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:
巴黎政治学院刚刚发布了一个名为“I want Hue”的工具,可以为数据科学家生成调色板。使用不同的颜色空间,并通过使用k-means聚类或力向量(斥力图)生成调色板,这些方法的结果非常好,他们在他们的网页上展示了理论和实现。
http://tools.medialab.sciences-po.fr/iwanthue/index.php
我强烈推荐使用CG HSVtoRGB着色器功能,它们很棒…它给你像画家一样的自然色彩控制,而不是像CRT显示器那样的控制,你大概不是!
这是一种使1浮点值的方法。即灰色,变成1000ds的颜色和亮度和饱和度的组合等:
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;
}