javascript

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

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

3 días hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

3 días hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

3 días hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

5 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

2 semanas hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

2 semanas hace

Esta web usa cookies.