¿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.
¡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!
Deja una respuesta