Generar color hexadecimal aleatorio con Javascript

Introducción

Recientemente estuve generando algunas gráficas de barras para un pequeño proyecto. Debido a que las gráficas eran llenadas de forma dinámica, necesitaba una forma de generar colores aleatorios en hexadecimal.

Recordemos que un color hexadecimal se compone de 6 caracteres que pueden ser: 0123456789ABCDEF

Por ejemplo, un color hexadecimal puede ser el #8bc34a. El color negro es #000000 y el blanco es #FFFFFF

Ahora veamos cómo generar este color en JavaScript. Por cierto, no todos serán colores agradables a la vista del usuario, pero recordemos que el objetivo es generar un color aleatorio, no un color agradable y aleatorio.

Generar color hexadecimal en JavaScript

Para ello alguien más ya escribió en esta página la función, y alguien la ha mejorado en Stackoverflow. La función queda así:

const generarColor = () => "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16))

Eso fue utilizando const y funciones flecha, algo de la versión ES6. Pero fácilmente se puede escribir para versiones anteriores:

var generarColor = function () {
    "#000000".replace(/0/g, function () {
      return (~~(Math.random() * 16)).toString(16);
    })
  }

Luego de eso podemos simplemente llamar a la función y listo. Aquí un ejemplo:

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario