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

小开

你可以让它们在一定的亮度范围内。这样可以稍微控制“霓虹灯”颜色的数量。例如，如果“亮度”

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

在一定的高度范围内，它就会被洗掉，变成浅色。相反，如果它在某个下限内，它就会更暗。这将消除任何疯狂的、突出的颜色，如果你选择一个非常高或非常低的边界，它们都将非常接近白色或黑色。

小开

从算法上很难得到你想要的东西——人们研究颜色理论已经很长时间了，他们甚至不知道所有的规则。

然而，有一些规则，你可以用它来剔除不好的颜色组合(即，有冲突的颜色和选择互补色的规则)。

我建议你去图书馆的艺术区看看关于色彩理论的书籍，在你尝试一个好颜色之前更好地理解什么是好颜色——看起来你甚至不知道为什么某些组合有效，而另一些则不行。

亚当

小开

最佳答案

您可以将随机颜色的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)混合，通过增加明度而保持原始颜色的色调来创建中性的粉彩。这些随机生成的粉彩通常搭配得很好，尤其是大量的时候

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

First

你也可以把随机的颜色和固定的粉彩混合在一起，这样就得到了一组中性的颜色。例如，使用浅蓝色创建如下颜色:

Second

更进一步，你可以在生成器中添加考虑互补色或阴影级别的启发式，但这一切都取决于你想用随机颜色获得的印象

一些额外的资源:

小开

转换到另一个调色板是一种更好的方式。他们这样做是有原因的:其他调色板是“感性的”——也就是说，他们把相似的颜色放在一起，调整一个变量会以可预测的方式改变颜色。对于RGB来说，这些都不是真的，在RGB中，颜色之间没有明显的“搭配良好”的关系。

小开

我会使用色轮并在任意位置加上黄金角(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

小开

在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

小开

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

小开

一个不应该被忽视的答案，因为它简单而有优势，就是对现实生活中的照片和绘画进行采样。在现代艺术图片、塞尚、梵高、莫内、照片的缩略图上随机选取你想要的任意数量的像素。这样做的好处是，您可以根据主题获取颜色，而且它们是有机颜色。只要把20 - 30张照片在一个文件夹和随机抽样随机PIC每次。

转换到HSV值是一种广泛的代码算法心理基于调色板。HSV更容易随机化。

小开

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

小开

在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

小开

我强烈推荐使用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;
}

小开

David Crow在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))
}

小开

这是我为我做的一个网站写的东西。它会自动为任何带有.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);

小开

JavaScript改编的David Crow的原始答案，包括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);

小开

使用色彩分明的颜色。

用javascript编写。

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

Distinct-colors是高度可配置的:

选择调色板中有多少种颜色
将色调限制在一个特定的范围内
限制色度(饱和度)到一个特定的范围
将亮度限制在一个特定的范围内
配置调色板的一般质量

小开

我已经成功地使用TriadMixing和CIE94来避免相似的颜色。下图使用的输入颜色为红色、黄色和白色。看到在这里。