domingo, 11 de julio de 2010

Combinar colores: dos herramientas web para elegir nuestras paletas de color

A la hora de diseñar algo (ya sea una página web, la página de una revista o incluso un traje, un coche o el plató de un programa) elegir una paleta de tonos y colores que combinen bien es algo fundamental. En este artículo voy a compartir con vosotros un par de herramientas web, como siempre gratuitas, que nos serán de gran ayuda para esta labor inicial en todo proceso de diseño creativo.

Elegir colores que combinen bien entre sí tiene mucho de arte, pero también es ciencia. Existen diferentes reglas de armonía, procedentes de aplicar operaciones matemáticas concretas a la rueda cromática, que estas páginas web que presento nos van a facilitar de forma sencilla y fácilmente aplicable. Por si esto fuera poco, estas fantásticas herramientas –cuyos creadores merecen todo mi reconocimiento- pondrán muchas utilidades adicionales a nuestra disposición. Aplicaciones de las paletas en webs de ejemplo, bibliotecas de colores creadas por otros diseñadores o exportación para Photoshop o Gimp son algunas de ellas. En definitiva una lista de herramientas útiles para cualquier proceso de diseño creativo, de forma totalmente gratuita.

Vamos pues con ellas, se trata de Kuler y Color Scheme Designer. Atención diseñadores que irán directas a vuestros “favoritos” a buen seguro.

Kuler, una web que nos permitirá crear paletas de colores partiendo de un tono concreto o de una imagen.


Página incial de la web Kuler

Esta web nos va a permitir hacer muchas cosas diferentes. Para empezar a describir su uso tal vez lo mejor sea indicar su función principal: podremos elegir un color (ya sea introduciendo su código hexadecimal, sus valores RGB, CMYK, LAB, HSV o seleccionándolo directamente en la rueda cromática) y nos dará diferentes paletas con tonos relacionados con el mismo.

Las paletas constarán de 5 colores: el elegido y sus 4 relacionados que nos dará la web, seleccionados automáticamente en función de diversas reglas de armonía. Tal vez las más interesantes de estas reglas sean:

Reglas de armonía en el color
  1. Análogos: nos facilitará colores adyacentes al original (cercanos a una distancia equivalente en la rueda cromática).
  2. Monocromáticos: nos dará diferentes tonos de ese mismo color.
  3. Triada: mostrará una paleta creada con el color elegido y los otros dos con los que forme un triángulo en la rueda cromática (es decir, todos tienen la misma distancia entre sí).
  4. Complementarios: creará la paleta con tonos opuestos. La paleta estará formada por tonos de nuestro color y su opuesto.
  5. Compuesta: Una selección de diversos tonos y colores complementarios no tan rígida como la anterior.
Además de ello, Kuler nos permitirá también usar imágenes para seleccionar los colores (podremos subir una imagen nuestra o elegir una de Flickr). A ello se suman otras utilidades como usar temas ya creados por otros diseñadores o formar parte de la comunidad (por cierto, ahora es de Adobe).

Ahí va el enlace a la página: Kuler (ahora Adobe Color CC)

Color Scheme Designer (Paletton), una web que nos dará gamas de color exportables, códigos HTML y CSS e incluso simulaciones de enfermedades visuales.


Página incial de la web Color Sheme Designer

Bien, aquí estamos ante una herramienta increíble de cara al diseño web. Color Scheme Designer, además de darnos diversas paletas de color en función de uno inicial a la manera de Kuler, nos va a facilitar una previsualización de esos colores aplicados en una web de ejemplo. Es bastante realista, con lo que sirve bastante para hacernos una idea del posible resultado.

*ACTUALIZACIÓN 04/12/2015 >> Esta herramieta ha cambiado de nombre, ahora se llama Paletton.

Web de ejemplo de Color Sheme Designer
Aspecto de la web de ejemplo que Color Scheme Designer nos crea con los colores de nuestra paleta. Existe una alternativa inversa (predominio de tonos oscuros).

Con Color Scheme Designer podemos crear paletas de color en función de reglas de armonía o combinación similares a Kuler (tonos complementarios, monocromáticos, triada, etc…), a los que esta web añade la tétrada (como la triada pero formada por 4 colores). Cabe señalar también que esta web permite exportar los colores a PhotoShop y Gimp, e incluso nos facilita un documento HTML (con su CSS) de donde podremos coger los datos sin tener que anotar nada.

Para terminar, hay otro aspecto bastante curioso e interesante en este sitio: muestra los colores tal y como los ven las personas con alteraciones visuales (daltonismo, etc…). Supongo que esto podrá usarse para elaborar páginas que no den problemas a estas personas, desde luego a mí es algo que me ha sorprendido bastante. Incluye incluso el porcentaje de afectados por cada alteración en concreto (y hay una lista bastante grande).

Todo ello a nuestra disposición de forma totalmente gratuita. ¿Útil, verdad? Como digo los autores bien merecerían algún tipo de premio. Vaya desde aquí mi reconocimiento a su labor.

Ahí va el enlace a la página: Color Scheme Designer (ahora Paletton)

*ACTUALIZACIÓN: He localizado otra herramienta web para crear paletas de color: COOLORS. Es parecida a las dos descritas anteriormente, con lo que no me extiendo más.

Artículos relacionados: