Generar un color aleatorio con Javascript

30/5/05 - Este ejercicio es muy sencillo, pero puede resultar útil para algunas personas. Se trata de una pequeña función que sirve para generar un color aleatorio, en formato hexadecimal, que es el utilizado en la creación de webs.

Lo hemos extraído de otro ejemplo realizado en Javascript, en el que necesitábamos generar un color de manera aleatoria. Creemos que puede ser interesante para comentarlo en un artículo aparte, por si alguien en sus páginas necesita crear un color totalmente aleatorio.

Para crear un color aleatorio necesitamos simplemente 6 números en hexadecimal (números del 0 a la F). Si obtenemos aleatoriamente estos 6 números hexadecimales, habremos creado el código de un color aleatorio.

Función para generar aleatorios

Por tanto, para generar un número aleatorio, vamos a apoyarnos en una función relatada en otro artículo de DesarrolloWeb.com: Generación de números aleatorios Javascript . En este artículo hay que fijarse también en el comentario de un visitante que mejora la función de creación de aleatorios.

La función para generar aleatorios que vamos a utilizar entonces es la siguiente:

function aleatorio(inferior,superior){
   numPosibilidades = superior - inferior
   aleat = Math.random() * numPosibilidades
   aleat = Math.floor(aleat)
   return parseInt(inferior) + aleat
}

Como nosotros necesitamos un aleatorio hexadecinal, para apoyarnos en esta función, vamos a generar un número aleatorio en decimal, que luego convertiremos a hexadecimal. Para hacer esa conversión utilizaremos un array de valores hexadecimales como este:

hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")

Ahora, para obtener ese valor aleatorio hexadecimal, lo único que tenemos que hacer es obtener un índice entre 0 y el número de casillas de este array. Entonces, el valor aleatorio hexadecimal será lo que haya en el array en la casilla cuyo índice se ha obtenido aleatoriamente. Esto se hace de esta manera:

posarray = aleatorio(0,hexadecimal.length)
valor_hexadecimal_aleatorio = hexadecimal[posarray]

En la primera línea se obtiene el índice del array aleatorio, que está entre 0 y el número de posiciones del array. En la segunda valor_hexadecimal_aleatorio se obtendrá accediendo al array, en la posición generada aleatoriamente.

Obtener el color aleatorio

Ahora que ya hemos visto una manera de obtener un valor hexadecimal aleatorio, vamos a ver cómo obtener un color aleatorio, que no es más que obtener 6 valores hexadecimales aleatorios y concatenarlos.

hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
color_aleatorio = "#";
for (i=0;i<6;i++){
   posarray = aleatorio(0,hexadecimal.length)
   color_aleatorio += hexadecimal[posarray]
}

Después de la ejecución de este código, la variable color_aleatorio contendrá el color generado aleatoriamente.

Ponerlo en una función

Para acabar esta pequeña práctica, vamos a ver cómo se puede poner todo esto en una función, que podremos utilizar en cualquier contexto.

function dame_color_aleatorio(){
   hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
   color_aleatorio = "#";
   for (i=0;i<6;i++){
      posarray = aleatorio(0,hexadecimal.length)
      color_aleatorio += hexadecimal[posarray]
   }
   return color_aleatorio
}

Para ver este ejemplo en marcha hemos creado una página que muestra una serie de 50 colores generados aleatoriamente.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba