Rastgele renk üreteci


441

Bu işlev verildiğinde, rengi rastgele bir renk üreteci ile değiştirmek istiyorum .

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

Nasıl yapabilirim?


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


2
@SepehrM rasgele geri döndüğünde 0.001sonuç "#4189"(geçersiz renk - 4 basamaklı)
Kamil Kiełczewski

Bu çok güzel bir çözüm, benim için çok yararlı github.com/davidmerfield/randomColor
maikelm

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

Yanıtlar:


1019

Şunun getRandomColor()yerine kullanın "#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'nin renk alanını sarma şekli nedeniyle bunun oldukça karanlık ve doymamış renklere karşı bir önyargıya sahip olduğunu unutmayın. Martin Ankerl'in diğer alanlardan (HSV gibi) renk üretme konusunda da güzel bir makalesi var: martin.ankerl.com/2009/12/09/…
Thomas Ahle

13
Kullanırken 0 veya 15'e vurma şansı Math.round(Math.random()*15)sadece 1:30 iken, diğer sayıların şansı 1:15'dir.
user123444555621

3
.Split ('') çağrısını kaldırabilirsiniz. Dize zaten Dizi dizinleyicisine sahip.
ujeenator

3
Ayrıca kullanabilirsiniz Jeneratör Fonksiyonu olarak böyle
tsuz

5
Bu kod topal. Heres a oneliner: Math.floor (Math.random () * 16777215) .toString (16)
DDD

269

Bir şeyin bundan daha hızlı veya daha kısa olacağından şüpheliyim:

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

Meydan okuma!


18
Sıfırlarla doldurmayı unuttun.
user123444555621

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

15
@Mohsen, FYI her zaman ve sonra kodunuz geçersiz 5 haneli sayı üretir
rochal

6
Sonuç 6 basamak boşluklarla değil
Taha Jahangir

33
('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)Bu yöntem yine de (nadiren) gibi sonuçlar veren 000cf4veya 0000a7bence biraz hacky olan küçük sayılar döndürecek olsa da her zaman 6 uzunluğu döndürecektir . bu durumlarda kırmızı bileşen rastgele renge katkıda bulunmaz.
bryc

162

İşte bu sorunu bir kez daha ele alalım.

Amacım canlı ve belirgin renkler yaratmaktı. Renklerin farklı olmasını sağlamak için rastgele bir jeneratör kullanmaktan kaçınırım ve gökkuşağından "eşit aralıklı" renkler seçerim.

Bu, Google Haritalar'da en iyi "benzersizliğe" sahip pop-out işaretçileri oluşturmak için mükemmeldir (yani, hiçbir iki işaret benzer renklere sahip olmayacaktır).

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

Bunun nasıl çalıştığını görmek istiyorsanız, bkz . Http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .


7
Ben böyle bir şey arıyordum! Harika şeyler!
Khôi

Benzer sorunun cevabıyla
Andrew

16
Peki parametrenin değeri ne olacak?
Ekramul Hoque

2
Ayrıca böyle bir şey yarattım, ama oldukça rastgele ve oldukça farklı. Sahte kod burada . Rgb yerine hsv kullanır, çünkü hsv çok daha öngörülebilir bir davranışa sahiptir. Python uygulamasını görmek isterseniz, burada ve burada kullandım . Kodda "renk" için arama yapmanız gerekir.
zondo

1
@RobertMolina: Üzgünüm, eşyalarımı Gitlab'a taşıdım. Sahte kod şimdi burada , burada ve burada projelerle .
zondo

56

Kim yenebilir?

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

Her zaman çalışması garanti: http://jsbin.com/OjELIfo/2/edit

@Eterps yorumuna dayanarak, rastgele rengin onaltılı gösterimi çok kısaysa yukarıdaki kod yine de daha kısa dizeler oluşturabilir ( 0.730224609375=> 0.baf)

Bu kod her durumda çalışmalıdır:

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

12
Math.random () 0.022092682472568126 döndürdüğünde, bu kod geçersiz '# 5a7dd' dizesi üretir. çılgın!
rochal

#Ffffff beri çok sık görünmüyor.
Warface

Bunun işe yaramayacağı birkaç olay var. Math.random () ... 0.730224609375, 0.43603515625, 0.957763671875 için aşağıdaki çıktıyı kontrol edin ve liste devam ediyor ...
eterps

@eterps Bunlar doğru rasgele sayılar DEĞİLDİR ! Onaltılık ham IEEE 754 çift bakınız: 0.730224609375 = 0x3fe75e0000000000, 0.43603515625 = 0x3fdbe80000000000, 0.957763671875 = 0x3feea60000000000. Mantislerden neredeyse hiç kullanılmıyor! Onlar sadece yüceltilmiş kesirler. Bir doğru : '12 hane' çıkışı gibi sonuçlar üretecektir0.347876714234 = 0x3fd6439cb1ab32ac, 0.447556256665 = 0x3fdca4c2ff5fc450
bryc

2015'ten beri, birçok web tarayıcısının kaputun altında kullanılan boktan PRNG'leri Math.random()(@ etertp'in sonuçlarından sorumlu olduğunu varsaymak zorundayım) daha iyi olanlarla değiştirdiğine inanıyorum, bu nedenle düşük kaliteli rasgele sayı türleri geçmişte kaldı şimdi.
bryc

29

Onaltılık harflerin karma değerine gerek yoktur. JavaScript bunu kendi başına yapabilir:

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

Her iyi tarayıcıda bulunan HSL'yi de kullanabilirsiniz ( http://caniuse.com/#feat=css3-colors )

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

Bu size sadece parlak renkler verecektir, parlaklık, doygunluk ve alfa ile oynayabilirsiniz.

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

Teşekkürler! Arka planlar için mükemmel renkler elde etmeyi başardım:'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'
jj_

1
Hayır prob, hsl gücünü kullanan kimseyi görmekten şaşırdım :)
kigiri

stackoverflow.com/a/23861752/1693593 , hsla gerekli değildir alpha = 1, sadece hsl kullanın

1
Bu şekilde 16M kolor üretemezsiniz (örneğin, asla beyaz-siyah gri tonlama elde edemezsiniz) - ancak evet - her bir bileşen için rastgele kullanırsak, tüm hsl corol'ları alırız
Kamil Kiełczewski

1
+1 Bu, metnin her zaman okunabilir olmasını sağlarken rastgele arka plan renkleri ayarlamak için açıklık ve doygunluğu kullanmayı kolaylaştırır
Osvaldo Maria

27

Bunu beğendim: '#' + (Math.random().toString(16) + "000000").substring(2,8)


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

@MohammadAnin, 6 haneden daha az üretme şansına 16'da 1 sahip
James

1
Bu geçersiz renkler üretebilir. Örneğin '#' + (0.125).toString(16).substring(2, 8) === '#2'. Tehlikelidir çünkü olasılık düşüktür (4096'da 1), bu yüzden bir hatanın testlerden geçmesi muhtemeldir. '#' + Math.random().toString(16) + "000000").substring(2, 8)
James

Düzeltme: olmalı'#' + (Math.random().toString(16) + "000000").substring(2,8)
James

25

Parlaklık kontrolü ile rastgele renk üretimi:

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
Çok havalı olsa da, parlaklık gördüğümde umduğum daha canlı renkler yerine çoğunlukla 'pastel' üretir. Hala hileler çantama giriyorum!
JayCrossler

Bunu gerçekten beğendim çünkü web sitenizin renk paleti ile uyumlu olacak şekilde özelleştirebilirsiniz
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

Bu okunabilirlik için bunu seviyorum
hitautodestruct

1
eğer Math.random()dönüş 0.125o zaman sonuç #0.2(geçersiz renk) olacaktır (dilim yerine biraz dolgu eklemeniz gerekir)
Kamil Kiełczewski

18

Paul Irish tarafından JavaScript'te Rastgele Hex Renk Kodu Oluşturucu üzerine yazılmış makale kesinlikle şaşırtıcı. kullanın:

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

İşte kaynak bağlantı:

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


5
bu bazen "1fa4c" gibi iyi biçimlendirilmemiş renk değerleri döndürür (3 veya 6 karakter olmalıdır)
jj_

1
@jj_ değil mi? üzgünüm bunu fark etmedim.
Paylaştığınız

Rastgele dönüş olduğunda 0.00001sonuç #a7(geçersiz renk)
Kamil Kiełczewski

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

17

@Anatoliy tarafından sağlanan çözüm üzerinde bir bükülme.

Sadece arka plan için açık renkler üretmem gerekiyordu, bu yüzden üç harfli (#AAA) formatla gittim:

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

Bence bu ışık olmasına rağmen en çok benzer renkleri üretecek gibi görünüyor. Daha seyrek rastgele renkler için, @
Anatoli'nin cevabının

15

Benim gibi bir çaylak iseniz, onaltılık ve benzeri şeyler hakkında clueless, bu daha sezgisel olabilir.

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

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

Sonunda böyle bir dize ile son bulmanız gerekir 'rgb(255, 123, 220)'


bu cevabın birinci olması gerekiyor
Gil Epshtain

0 almak için 256 kullanmanız gerekir.
Lisa Cerilli

13

Bu, Google Arama kullanılarak kolayca bulunabilir:

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

Güncellenmiş versiyon:

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
Belki bu yüzden; ancak olası Google Adwords gelirinin hangi siteye gitmesini tercih edersiniz? =)
David, Monica

2
hangi site size cevap veriyor? eğer size cevabı veriyorlarsa, isabetleri almalıdırlar.
Funky Dude

1
@FunkyDude şimdi bu sonuç google'da en iyisi ve stackoverflow'un var olmasının nedeni google'ı çok sık kullanmamaktır;)
Akshat

10

Tam boyuta ped ile kısa cevap

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

Bunun nasıl çalıştığına dair bir döküm:

Math.random()*2560'dan 256'ya (0 ila 255 dahil) rastgele (kayan nokta) bir sayı alır
Örnek sonuç: 116.15200161933899

|0Ondalık noktadan sonra her şeyi şeritler ekleyerek .
Örn: 116.15200161933899 -> 116

Kullanmak .toString(16)bu sayıyı onaltılık biçime dönüştürür (temel 16).
Örn: 116 -> 74
Başka bir ör: 228 -> e4

Ekleme "0"sıfır ile doldurur. Alt dizeyi aldığımızda bu önemli olacaktır, çünkü nihai sonucumuzun her renk için iki karakter içermesi gerekir.
Örn: 74 -> 074
Başka bir örnek: 8 -> 08

.substr(-2)sadece son iki karakteri alır.
Örn: 074 -> 74
Başka bir ör: 08 -> 08 (eğer eklemeseydik "0", bu "08" yerine "8" üretecekti)

forDöngü böyle bir şey üreten, renk dizesine her sonuca ekleyerek, bu döngü üç defa çalıştırır:
#7408e4


Cevabınızı etmelisiniz.
joce

8

Buradaki tüm cevaplar iyi olsa da, çıktı üzerinde biraz daha fazla kontrol istedim. Örneğin, beyaza yakın herhangi bir tonu önlemek, gölgeleri yıkanmamış parlak canlı renkler elde etmemi sağlamak istiyorum.

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

Şimdi rgb değerlerini seçmek için 3 keyfi aralık belirtebilirim. Hiçbir argüman olmadan arayabilir ve genellikle bir kez belirgin baskın gölge ile oldukça canlı bir renk oluşturacak olan varsayılan setimi alabilir veya kendi aralık dizinizi sağlayabilirsiniz.


1
Google Harita API'sı "#FFFFFF" biçiminde yalnızca onaltılık HTML rengini destekler.
Valery Viktorovsky

Tabii, bir sayıyı hex n.toString'e (16) dönüştürmek için oldukça basittir, iç g işlevinden iki karakterli bir dönüş değeri aldığınızdan emin olmak için sıfır pedine ihtiyacınız olacaktır.
Ollie Edwards

8

En iyi yanıtın en çok oy alan yorumu, Martin Ankerl'in yaklaşımının rastgele onaltılık sayılardan daha iyi olduğunu ve Ankerl'in metodolojisini geliştirmememe rağmen, başarıyla JavaScript'e çevirdiğimi gösteriyor. Zaten mega-boyutlu SO iş parçacığına ek bir cevap göndereceğimi düşündüm çünkü en iyi cevap, Ankerl'in mantığının JS uygulamasıyla bir Gist'e bağlantı veren başka bir yorum içeriyor ve bu bağlantı koptu (404). Eğer itibara sahip olsaydım, basitçe oluşturduğum jsbin bağlantısını yorumlardım.

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

İyi bir rastgelelik için.

Rastgele renk

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

Rasgele alfa, rastgele renk.

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

7

Bunu başarmanın birçok yolu var. İşte yaptığım bazıları:

Altı rasgele onaltılık basamak oluşturur (0-F)

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

Son derece kısa tek astar

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

Bağımsız HEX bileşenleri (00-FF) üretir

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

Aşırı tasarlanmış altıgen dize (XORs 3, renk oluşturmak için birlikte çıkar)

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 short one-liner: random return 0.125zaman sonuç #0.2(geçersiz renk)
Kamil Kiełczewski

@ KamilKiełczewski 0.125= 3FC0000000000000IEEE hex'de . 3 adet onaltılık sayı üs, 13'ü mantistir. Bir var 1 4.5 katrilyon mantis tamamen böyle boş olduğunu şans. Hem Firefox / Chrome'da 100m kez test ettim. Sadece kırmaya çalışıyorsunuz ;). Math.randomgerektiğini asla size 0.125'e ver. Ve eğer öyleyse, PRNG ile ilgili bir sorun var, bu benim sorunum değil. 0.5, 0.25, 0.0625 vb. Gibi kesirler işe yaramaz, rastgele değildir. Belki de bu uç noktaya bir çözüm var, hm? ;)
bryc

evet '#'+Math.random().toString(16).split('.')[1].slice(-6).padStart(6,0)ama tercih bu
Kamil Kiełczewski

6

Yine başka bir rastgele renk üreticisi:

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 çok temiz yapar.

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

Eski tarayıcılar için bir şime ihtiyacınız var.


krom konsolda her zaman geri dönüş # 000000
Kamil Kiełczewski

6

Bu basit işlevi kullanabilirsiniz

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

1
rastgele döndürdüğünde 0.001sonuç "#4189"(geçersiz renk 4 basamaklı)
Kamil Kiełczewski


5

Farklı renkler kullanın .

Görsel olarak farklı renklerden oluşan bir palet oluşturur .

farklı renkler son derece yapılandırılabilir:

  • Palette kaç renk olduğunu seçin
  • Tonu belirli bir aralıkla kısıtla
  • Chroma'yı (doygunluk) belirli bir aralıkla kısıtlayın
  • Hafifliği belirli bir aralıkla kısıtlayın
  • Paletin genel kalitesini yapılandırma

3541 kod satırı .. burada diğer cevaplar ~ 6-10 satır vardır ... nasıl biri sadece farklı renkler seçmek için kod bu kadar çok satır yazdı etkilendim ..
vsync

Gerçekten görsel olarak farklı renkler seçmek , rastgele bir renk üreticisinden çok daha fazla matematik gerektirir.
InternalFX

Ben sadece 2 satırda yaptım .. bu işlevi değiştirdi: stackoverflow.com/a/20129594/104380
vsync

O kadar basit değil. okuma önerisi
InternalFX

Teşekkürler, çok ilginç bir yazı. yöntemim her zaman aynı renkleri sağlar ve sonuçlar tutarlı ve farklıdır. Bazı durumlarda insan gözü için oldukça rastgele, iyi dağıtılmış renklere ihtiyacınız olabilir.
vsync

3

İşte rastgele bir hex kod üreteci için iki versiyonum.


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

Bu fonksiyon diğer cevapların üstüne ve ötesine iki şekilde gider:

20 denemeden hangi rengin HSV konisinde diğerlerinden en uzak öklid mesafesine sahip olduğunu bularak mümkün olduğunca farklı renkler üretmeye çalışır.

Tonu, doygunluğu veya değer aralığını kısıtlamanıza izin verir, ancak yine de bu aralıkta renkleri olabildiğince farklı seçmeye çalışır.

Süper verimli değil, ancak makul değerler için (kim 100 rengi kolayca seçebilir?) Yeterince hızlı.

Bkz. 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

Önceki kısa el yöntemlerinin neredeyse tamamı geçersiz onaltılı kodlar (beş basamaklı) üretiyor. Benzer bir tekniğe sadece burada bu sorun olmadan rastladım :

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

Ölçek

Konsolda şunu deneyin:

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

4
Bu kodu 20000 kez çalıştıran bir for-loop yaptım ve sadece uzunluk 7'den az ise konsola basıldım ve dizenin 6 karakterden az olduğu bir durum buldum. Ayrıca, bu kodla ilgili bir sorun, tek tek 2 basamaklı renk kodlarını değil, yalnızca 6 basamaklı dizenin tamamını doldurmasıdır, bu da kırmızı değerde yeşil veya mavi değerlerden daha sıfır değerine sahip olmanız anlamına gelir.
Erin Heyming

rastgele döndürdüğünde 0.00001sonuç "#000a7"(geçersiz renk - 5 basamaklı)
Kamil Kiełczewski

3

Benim versiyonum:

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

Ben rastgele 0olmayan randomXD yeterli renk yapar düşünüyorum
shrekuu

Biz randonly bir hexadecinal sayı üretmek 0için ffffff. Bu mükemmel bir düzgün dağılımdır . Bu sıfır, tarayıcı kullanımıyla ilgili hususlar nedeniyle yalnızca dizeyi tamamlamak içindir. Bu çözüme daha dikkatli bakmanızı öneririm.
Prostakov


Teşekkürler Prostakov. : D
shrekuu


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.