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.

Enviar comentario

via Cristalab http://ift.tt/1uRNKjE

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: