Generator warna acak


441

Dengan fungsi ini, saya ingin mengganti warnanya dengan generator warna acak.

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

Bagaimana saya bisa melakukannya?


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


2
@SepehrM ketika pengembalian acak 0.001maka hasilnya adalah "#4189"(warna tidak valid - 4 digit)
Kamil Kiełczewski

Ini adalah solusi yang sangat bagus, bagi saya github.com/davidmerfield/randomColor yang
maikelm

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

Jawaban:


1019

Gunakan getRandomColor()di tempat "#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
Perhatikan bahwa ini memiliki bias terhadap warna yang cukup gelap dan tidak jenuh karena cara RGB membungkus ruang warna. Martin Ankerl memiliki artikel yang bagus tentang menghasilkan warna dari ruang lain (seperti HSV) juga: martin.ankerl.com/2009/12/09/…
Thomas Ahle

13
Peluang memukul 0 atau 15 saat menggunakan Math.round(Math.random()*15)hanya 1:30, sedangkan peluang nomor lain adalah 1:15.
user123444555621

3
Anda dapat menghapus panggilan .split (''). String sudah memiliki pengindeks Array.
ujeenator

3
Anda juga bisa menggunakan Fungsi Generator sebagai seperti
tsuz

5
Kode ini lumpuh. Berikut adalah panduan perjalanan: Math.floor (Math.random () * 16777215) .toString (16)
DDD

269

Saya ragu apa pun akan lebih cepat atau lebih pendek dari yang ini:

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

Tantangan!


18
Anda lupa pad dengan nol.
user123444555621

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

15
@Mohsen, FYI setiap sekarang dan kemudian kode Anda menghasilkan nomor 5 digit tidak valid
rochal

6
Hasilnya tidak diisi hingga 6 digit
Taha Jahangir

33
('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)akan selalu mengembalikan panjang 6. meskipun metode ini masih akan (jarang) mengembalikan angka kecil yang memberikan hasil seperti 000cf4atau 0000a7yang agak kikir. dalam kasus ini komponen merah tidak berkontribusi pada warna acak.
bryc

162

Berikut ini adalah pendapat lain tentang masalah ini.

Tujuan saya adalah menciptakan warna-warna cerah dan berbeda. Untuk memastikan warnanya berbeda, saya menghindari menggunakan generator acak dan memilih warna "merata" dari pelangi.

Ini sangat cocok untuk membuat penanda pop-out di Google Maps yang memiliki "keunikan" yang optimal (yaitu, tidak ada dua penanda yang memiliki warna serupa).

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);
}

Jika Anda ingin melihat seperti apa tindakan ini, lihat http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .


7
Saya sudah mencari sesuatu seperti ini! Barang bagus!
Khôi

Saya telah membuat implementasi yang disederhanakan dari ide yang sama dengan jawaban untuk pertanyaan serupa stackoverflow.com/a/14187677/421010
Andrew

16
Jadi apa yang akan menjadi nilai parameter?
Ekramul Hoque

2
Saya juga membuat sesuatu seperti ini, tetapi sangat acak dan sangat berbeda. Kode semu ada di sini . Ia menggunakan hsv daripada rgb, karena hsv memiliki perilaku yang jauh lebih mudah diprediksi. Jika Anda ingin melihat implementasi Python, saya menggunakannya di sini dan di sini . Anda harus mencari kode "warna".
zondo

1
@RobertMolina: Maaf, saya memindahkan barang-barang saya ke Gitlab. Pseudo-code sekarang ada di sini , dengan proyek di sini dan di sini .
Zondo

56

Siapa yang bisa mengalahkannya?

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

Dijamin berfungsi sepanjang waktu: http://jsbin.com/OjELIfo/2/edit

Berdasarkan komentar @eterps kode di atas masih dapat menghasilkan string yang lebih pendek jika representasi heksadesimal dari warna acak sangat pendek ( 0.730224609375=> 0.baf)

Kode ini harus berfungsi dalam semua kasus:

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

12
Ketika Math.random () mengembalikan 0,022092682472568126 kode ini menghasilkan string '# 5a7dd' yang tidak valid. gila!
rochal

Seperti ini karena #ffffff tidak terlalu sering muncul.
Warface

Ada beberapa kejadian di mana ini tidak akan berhasil. Periksa output berikut untuk Math.random () ... 0.730224609375, 0.43603515625, 0.957763671875, dan daftarnya berlanjut ...
eterps

@eterps BUKAN angka acak yang tepat ! Lihat baku IEEE 754 ganda dalam hex: 0.730224609375 = 0x3fe75e0000000000, 0.43603515625 = 0x3fdbe80000000000, 0.957763671875 = 0x3feea60000000000. Nyaris tidak ada mantissa yang digunakan! Mereka hanya pecahan yang dimuliakan. Sebuah tepat '12 digit' keluaran akan menghasilkan hasil seperti:0.347876714234 = 0x3fd6439cb1ab32ac, 0.447556256665 = 0x3fdca4c2ff5fc450
bryc

Sejak 2015, saya percaya banyak browser web telah mengganti PRNG jelek yang digunakan di bawah tenda untuk Math.random()(yang saya anggap bertanggung jawab atas hasil @ etertp) dengan yang lebih baik, jadi jenis angka acak berkualitas rendah itu seharusnya sudah ketinggalan zaman. sekarang.
bryc

30

Anda juga dapat menggunakan HSL yang tersedia di setiap browser yang bagus ( http://caniuse.com/#feat=css3-colors )

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

Ini hanya akan memberi Anda warna-warna cerah, Anda bisa bermain-main dengan kecerahan, saturasi dan alpha.

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

Terima kasih! Saya berhasil mendapatkan warna yang sempurna untuk latar belakang dengan:'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'
jj_

1
Tidak masalah, saya terkejut melihat tidak ada yang menggunakan kekuatan hsl :)
kigiri

stackoverflow.com/a/23861752/1693593 , hsla tidak diperlukan itu alpha = 1, cukup gunakan hsl

1
Anda tidak dapat menghasilkan 16 juta kolor dengan cara ini (misalnya Anda tidak akan pernah mendapatkan skala abu-abu putih) - namun ya - jika kami menggunakan secara acak untuk setiap komponen maka kami mendapatkan semua hsl corol
Kamil Kiełczewski

1
+1 Ini membuatnya lebih mudah untuk menggunakan cahaya dan saturasi untuk mengatur warna latar belakang acak sambil memastikan bahwa teks selalu dapat dibaca
Osvaldo Maria

29

Tidak perlu hash huruf heksadesimal. JavaScript dapat melakukan ini sendiri:

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();
}

27

Saya suka yang ini: '#' + (Math.random().toString(16) + "000000").substring(2,8)


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

@MohammadAnin yang memiliki peluang 1 dari 16 menghasilkan kurang dari 6 digit
James

1
Ini mungkin menghasilkan warna yang tidak valid. Sebagai contoh '#' + (0.125).toString(16).substring(2, 8) === '#2'. Ini berbahaya karena kemungkinannya rendah (1 dalam 4096 saya pikir) sehingga bug kemungkinan akan melewati pengujian. Anda harus ('#' + Math.random().toString(16) + "000000").substring(2, 8)
James

Koreksi: harus'#' + (Math.random().toString(16) + "000000").substring(2,8)
James

25

Generasi warna acak dengan kontrol kecerahan:

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
Sangat keren, meskipun sebagian besar menghasilkan 'warna pastel' daripada warna yang lebih cerah yang saya harapkan ketika saya melihat kecerahan. Masih masuk ke tas trik saya!
JayCrossler

Saya sangat suka yang ini karena Anda dapat menyesuaikannya agar selaras dengan palet warna situs web Anda
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

Saya suka ini karena keterbacaannya
hitautodestruct

1
jika Math.random() kembali 0.125maka hasilnya akan menjadi #0.2(warna tidak valid) (Anda perlu menambahkan beberapa lapisan sebagai gantinya)
Kamil Kiełczewski

18

Artikel yang ditulis oleh Paul Irish pada Random Hex Color Code Generator di JavaScript benar-benar menakjubkan. Menggunakan:

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

Inilah tautan sumber:

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


5
ini kadang-kadang akan mengembalikan nilai warna yang tidak terbentuk seperti "1fa4c" (harus 3 atau 6 karakter)
jj_

1
@ jj_ apakah itu? maaf saya tidak memperhatikan itu. Terima kasih telah berbagi
way2vin

ketika acak kembali 0.00001maka hasilnya adalah #a7(warna tidak valid)
Kamil Kiełczewski

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

17

Berikut ini twist pada solusi yang disediakan oleh @Anatoliy.

Saya hanya perlu menghasilkan warna terang (untuk latar belakang), jadi saya menggunakan tiga huruf (#AA) format:

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;
}

Saya pikir ini kemungkinan akan menghasilkan warna yang paling sering mirip meskipun cahaya. Untuk rentang warna acak yang lebih jarang, saya pikir tanggapan @ Anatoli lebih baik untuk sebagian besar
larrytech

15

Jika Anda seorang pemula seperti saya, tidak mengerti tentang hexadecimal dan semacamnya, ini mungkin lebih intuitif.

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

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

Anda hanya perlu berakhir dengan string seperti 'rgb(255, 123, 220)'


jawaban ini harus menjadi yang teratas
Gil Epshtain

Anda harus menggunakan 256 untuk mendapatkan 0.
Lisa Cerilli

13

Ini dapat dengan mudah ditemukan menggunakan Pencarian 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;
    }
}

Versi terbaru:

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
Mungkin begitu; tetapi ke situs mana Anda lebih suka pendapatan Google Adwords pergi? =)
David mengatakan mengembalikan Monica

2
situs mana yang memberi Anda jawabannya? jika mereka memberi Anda jawabannya, mereka harus mendapatkan hit.
Funky Dude

1
@FunkyDude sekarang hasil ini adalah yang teratas di google & alasan stackoverflow ada adalah untuk tidak menggunakan google terlalu sering;)
Akshat

10

Jawaban singkat dengan pad ke ukuran yang tepat

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


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

Rincian cara kerjanya:

Math.random()*256mendapat nomor acak (titik mengambang) dari 0 hingga 256 (termasuk 0 hingga 255)
Hasil contoh: 116.15200161933899

Menambahkan |0strip dari semuanya setelah titik desimal.
Contoh: 116.15200161933899 -> 116

Menggunakan .toString(16)konversi nomor ini ke heksadesimal (basis 16).
Contoh: 116 -> 74
contoh lain: 228 -> e4

Menambahkan "0"bantalan dengan nol. Ini akan menjadi penting ketika kita mendapatkan substring, karena hasil akhir kita harus memiliki dua karakter untuk setiap warna.
Mis: 74 -> 074
contoh lain: 8 -> 08

.substr(-2)hanya mendapatkan dua karakter terakhir.
Contoh: 074 -> 74
Contoh lain: 08 -> 08 (jika kami tidak menambahkannya "0", ini akan menghasilkan "8" bukannya "08")

The forloop berjalan lingkaran ini tiga kali, menambahkan setiap hasil ke string warna, menghasilkan sesuatu seperti ini:
#7408e4


Anda harus menyempurnakan jawaban Anda.
joce

8

Jadi sementara semua jawaban di sini bagus, saya ingin sedikit lebih banyak kontrol atas output. Misalnya saya ingin mencegah warna putih dekat, sambil memastikan saya mendapatkan warna-warna cerah yang cerah dan tidak luntur.

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() +")";
        };

Jadi sekarang saya dapat menentukan 3 rentang acak untuk memilih nilai rgb. Anda dapat menyebutnya tanpa argumen dan mendapatkan set default saya yang biasanya akan menghasilkan warna yang cukup cerah dengan warna dominan yang jelas sekali, atau Anda dapat menyediakan berbagai rentang Anda sendiri.


1
Google Map API hanya mendukung warna HTML heksadesimal dalam format "#FFFFFF".
Valery Viktorovsky

Tentu, cukup mudah untuk mengubah angka menjadi hex n.toString (16) hanya halangan adalah Anda harus nol pad untuk memastikan Anda mendapatkan nilai pengembalian dua karakter dari fungsi g dalam.
Ollie Edwards

8

Komentar pilihan teratas dari jawaban teratas menunjukkan bahwa pendekatan Martin Ankerl lebih baik daripada angka hex acak, dan meskipun saya belum memperbaiki metodologi Ankerl, saya telah berhasil menerjemahkannya ke JavaScript. Saya pikir saya akan mengirim jawaban tambahan untuk utas SO yang sudah berukuran mega ini karena jawaban teratas memiliki komentar lain yang menghubungkan ke inti dengan implementasi JS dari logika Ankerl dan tautan itu rusak (404). Jika saya memiliki reputasi, saya hanya akan berkomentar tautan jsbin yang saya buat.

// 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

Untuk keacakan yang layak.

Warna acak

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

Alfa acak, warna acak.

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

7

Ada begitu banyak cara untuk mencapai ini. Inilah yang saya lakukan:

Menghasilkan enam digit hex acak (0-F)

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

One-liner yang sangat singkat

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

Menghasilkan masing-masing komponen 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;
}

String hex yang direkayasa secara berlebihan (XOR 3 output bersama-sama untuk membentuk warna)

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: ketika pengembalian acak 0.125maka hasilnya adalah #0.2(warna tidak valid)
Kamil Kiełczewski

@ KamilKiełczewski 0.125= 3FC0000000000000dalam IEEE hex. 3 digit hex adalah eksponen, 13 adalah mantissa. Ada kemungkinan 1 dalam 4,5 kuadriliun mantissa benar-benar kosong seperti itu. Saya menguji 100m kali di kedua Firefox / Chrome. Anda hanya mencoba untuk memecahkannya;). Math.randomseharusnya tidak memberi Anda 0,125. Dan jika itu terjadi, ada masalah dengan PRNG, yang bukan masalah saya. Pecahan seperti 0,5, 0,25, 0,0625 dll tidak berguna, mereka tidak mengandung keacakan. Mungkin Anda punya solusi untuk kasus tepi ekstrem ini, hm? ;)
bryc

ya '#'+Math.random().toString(16).split('.')[1].slice(-6).padStart(6,0)tapi saya lebih suka ini
Kamil Kiełczewski

6

Namun generator warna acak lainnya:

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 membuatnya sangat bersih.

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

Membutuhkan shim untuk browser lama.


di konsol chrome allways kembali # 000000
Kamil Kiełczewski

6

Anda dapat menggunakan fungsi sederhana ini

function getRandomColor(){
 var color =  "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
 return color;
}

1
ketika acak mengembalikan 0.001hasilnya "#4189"(warna tidak valid 4 digit)
Kamil Kiełczewski


5

Gunakan warna berbeda .

Ini menghasilkan palet warna yang berbeda secara visual .

warna yang berbeda sangat dapat dikonfigurasi:

  • Pilih berapa banyak warna dalam palet
  • Batasi rona ke rentang tertentu
  • Batasi kroma (saturasi) ke rentang tertentu
  • Batasi cahaya ke rentang tertentu
  • Konfigurasikan kualitas umum palet

3541 baris kode..di mana jawaban lain di sini adalah ~ 6-10 baris ... saya terkesan bagaimana seseorang menulis begitu banyak baris kode hanya untuk memilih warna yang berbeda ..
vsync

Memilih warna yang benar-benar berbeda secara visual membutuhkan lebih banyak matematika daripada sekadar penghasil warna acak.
InternalFX

Saya hanya melakukannya dalam 2 baris .. memodifikasi fungsi ini: stackoverflow.com/a/20129594/104380
vsync

Tidak sesederhana itu. menyarankan membaca
InternalFX

Terima kasih, artikel yang sangat menarik. metode saya selalu memberikan warna yang sama, dan hasilnya konsisten dan berbeda. Saya kira dalam beberapa situasi Anda mungkin perlu warna yang benar-benar acak, didistribusikan dengan baik yang cantik bagi mata manusia.
vsync

3

Berikut adalah dua versi saya untuk generator kode hex acak.


/* 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

Fungsi ini melampaui jawaban lainnya dengan dua cara:

Ia mencoba untuk menghasilkan warna sejelas mungkin dengan menemukan warna dari 20 percobaan yang memiliki jarak euclidian terjauh dari yang lain dalam kerucut HSV

Ini memungkinkan Anda untuk membatasi rona, saturasi, atau rentang nilai, tetapi masih berusaha untuk memilih warna sejelas mungkin dalam rentang itu.

Ini tidak super efisien, tetapi untuk nilai-nilai yang wajar (siapa yang bisa memilih 100 warna dengan mudah?) Cukup cepat.

Lihat 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

Hampir semua metode tulisan tangan sebelumnya menghasilkan kode hex yang tidak valid (lima digit). Saya menemukan teknik yang sama hanya tanpa masalah itu di sini :

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

Uji

Coba ini di konsol:

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

4
Saya membuat for-loop yang menjalankan kode ini 20.000 kali dan hanya dicetak ke konsol jika panjangnya kurang dari 7, dan saya memang menemukan kasus di mana string kurang dari 6 karakter. Selain itu, satu masalah dengan kode ini adalah bahwa ia hanya mengisi seluruh string 6 digit, bukan kode warna 2 digit individual, yang berarti Anda lebih cenderung memiliki angka nol di nilai merah daripada di nilai hijau atau biru.
Erin Heyming

ketika acak mengembalikan 0.00001hasilnya "#000a7"(warna tidak valid - 5 digit)
Kamil Kiełczewski

3

Versi saya:

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

Saya pikir yang tidak acak 0membuat warna tidak randomcukup XD
shrekuu

Kami secara acak menghasilkan bilangan heksadesimal dari 0hingga ffffff. Yang merupakan distribusi seragam yang sempurna . Nol itu hanya untuk menyelesaikan string, karena pertimbangan penggunaan browser. Saya sarankan Anda melihat lebih hati-hati pada solusi ini.
Prostakov

Saya memang melakukan beberapa penyesuaian, tidak terkait dengan komentar Anda :)
Prostakov

Terima kasih Prostakov. : D
shrekuu


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.