javascript - generar - google dime un color aleatorio

¿La mejor forma de generar un color aleatorio en javascript?

Question

Sin usar ningún marco ..

Escribí 2 funciones:

function get_random_color() 
{
    var color = "";
    for(var i = 0; i < 3; i++) {
        var sub = Math.floor(Math.random() * 256).toString(16);
        color += (sub.length == 1 ? "0" + sub : sub);
    }
    return "#" + color;
}

function get_rand_color()
{
    var color = Math.floor(Math.random() * Math.pow(256, 3)).toString(16);
    while(color.length < 6) {
        color = "0" + color;
    }
    return "#" + color;
}

¿Cuál sería considerado el mejor? ¿Hay mejores formas de hacerlo?

Answer 1

Como dijo George, la mejor manera es usar HSL, para que pueda generar un grupo de colores al azar distinguibles por humanos. La idea similar se implementa en la respuesta de Adams Cole a la pregunta similar, pero su código tiene un generador de color aleatorio y un traductor hsl-> hex rgb agrupados que dificulta su comprensión y modificación.

Si usa una de las bibliotecas de manipulación de color de JavaScript (como jquery-color ) la generación de color se vuelve trivial:

function rainbow() {
  // 30 random hues with step of 12 degrees
  var hue = Math.floor(Math.random() * 30) * 12;

  return $.Color({
    hue: hue,
    saturation: 0.9,
    lightness: 0.6,
    alpha: 1
  }).toHexString();
};

Answer 2

Esta es una forma de generar un color aleatorio y proporcionar el brillo mínimo:

function randomColor(brightness){
  function randomChannel(brightness){
    var r = 255-brightness;
    var n = 0|((Math.random() * r) + brightness);
    var s = n.toString(16);
    return (s.length==1) ? ''0''+s : s;
  }
  return ''#'' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
}

Llame a randomColor con un valor de 0 a 255, indicando qué tan brillante debe ser el color. Esto es útil para generar pasteles, por ejemplo randomColor(220)

Answer 3

Esta respuesta es el mejor método.

Debe proporcionar colores conocidos para elegir en lugar de confiar en métodos puramente numéricos. Puede usar sitios como ColorBrewer para elegir paletas de colores que funcionen bien según el problema (conjunto de datos cualitativos, cuantitativos o lo que sea ...)

[''red'',''orange'',''yellow'',''green'',''blue'',''purple''][Math.random()*6|0]

var colors = {
  rainbow: [''red'', ''orange'', ''yellow'', ''green'', ''blue'', ''purple''],
  qual: [''#8dd3c7'', ''#ffffb3'', ''#bebada'', ''#fb8072'', ''#80b1d3'', ''#fdb462'', ''#b3de69'', ''#fccde5'', ''#d9d9d9'', ''#bc80bd'', ''#ccebc5'', ''#ffed6f''],
  quant: [''#fff7ec'', ''#fee8c8'', ''#fdd49e'', ''#fdbb84'', ''#fc8d59'', ''#ef6548'', ''#d7301f'', ''#b30000'', ''#7f0000''],
  div: [''#67001f'',''#b2182b'',''#d6604d'',''#f4a582'',''#fddbc7'',''#f7f7f7'',''#d1e5f0'',''#92c5de'',''#4393c3'',''#2166ac'',''#053061'']
};
randc = function(array) {
  return array[Math.random() * array.length | 0]
}
genc = function() {
  var frag = [];
  var arr = colors[$("select").val()];
  for (var i = 0; i < 1024; i++) {
    frag.push("<div style=''background-color:" + randc(arr) + ";''></div>");
  }
  $("#demo").html(frag.join(''''));
}
genc();
$("select").on("change", genc);

#demo {
  margin-top: 10px;
  font-size: 0;
}
#demo div {
  display: inline-block;
  width: 24px;
  height: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value=''qual''>Qualitative (categorical)</option>
  <option value=''quant''>Quantitative (sequential)</option>
  <option value=''div''>Divergent (republicans versus democrats)</option>
  <option value=''rainbow''>Rainbow (my little pony)</option>
</select>
<div id=''demo''></div>

Answer 4

Lo hice así, con la ayuda de otras respuestas:

''#'' + parseInt(Math.random() * 0xffffff).toString(16)

Answer 5

Más sucinto

function get_random_color()
{
  return ''#'' + Math.random().toString(16).substring(4);
}

Nicolas Buduroi dio el mejor código anterior para obtener un color aleatorio en el generador de colores aleatorios en Javascript

Answer 6

Más sucinto

function get_random_color2() 
{
    var r = function () { return Math.floor(Math.random()*256) };
    return "rgb(" + r() + "," + r() + "," + r() + ")";
}

Answer 7

Me gusta tu segunda opción, aunque puede ser un poco más simple:

// Math.pow is slow, use constant instead.
var color = Math.floor(Math.random() * 16777216).toString(16);
// Avoid loops.
return ''#000000''.slice(0, -color.length) + color;

Answer 8

Una forma más corta:

''#''+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)

Answer 9

function randomColor()
{
     color=''rgb(''+Math.round(Math.random()*255)+'',''+Math.round(Math.random()*255)+'',''+Math.round(Math.random()*255)+'')'';

     return color;
}

Esto devuelve un valor aleatorio RGB.