Función que devuelve colores rgb o hexadecimales aleatorios con JS

Función que devuelve colores rgb o hexadecimales aleatorios con JS

¿Has llegado a esta página preguntándote por una función javascript que te devuelva un color en formato hexadecimal o RGB?

Antes de dedicar tu tiempo a leer este escrito ten en cuenta que este programa no traduce un hexadecimal a rgb o viceversa.

Este script genera colores aleatorios mediante la llamada a una función.

Encontraremos la solución rompiendo el reto en otros más simples gracias al uso de funciones.

El primero, como generar un número aleatorio del 0 al 15 en el caso de un color hexadecimal. Y un número del 0 al 255 en el caso de RGB.

El segundo, como escribir un color hexadecimal o rgb con javascript.

Para ello tanto en el caso HEX como RGB vamos a generar 2 funciones.

Veamos el código.

Generar un color rgb con javascript

El programa consiste en concatenar 6 caracteres consecutivos dónde cada uno es un valor admitido en hexadecimal.

La finalidad de la función generarLetra() es devolver cada uno de estos caracteres.

Mediante un for la ejectuamos 6 veces actualizando cada vez el valor de la variable coolor.

La función colorHEX() es quién devuelve un número aleatorio en formato hexadecimal.

En particular concatena el string # con el valor que ha tomado coolor a la salida del for.

Si ahondamos en la función generarLetra() observemos la instrucción (Math.random()*15).toFixed(0)

Esta expresión genera un número aleatorio entre 0 y 15 que incluye decimales.

El método .toFixed(0) redondea la cifra a ningún decimal.

Finalmente el número que devuelva es la posición letras[numero] es alguno de los contenidos dentro del array letras.

function generarLetra(){
	var letras = ["a","b","c","d","e","f","0","1","2","3","4","5","6","7","8","9"];
	var numero = (Math.random()*15).toFixed(0);
	return letras[numero];
}
	
function colorHEX(){
	var coolor = "";
	for(var i=0;i<6;i++){
		coolor = coolor + generarLetra() ;
	}
	return "#" + coolor;
}

Generar un color hexadecimal con javascript

La función generarNumero(numero) genera un número aleatorio entre el 0 y el número pasado por el paréntesis. En nuestro caso nos interesa un número aleatorio del 0 al 255.

Para generar un número RGB simplemente necesitamos escribirlo en formato rgb(,,) preguntando en cada hueco por generarNumero(255).

La función colorRGB() devuelve pues un número en formato rgb.

function generarNumero(numero){
	return (Math.random()*numero).toFixed(0);
}

function colorRGB(){
	var coolor = "("+generarNumero(255)+"," + generarNumero(255) + "," + generarNumero(255) +")";
	return "rgb" + coolor;
}

¿Como usar las funciones?

Copia y pega el código dentro de tu script.

A continuación una captura de pantalla tras usar colorRGB() y colorHEX() por la consola del navegador.

funciones para generar colores aleatorios
funciones para generar colores aleatorios

¡Hola!

Querido lector,

¿Sabrías readaptar el código para conseguir ahora un color RGBa?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.