Comunidad de diseño web y desarrollo en internet online

Colores aleatorios con RandomColor.js

Es cierto que los colores en diseño web son fundamentales, de ello depende la sensación que provoques en el usuario, las emociones que despiertes... cierto.

Por otro lado, también es cierto que al usuario le gusta encontrar novedades que le sorprendan en tus diseños. Entonces, ¿cómo equilibrar estas dos ideas en el área cromática? Una buena forma es usando la librería de JavaScript randomColor.js que puedes descargar de su sitio oficial.

Cómo usar randomColor.js


El uso de esta función es muy sencillo. RandomColor genera aleatoriamente colores, aunque nosotros podemos definir qué tipo de colores queremos que nos devuelva. De esa forma nos aseguramos que el estilo de nuestro sitio web no se pierda. Aquí tienes un ejemplo:




El código para hacer una llamada simple a la función es el siguiente:

Código :

randomColor();


Esta función siempre nos devuelve el código del color producido, se le puede asignar a algún atributo CSS de los elementos de nuestro HTML:

Código :

elemento= document.getElementById("content").style;
elemento.background = randomColor();


Parámetros de randomColor


Lo interesante de esta función es poder acotar los resultados, indicando qué tipo de color queremos recibir e incluso en qué formato. Para ello disponemos de estos parámetros:

  • count: cuántos colores queremos generar.
  • hue: podemos enviar como cadena el tono que queremos generar. Aquí indicaríamos valores como 'red', 'purple', 'green', 'pink', 'monochrome', etc. En caso de poner un valor que no sea admisible se generará un color con una tonalidad aleatoria.
  • luminosity: los posibles valores para este parámetro en orden descendente en cuanto a la luminosidad que se le asignará al tono del color generado son: 'bright', 'light', 'dark'.
  • format: especificaríamos cómo queremos que se nos retorne el color: 'rgb', 'hex', 'hsvArray', 'rgbArray'


Aquí es donde nosotros podemos reducir las posibilidades del color generado aleatoriamente para que nuestro diseño no pierda identidad. Por ejemplo, si queremos un fondo rojo oscuro, con letras de un amarillo suave, pondríamos lo siguiente:

Código :

web = document.getElementById("content").style;
web.background = randomColor( { hue : 'red', luminosity : 'dark' } );
web.color = randomColor( { hue : 'yellow', luminosity : 'bright' } );


Y, por supuesto, dado que esta función nos devuelve el código del color podemos trabajarla como cadena de texto para asignarla a alguna características CSS que requiera ese uso:

Código :

borde = document.getElementById("imagen").style;
borde.border = "8px solid " + RandomColor ( { hue : 'blue', luminosity : 'dark' } );


Estos son algunos ejemplos de posibles valores que se pueden producir con llamadas de ese tipo:

Código :

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



Código :

randomColor({hue: 'orange', count: 18});



Código :

randomColor({hue: 'green', count: 18});



Código :

randomColor({luminosity: 'light',count: 27});



Código :

randomColor({luminosity: 'dark', count: 27});



RandomColor.js puede dar a tus sitios web una imagen nueva cada vez, pero te recomiendo usarlo en partes algo más secundarias para que el aspecto principal (que tanto has pensado y definido para lograr una usabilidad y emociones concretas) no caiga en manos del azar. De esa forma tu página web conservará su diseño propio pero tendrá toques aleatorios que le darán la frescura y viveza que les gustará a tus visitantes.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate