見た目に美しいカラーパレットをランダムに生成するアルゴリズム [終了]
https://stackoverflow.com/questions/43044
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
美しく美しい色を多数ランダムに生成する簡単なアルゴリズムを探しています。したがって、クレイジーなネオンカラー、糞便を思わせる色などは使用しません。
この問題の解決策を見つけましたが、それらは RGB ではない代替カラー パレットに依存しています。前後にマッピングするよりも、ストレート RGB を使用したいと思います。これらの他のソリューションでも、生成できるのはせいぜい 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) と混ぜると、元の色の色合いを保ちながら明度を高めてニュートラルなパステルを作成できます。これらのランダムに生成されたパステルは通常、特に多数の場合によく合います。
上記の方法を使用して生成されたパステル カラーをいくつか示します。
ランダムな色を一定のパステルと混合することもでき、その結果、中間色の色合いのセットが得られます。たとえば、ライトブルーを使用すると、次のような色が作成されます。
さらに進んで、補色やシェーディングのレベルを考慮するヒューリスティックをジェネレーターに追加することもできますが、それはすべて、ランダムな色で実現したい印象によって異なります。
いくつかの追加リソース:
他のヒント
カラーホイールを使用し、ランダムな位置を指定して黄金角 (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 は、データ サイエンティスト向けにカラー パレットを生成する「I want Hue」というツールをリリースしました。さまざまな色空間を使用し、K-means クラスタリングまたは力ベクトル (反発グラフ) を使用してパレットを生成します。これらの方法の結果は非常に優れており、Web ページで理論と実装が示されています。
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.functionfun.net/2008/07/random-pastel-colour-generator.html
別のパレットに変換することは、これを行うためのはるかに優れた方法です。彼らがそうするのには理由があります。他のパレットは「知覚的」です。つまり、似ているように見える色を近くに配置し、1 つの変数を調整すると、予測可能な方法で色が変化します。RGB ではどれも当てはまらず、「相性が良い」色の間には明らかな関係がありません。
シンプルで利点があるため、見落としてはいけない答えは、実際の写真や絵画のサンプリングです。現代アートの写真、セザンヌ、ゴッホ、モネ、写真などのサムネイルからランダムな色を好きなだけランダムなピクセルをサンプリングします。利点は、テーマごとに色を取得できることと、それらが有機的な色であることです。フォルダーに 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;
}
を使用して成功しました トライアドミキシング そして CIE94 似た色を避けるため。次の画像では、入力色として赤、黄、白を使用しています。見る ここ.
これは、C# での簡単でダーティなカラー ジェネレーターです (この記事で説明されている「RYB アプローチ」を使用) 記事）。からのリライトです JavaScript.
使用：
List<Color> ColorPalette = ColorGenerator.Generate(30).ToList();
最初の 2 色は、白と黒の色合いになる傾向があります。私はよく次のようにスキップします (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]));
}
}
}
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))
}
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/hex-color-is-to-black かどうかを確認する方法
David Crow の元の回答の JavaScript 適応、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);
特定の明るさの範囲内に収めることもできます。これにより、「ネオン」カラーの量が少し制御されます。たとえば「明るさ」の場合、
brightness = sqrt(R^2+G^2+B^2)
特定の上限内にある場合は、色あせた明るい色になります。逆に、一定の下限内にある場合は、より暗くなります。これにより、おかしな目立つ色が排除され、非常に高いまたは非常に低い境界を選択した場合、それらはすべて白または黒のいずれかにかなり近くなります。
アルゴリズム的に望むものを得るのは難しいでしょう。人々は長い間色彩理論を研究してきましたが、すべてのルールさえ知りません。
ただし、 いくつかの 悪い色の組み合わせを選別するために使用できるルール (つまり、色の衝突や補色の選択に関するルールがあります)。
図書館のアートセクションに行って色彩理論に関する本を調べて、実際に色を作ってみる前に、何が良い色なのかをより深く理解することをお勧めします。なぜ特定の組み合わせがうまくいき、他の組み合わせがうまくいかないのかさえわからないかもしれません。 t.
-アダム
CG HSVtoRGB シェーダ関数を使用することを強くお勧めします。これは素晴らしいものです...CRT モニターのようなコントロールではなく、画家のような自然なカラー コントロールを提供します (おそらくそうではありません)。
これは1つのfloat値を作る方法です。つまりグレー、色、明るさ、彩度などの組み合わせを 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. 。Jquery は、ページに CSS を追加する目的でのみ必要です。この主要部分では必要ありません。 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);
使用 独特の色.
JavaScriptで書かれています。
のパレットを生成します。 視覚的に 独特の色。
個別の色は高度に構成可能です。
- パレットに含まれる色の数を選択します
- 色相を特定の範囲に制限する
- 彩度（彩度）を特定の範囲に制限する
- 明度を特定の範囲に制限する
- パレットの一般的な品質を構成する
