ランダムカラージェネレーター


440

この関数を前提として、をランダムカラージェネレーターに置き換えます。

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

どうすればできますか?


31
'#' + Math.floor(Math.random()* 16777215).toString(16);
SepehrM 2014


2
@SepehrMがランダムに戻った0.001場合、結果は"#4189"(無効な色-4桁)
KamilKiełczewskiMar

これは私にとって非常に便利なソリューションです。github.com
davidmerfield /

5
'#'+Math.random().toString(16).substr(2,6) (ソース:CodeGolf
ashleedawg

回答:


1018

getRandomColor()代わりに使用"#0000FF"

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>


87
RGBが色空間をラップする方法が原因で、これは非常に暗い不飽和色に偏っていることに注意してください。:マーティンAnkerlは(HSVのような)他の空間から色を生成するだけでなくについての素晴らしい記事がありmartin.ankerl.com/2009/12/09/...
トーマスAhle

13
使用時に0または15を打つ可能性はMath.round(Math.random()*15)1:30のみですが、他の数字の可能性は1:15です。
user123444555621

3
.split( '')呼び出しを削除できます。文字列にはすでに配列インデクサーがあります。
ujeenator 2015

3
また、使用することができジェネレータ関数をよう
tsuz

4
このコードは不完全です。ここにワンライナーがあります:Math.floor(Math.random()* 16777215).toString(16)
DDD

269

私はこれよりも速くも短くも何もないだろうと思います:

"#"+((1<<24)*Math.random()|0).toString(16)

チャレンジ!


18
ゼロで埋めるのを忘れました。
user123444555621

144
'#'+(Math.random()*0xFFFFFF<<0).toString(16);
Mohsen、

15
@ Mohsen、FYIたまにコードで無効な5桁の数字が生成される
rochal

6
結果は6桁に埋め込まれません
Taha Jahangir

33
('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)この方法はまだ(めったに)のような結果が得られ、小さな数字を返さないでしょうが、常に6の長さを返します000cf4か、0000a7私が思うハックビットです。これらの場合、赤の成分はランダムな色には影響しません。
bryc 2012年

162

これは、この問題に関する別の見方です。

私の目標は、鮮やかで明確な色を作成することでした。色を明確にするために、ランダムジェネレーターの使用を避け、虹から「等間隔」の色を選択します。

これは、最適な「一意性」を備えた(つまり、2つのマーカーが類似した色を持たない)Googleマップでポップアウトマーカーを作成するのに最適です。

function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

実際の動作を確認したい場合は、http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.htmlを参照してください。


7
私はこのようなものを探していました!素晴らしいもの!
コーイ

同様の質問への回答と同じアイデアを簡略化して実装しました。stackoverflow.com/ a / 14187677/421010
Andrew

16
では、パラメータの値はどうなるのでしょうか?
Ekramul Hoque、2015

2
私もこのようなものを作成しましたが、それは非常にランダムで全く異なっています。擬似コードはこちらです。hsvは予測可能な動作がはるかに多いため、rgbではなくhsvを使用します。Pythonの実装を確認したい場合は、ここここで使用しまし。「色」のコードを検索する必要があります。
zondo 2016

1
@RobertMolina:すみません、私は自分のものをGitlabに移動しました。疑似コードはここにあり、プロジェクトはここここにあります
zondo

56

誰が倒せるの?

'#'+Math.random().toString(16).substr(-6);

常に機能することが保証されています:http : //jsbin.com/OjELIfo/2/edit

@eterpsコメントに基づいて、ランダムな色の16進表現が非常に短い場合(0.730224609375=> 0.baf)、上記のコードは短い文字列を生成できます。

このコードはすべての場合に機能するはずです。

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#'+c;
}

12
Math.random()が0.022092682472568126を返すと、このコードは無効な '#5a7dd'文字列を生成します。クレイジー!
rochal

#ffffffはあまり頻繁に表示されないため、このようにします。
Warface

これが機能しない場合がかなりあります。Math.random()の次の出力を確認します... 0.730224609375、0.43603515625、0.957763671875、リストが続きます
eterps '27 / 03/15

@eterpsそれらは適切な乱数ではありません!16進の未加工のIEEE 754 doubleを参照してください0.730224609375 = 0x3fe75e0000000000, 0.43603515625 = 0x3fdbe80000000000, 0.957763671875 = 0x3feea60000000000ほとんどすべての仮数が使用されています!それらは単に美化された部分です。正しい:'12桁」出力は次のような結果生じるであろう0.347876714234 = 0x3fd6439cb1ab32ac, 0.447556256665 = 0x3fdca4c2ff5fc450
bryc

2015年以降、多くのWebブラウザーが、内部で使用されているくだらないPRNG Math.random()(@etertpの結果の原因であると想定する必要があります)をより優れたものに置き換えたため、これらの種類の低品質の乱数は過去のものになるはずです今。
bryc

29

16進数の文字のハッシュは必要ありません。JavaScriptはこれを単独で実行できます。

function get_random_color() {
  function c() {
    var hex = Math.floor(Math.random()*256).toString(16);
    return ("0"+String(hex)).substr(-2); // pad with zero
  }
  return "#"+c()+c()+c();
}

29

すべての優れたブラウザで利用可能なHSLを使用することもできます(http://caniuse.com/#feat=css3-colors

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

これはあなたに明るい色だけを与えるでしょう、あなたは明るさ、彩度とアルファで遊んでいます。

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

ありがとう!私はなんとか背景の完璧な色を手に入れることができました:'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'
jj_ 2014年

1
問題ありません、hslのパワーを使用している人がいないことに驚きました:)
kigiri 2014年

stackoverflow.com/a/23861752/1693593、hslaは必要ありませんalpha = 1、ただhslを使用してください

1
この方法で16Mコロールを生成することはできません(たとえば、白黒のグレースケールを取得することはありません)。ただし、各コンポーネントにランダムを使用すると、すべてのhslコロルが取得されます
KamilKiełczewskiMar

1
+1これにより、明度と彩度を使用してランダムな背景色を設定しやすくなり、テキストが常に読みやすくなります
Osvaldo Maria

27

私はこれが好きです: '#' + (Math.random().toString(16) + "000000").substring(2,8)


または'#' + Math.floor(Math.random()*16777215).toString(16);
Mohammad Anini、2015年

16分の1の確率で6桁未満を生成する@MohammadAnin
James

1
これにより、無効な色が生成される可能性があります。例えば'#' + (0.125).toString(16).substring(2, 8) === '#2'。確率が低い(4096分の1と思う)ため危険であり、バグはテストを通過する可能性があります。する必要があります('#' + Math.random().toString(16) + "000000").substring(2, 8)
James

訂正:する必要があります'#' + (Math.random().toString(16) + "000000").substring(2,8)
James

25

明るさ制御によるランダムな色生成:

function getRandColor(brightness){

    // Six levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
    return "rgb(" + mixedrgb.join(",") + ")";
}

1
とてもクールですが、明るさを見たときに期待していたより鮮やかな色ではなく、ほとんどが「パステル」を生成します。トリックの私のバッグにまだ入っています!
JayCrossler

あなたはそれをあなたのウェブサイトのカラーパレットと調和するようにカスタマイズできるので、私はこれが本当に好きです
Emanuel Gianico

20
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123

私はこれが読み
やすい

1
Math.random()返す場合0.125、結果は#0.2(無効な色)になります(スライスの代わりにパディングを追加する必要があります)
KamilKiełczewski19年

18

JavaScriptのランダムな16進カラーコードジェネレーターについてPaul Irishが書いた記事は、本当に素晴らしいものです。使用する:

'#'+Math.floor(Math.random()*16777215).toString(16);

これがソースリンクです:

http://www.paulirish.com/2009/random-hex-color-code-snippets/


5
これにより、「1fa4c」などの整形式でないカラー値が返される場合があります(3文字または6文字である必要があります)
jj_

1
@jj_ですか?すみません、気づきませんでした。共有ありがとう
way2vin 2014年

ランダムなリターンの0.00001場合、結果は#a7(無効な色)になります
KamilKiełczewski19年

1
'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')
Haytam

17

@Anatoliyが提供するソリューションをひねります。

(背景の)明るい色のみを生成する必要があったので、3文字(#AAA)形式を使用しました。

function get_random_color() {
    var letters = 'ABCDE'.split('');
    var color = '#';
    for (var i=0; i<3; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

これは、ほとんどの場合、明るいが似ている色を生成する可能性が高いと思います。よりランダムな色のまばらな範囲については、@ Anatoliの応答の大部分が優れていると思います
larrytech

15

あなたが私のような初心者で、16進数などについて無知である場合、これはより直感的かもしれません。

function r() { return Math.floor(Math.random() * 255) }

var color = 'rgb(' + r() + "," + r() + "," + r() + ')';

あなただけのような文字列で終わる必要があります 'rgb(255, 123, 220)'


この答えがトップになる必要があります
Gil Epshtain

ただし、0を取得するには256を使用する必要があります。
リサセリーリ

13

これは、Google検索を使用して非常に簡単に見つけることができます。

function random_color(format)
{
    var rint = Math.round(0xffffff * Math.random());
    switch(format)
    {
        case 'hex':
            return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
            break;

        case 'rgb':
            return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
            break;

        default:
            return rint;
            break;
    }
}

更新版:

function random_color( format ){
  var rint = Math.floor( 0x100000000 * Math.random());
  switch( format ){
    case 'hex':
      return '#' + ('00000'   + rint.toString(16)).slice(-6).toUpperCase();
    case 'hexa':
      return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
    case 'rgb':
      return 'rgb('  + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
    case 'rgba':
      return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
    default:
      return rint;
  }
}

1
多分そうです。しかし、Google Adwordsの収益の見込みをどのサイトに優先しますか?=)
デビッドはモニカを

2
どのサイトがあなたに答えを与えますか?彼らがあなたに答えを提供するならば、彼らはヒットを得るはずです。
ファンキーな男

1
@FunkyDudeは、この結果がGoogleで1番目になり、stackoverflowが存在する理由は、Googleをあまり頻繁に使用しないためです;)
Akshat


10
var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

これがどのように機能するかの内訳:

Math.random()*256 0〜256(0〜255を含む)のランダムな(浮動小数点)番号を取得します
例の結果:116.15200161933899

追加|0小数点以下はすべてオフストリップを。
例:116.15200161933899-> 116

を使用すると、.toString(16)この数値が16進数(ベース16)に変換されます。
例:116-> 74
別の例:228-> e4

追加"0"すると、ゼロが追加されます。最終結果は各色に2つの文字を持つ必要があるため、これはサブストリングを取得するときに重要になります。
例:74-> 074
別の例:8-> 08

.substr(-2)最後の2文字だけを取得します。
例:074-> 74
別の例:08-> 08(追加しなかった場合"0"、「08」ではなく「8」が生成されます)

forループはこのような何かを生産、色文字列にそれぞれの結果を追加し、このループを3回実行されます。
#7408e4


あなたはあなたの答えを具体化すべきです。
joce

8

したがって、ここでのすべての回答は良好ですが、出力をもう少し制御したかったのです。たとえば、白に近い色合いを防ぎながら、色合いを洗い流さずに明るく鮮やかな色を確保したいと思います。

function generateColor(ranges) {
            if (!ranges) {
                ranges = [
                    [150,256],
                    [0, 190],
                    [0, 30]
                ];
            }
            var g = function() {
                //select random range and remove
                var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
                //pick a random number from within the range
                return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
            }
            return "rgb(" + g() + "," + g() + "," + g() +")";
        };

これで、RGB値を選択する3つの任意の範囲を指定できるようになりました。引数なしでそれを呼び出して、デフォルトのセットを取得することができます。これは通常、かつて明らかな支配的な色合いを持つ非常に鮮やかな色を生成します。または、独自の範囲の配列を指定することもできます。


1
Google Map APIは、「#FFFFFF」形式の16進数のHTMLカラーのみをサポートしています。
Valery Viktorovsky

確かに、数値を16進数に変換するのは非常に簡単です。n.toString(16)で問題が発生するのは、内側のg関数から2文字の戻り値を確実に取得するために、パッドをゼロにする必要がある場合です。
Ollieエドワーズ

8

上位回答の上位投票コメントは、Martin Ankerlのアプローチがランダムな16進数よりも優れていることを示唆しており、Ankerlの方法論は改善していませんが、JavaScriptに正常に変換できました。すでに大きなサイズのこのSOスレッドに追加の回答を投稿すると思ったのは、トップの回答にAnkerlのロジックのJS実装を含むGistにリンクする別のコメントがあり、そのリンクが壊れているためです(404)。評判が良ければ、作成したjsbinリンクにコメントを付けただけです。

// adapted from
// http://jsfiddle.net/Mottie/xcqpF/1/light/
const rgb2hex = (rgb) => {
 return (rgb && rgb.length === 3) ? "#" +
  ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : '';
}

// next two methods converted from Ruby to JS
// soured from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/

// # HSV values in [0..1[
// # returns [r, g, b] values from 0 to 255
const hsv_to_rgb = (h, s, v) => {
  const h_i = Math.floor(h*6)
  const f = h*6 - h_i
  const p = v * (1 - s)
  const q = v * (1 - (f * s))
  const t = v * (1 - (1 - f) * s)
  let r, g, b
  switch(h_i){
    case(0):
      [r, g, b] = [v, t, p]
      break
    case(1):
      [r, g, b] = [q, v, p]
      break
    case(2):
      [r, g, b] = [p, v, t]
      break
    case(3):
      [r, g, b] = [p, q, v]
      break
    case(4):
      [r, g, b] = [t, p, v]
      break
    case(5):
      [r, g, b] = [v, p, q]
      break
  }
  return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)]
}

// # use golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # use random start value
const gen_hex = (numberOfColors) => {
  const colorArray = []
  while (numberOfColors > 0) {
    h += golden_ratio_conjugate
    h %= 1
    colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99)))
    numberOfColors -= 1
  }
  console.log(colorArray)
  return colorArray
}

gen_hex(100)

https://jsbin.com/qeyevoj/edit?js,console


7

まともなランダムさのために。

ランダムカラー

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

ランダムアルファ、ランダムカラー。

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

7

これを実現する方法はたくさんあります。ここに私がしたいくつかがあります:

6つのランダムな16進数字(0-F)を生成します

function randColor() {
    for (var i=0, col=''; i<6; i++) {
        col += (Math.random()*16|0).toString(16);
    }
    return '#'+col;
}

非常に短いワンライナー

'#'+Math.random().toString(16).slice(-6)

個々のHEXコンポーネントを生成(00-FF)

function randColor2() {
    var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*256|0).toString(16)).slice(-2);
    return '#' +r+g+b;
}

オーバーエンジニアリングされた16進文字列(XOR 3つの出力をまとめて色を形成)

function randColor3() {
    var str = Math.random().toString(16) + Math.random().toString(16),
    sg = str.replace(/0./g,'').match(/.{1,6}/g),
    col = parseInt(sg[0], 16) ^ 
          parseInt(sg[1], 16) ^ 
          parseInt(sg[2], 16);
    return '#' + ("000000" + col.toString(16)).slice(-6);
}

extremley shor one-liner:ランダムに戻ると0.125、結果は#0.2(無効な色)になります
KamilKiełczewski19年

@KamilKiełczewski 0.125= 3FC0000000000000IEEE 16進数。16進数3桁は指数、13桁は仮数です。このように、仮数が完全に空になる確率は4.5兆分の1です。Firefox / Chromeの両方で1億回テストしました。あなたはそれを壊そうとしているだけです;)0.125になることMath.randomはありません。そうであれば、PRNGに問題がありますが、それは私の問題ではありません。0.5、0.25、0.0625などの分数は役に立たず、ランダム性は含まれません。たぶん、あなたはこの極端な極端なケースに対する解決策を持っています、ええと?;)
bryc

はい'#'+Math.random().toString(16).split('.')[1].slice(-6).padStart(6,0)、しかし私はこれ
KamilKiełczewskiMar

6

さらに別のランダムな色生成器:

var randomColor;
randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float)
randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer)
randomColor = randomColor.toString(16); // hex representation randomColor
randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
randomColor = "#" + randomColor; // # added

6

Array.prototype.reduce とてもきれいになります。

["r","g","b"].reduce(function(res) {
    return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2)
}, "#")

古いブラウザにはシムが必要です。





5

異なる色を使用する

それは視覚的にパレットを生成します区別できる色のます。

異なる色は高度に設定可能です:

  • パレットの色数を選択してください
  • 色相を特定の範囲に制限する
  • 彩度(彩度)を特定の範囲に制限する
  • 明度を特定の範囲に制限する
  • パレットの一般的な品質を設定する

ここcode..where他の回答の3541行は、誰かがちょうど明確な色を選択するためのコードのように多くの行を書いたのか私は...感動...〜6-10行です
VSYNC

本当に視覚的に区別できる色を選ぶには、単なるランダムな色生成器よりも多くの計算が必要です。
InternalFX

私は2行で実行しました。この関数を変更しました:stackoverflow.com/a/20129594/104380
vsync

それはそれほど単純ではありません。推奨読書
InternalFX

ありがとう、非常に興味深い記事。私の方法は常に同じ色を提供し、結果は一貫して独特です。状況によっては、人間の目には非常にランダムで、よく分散された色が必要になる場合があります。
vsync 2016

3

これがランダムな16進コードジェネレーターの2つのバージョンです。


/* Slowest but shortest. */
"#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});    

/* Good performance with small size. */
"#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,"");

/* Remy Sharp provided one that's the fastest but a little bit too long */
(function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()*(1<<24))).toString(16))


3

この関数は、次の2つの点で他の回答を上回っています。

HSVコーン内で、20回の試行のうちどの色が他の色から最もユークリッド距離が離れているかを見つけることにより、可能な限り異なる色を生成しようとします。

これにより、色相、彩度、または値の範囲を制限できますが、その範囲内で可能な限り異なる色を選択しようとします。

これは非常に効率的ではありませんが、妥当な値の場合(100色を簡単に分解できる人もいますか?)十分に高速です。

