RandomColor.js: generador aleatorio de colores con JavaScript



En la red nos podemos encontrar un gran número de herramientas online que son capaces de generar colores aleatorios pero todos ellos tienen un mismo problema, suelen crear colores donde predominan los grises, marrones y verdes oscuros.

Para dar solución a este problema, hoy os queremos hablar de la librería RandomColor desarrollada en JavaScript y que nos permite conseguir un determinado número de colores partiendo de las opciones indicadas por nosotros.

Su uso es muy sencillo. Una vez que hayamos incluido randomColor.js en la página, podemos conseguir que nos devuelva un color aleatorio en formato hexadecimal con tan sólo hacer una llamada al método “randomColor()”.


En el ejemplo que hemos dejado, hemos hecho 27 llamadas a ese método para obtener esa gama de colores.

Pero esta librería ofrece muchas más posibilidades gracias a las opciones que se le pueden indicar en ese método. Las opciones que nos ofrece son:

- Hue: Controla la tonalidad del color generado. Se puede pasar una cadena de texto que haga referencia a la gama de colores que estamos buscando. Por ejemplo orange, red, green, pink…
- Luminosity: controla la luminosidad del color generado. Los valores que puede tomar son “bright”, “light” o “dark”.
- Count: Se trata de un entero donde se especifica el número de colores a generar.
- Format: Una cadena que especifica el formato de color a generar. Sus posibles valores son “hsvArray”, “rgb”, “rgbArray” y “hex”.

A continuación veremos algunos ejemplos de uso.

Obtenemos un código de color en hexadecimal.

randomColor();


Retornar 10 variantes del rojo


randomColor({
count: 10,
hue: 'red'
});


Retorna un código hexadecimal para un azul suave


randomColor({
luminosity: 'light',
hue: 'blue'
});


Retorna 10 tonalidades verde brillante en formato RGB.


randomColor({
count: 10,
hue: 'green'
luminosity: 'bright',
format: 'rgb'
});


Podéis ver más sobre esta librería en su sitio oficial
COMPARTE ESTA NOTICIA

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +