javascript - generar - google dime un color random

Generador de color al azar

Question

Dada esta función, quiero reemplazar el color con un generador de color aleatorio.

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

¿Cómo puedo hacerlo?

Answer 1

Versión ES6.

Color aleatorio

`#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`

Alfa aleatoria, color aleatorio.

`#${Math.floor(Math.random() * 0x100000000).toString(16).padStart(8, 0)}`

Answer 2

¿Quién puede vencerlo?

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

Garantizado para trabajar todo el tiempo: http://jsbin.com/OjELIfo/2/edit

Según el comentario de @eterps, el código anterior aún puede generar cadenas más cortas si la representación hexadecimal del color aleatorio es muy corta ( 0.730224609375 => 0.baf )

Este código debería funcionar en todos los casos:

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

Answer 3

Aquí están mis dos versiones para un generador de código hex aleatorio.

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

Answer 4

Aquí hay otra toma de este problema.

Mi objetivo era crear colores vibrantes y distintos. Para asegurar que los colores sean distintos, evito usar un generador aleatorio y selecciono colores "espaciados uniformemente" del arco iris.

Esto es perfecto para crear marcadores emergentes en Google Maps que tienen una "singularidad" óptima (es decir, no hay dos marcadores que tengan colores similares).

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

Si desea ver cómo se ve esto en acción, visite http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html .

Answer 5

Aquí hay un giro en la solución proporcionada por @Anatoliy.

Necesitaba generar solo colores claros (para fondos), así que elegí el formato de tres letras (#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;
}

Answer 6

Así que aunque todas las respuestas aquí son buenas, quería un poco más de control sobre la salida. Por ejemplo, me gustaría evitar los tonos casi blancos, mientras me aseguro de obtener colores vibrantes y brillantes, no tonos lavados.

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

Así que ahora puedo especificar 3 rangos arbitrarios para escoger valores rgb. Puede llamarlo sin argumentos y obtener mi conjunto predeterminado, que generalmente generará un color bastante vibrante con un tono dominante obvio, o puede proporcionar su propia gama de rangos.

Answer 7

Casi todos los métodos de mano corta anteriores generan códigos hexadecimales no válidos (cinco dígitos). Encontré una técnica similar solo sin ese problema here :

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

Prueba

Intenta esto en la consola:

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

Answer 8

Dudo que algo sea más rápido o más corto que este:

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

¡Reto!

Answer 9

El artículo escrito por Paul Irish en Random Hex Color Code Generator en JavaScript es absolutamente increíble. Utilizar:

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

Aquí está el enlace de la fuente:

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

Answer 10

El comentario más votado de la respuesta principal sugiere que el enfoque de Martin Ankerl es mejor que los números hexadecimales aleatorios, y aunque no he mejorado la metodología de Ankerl, lo he traducido correctamente a JavaScript. Pensé que publicaría una respuesta adicional a este subproceso de SO ya mega-dimensionado porque la respuesta superior tiene otro comentario que vincula a un Gist con la implementación JS de la lógica de Ankerl y ese enlace está roto (404). Si tuviera la reputación, simplemente habría comentado el enlace jsbin que creé.

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

Answer 11

Esta función va más allá de otras respuestas de dos maneras:

Intenta generar colores lo más distintos posible al encontrar qué color de 20 intentos tiene la distancia euclidiana más alejada de los otros en el cono de HSV

Le permite restringir el tono, la saturación o el rango de valores, pero aún así intenta seleccionar colores lo más distintos posible dentro de ese rango.

No es súper eficiente, pero para valores razonables (¿quién podría incluso separar 100 colores fácilmente?) Es lo suficientemente rápido.

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

Answer 12

Este método obtendrá un número aleatorio, lo convertirá en una cadena hexadecimal y luego extraerá una parte de él, lo que le dará un hex aleatorio.

function randomColor() {
    return "#" + Math.random().toString(16).slice(2,8);
}

Answer 13

Esto se puede encontrar muy fácilmente usando la Búsqueda de 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ón actualizada:

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

Answer 14

Generación aleatoria de colores con control de brillo:

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

Answer 15

Hay muchas maneras en que puedes lograr esto. Aquí hay dos que hice:

Genera seis dígitos hexadecimales aleatorios (0-F)

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

Genera componentes RGB individuales (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;
}

Answer 16

Me gusta este: ''#'' + (Math.random().toString(16) + "000000").substring(2,8)

Answer 17

Mi version:

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

Answer 18

No hay necesidad de un hash de letras hexadecimales. JavaScript puede hacer esto por sí mismo:

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

Answer 19

Otro generador de color al azar:

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

Answer 20

Podrías usar esta sencilla función.

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

Answer 21

Puede usar colorchain.js para generar una secuencia de colores con diferentes tonos.

Answer 22

Respuesta corta con pad al tamaño exacto.

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

Answer 23

Si eres un noob como yo, sin idea de los hexadecimales y demás, esto podría ser más intuitivo.

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

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

Solo debe terminar con una cadena como ''rgb(255, 123, 220)''

Answer 24

También puede usar HSL disponible en todos los buenos navegadores ( http://caniuse.com/#feat=css3-colors )

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

Esto te dará solo colores brillantes, puedes jugar con el brillo, la saturación y el alfa.

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

Answer 25

Usa distinct-colors .

Genera una paleta de colores visualmente diferenciados.

Colores distintivos es altamente configurable:

• Elige cuántos colores hay en la paleta
• Restringir el tono a un rango específico
• Restrinja el croma (saturación) a un rango específico
• Restringir la luminosidad a un rango específico
• Configurar la calidad general de la paleta.

Answer 26

Use getRandomColor() en lugar de "#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>

Answer 27

Array.prototype.reduce hace muy limpio.

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

Necesita un shim para navegadores antiguos.

Answer 28

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

Answer 29

function get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

http://jsfiddle.net/XmqDz/1/

Answer 30

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

Un desglose de cómo funciona esto:

Math.random()*256 obtiene un número aleatorio (punto flotante) de 0 a 256 (0 a 255 inclusive)
Resultado de ejemplo: 116.15200161933899

Agregando el |0 despoja todo después del punto decimal.
Ej: 116.15200161933899 -> 116

El uso de .toString(16) convierte este número a hexadecimal (base 16).
Ej: 116 -> 74
Otro ex: 228 -> e4

Añadiendo "0" rellena con un cero. Esto será importante cuando obtengamos la subcadena, ya que nuestro resultado final debe tener dos caracteres para cada color.
Ej: 74 -> 074
Otro ex: 8 -> 08

.substr(-2) obtiene solo los dos últimos caracteres.
Ej: 074 -> 74
Otro ejemplo: 08 -> 08 (si no hubiéramos agregado el "0" , esto hubiera producido "8" en lugar de "08")

El bucle for ejecuta este bucle tres veces, agregando cada resultado a la cadena de color, produciendo algo como esto:
#7408e4