JSFiddleを参照してください

  /**
   * Generates a random palette of HSV colors.  Attempts to pick colors
   * that are as distinct as possible within the desired HSV range.
   *
   * @param {number}    [options.numColors=10] - the number of colors to generate
   * @param {number[]}  [options.hRange=[0,1]] - the maximum range for generated hue
   * @param {number[]}  [options.sRange=[0,1]] - the maximum range for generated saturation
   * @param {number[]}  [options.vRange=[0,1]] - the maximum range for generated value
   * @param {number[][]}[options.exclude=[[0,0,0],[0,0,1]]] - colors to exclude
   * 
   * @returns {number[][]} an array of HSV colors (each HSV color 
   * is a [hue, saturation, value] array)
   */
  function randomHSVPalette(options) {
    function random(min, max) {
      return min + Math.random() * (max - min);
    } 

    function HSVtoXYZ(hsv) {
      var h = hsv[0];
      var s = hsv[1];
      var v = hsv[2];
      var angle = h * Math.PI * 2;
      return [Math.sin(angle) * s * v,
              Math.cos(angle) * s * v,
              v];
    }

    function distSq(a, b) {
      var dx = a[0] - b[0];
      var dy = a[1] - b[1];
      var dz = a[2] - b[2];
      return dx * dx + dy * dy + dz * dz;
    }

    if (!options) {
      options = {};
    }

    var numColors = options.numColors || 10;
    var hRange = options.hRange || [0, 1];
    var sRange = options.sRange || [0, 1];
    var vRange = options.vRange || [0, 1];
    var exclude = options.exclude || [[0, 0, 0], [0, 0, 1]];

    var points = exclude.map(HSVtoXYZ);
    var result = [];

    while (result.length < numColors) {
      var bestHSV;
      var bestXYZ;
      var bestDist = 0;
      for (var i = 0; i < 20; i++) {
        var hsv = [random(hRange[0], hRange[1]), random(sRange[0], sRange[1]), random(vRange[0], vRange[1])];
        var xyz = HSVtoXYZ(hsv);
        var minDist = 10;
        points.forEach(function(point) {
          minDist = Math.min(minDist, distSq(xyz, point));
        });
        if (minDist > bestDist) {
          bestHSV = hsv;
          bestXYZ = xyz;
          bestDist = minDist;
        }
      }
      points.push(bestXYZ);
      result.push(bestHSV);
    }

    return result;
  }

  function HSVtoRGB(hsv) {
    var h = hsv[0];
    var s = hsv[1];
    var v = hsv[2];

    var i = ~~(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    v = ~~(255 * v);
    p = ~~(255 * p);
    q = ~~(255 * q); 
    t = ~~(255 * t);
    switch (i % 6) {
      case 0: return [v, t, p];
      case 1: return [q, v, p];
      case 2: return [p, v, t];
      case 3: return [p, q, v];
      case 4: return [t, p, v];
      case 5: return [v, p, q];
    }
  }

  function RGBtoCSS(rgb) {
    var r = rgb[0];
    var g = rgb[1];
    var b = rgb[2];
    var rgb = (r << 16) + (g << 8) + b;
    return '#' + ('000000' + rgb.toString(16)).slice(-6);
  }

3

これまでの略式メソッドのほとんどすべてが、無効な16進コード(5桁)を生成しています。私はここでその問題なしに同様のテクニックに出くわしました:

"#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6)

テスト

コンソールでこれを試してください:

for(i = 0; i < 200; i++) {
    console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6));
}

4
このコードを20000回実行するforループを作成し、長さが7未満の場合にのみコンソールに出力し、文字列が6文字未満の場合を見つけました。また、このコードの1つの問題は、個々の2桁のカラーコードではなく、6桁の文字列全体しか埋めないことです。これは、緑や青の値よりも赤の値の方がゼロになる可能性が高いことを意味します。
エリンハイミング2013年

ランダムが返され0.00001たときの結果は"#000a7"(無効な色-5桁)
KamilKiełczewskiMar

3

私のバージョン:

function RandomColor() {
  var hex = (Math.round(Math.random()*0xffffff)).toString(16);
  while (hex.length < 6) hex = "0" + hex;
  return hex;
}

ランダムで0はないrandomため、色がXDに不十分であると思います
shrekuu

から0までの16進数のみを生成しffffffます。これは完全に均一な分布です。ブラウザの使用を考慮して、ゼロは文字列を完成させるためだけのものです。このソリューションをもっと注意深く見ることをお勧めします。
プロスタコフ2015年

私はいくつかの調整を行いましたが、あなたのコメントにはリンクしていませんでした:)
プロスタコフ

プロスタコフに感謝します。:D
shrekuu 2015年


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.