Elegir colores por palabras

¿No estas seguro de cómo describir los colores que necesitas? Prueba "Instant Color Schemes", una herramienta que nos muestra un esquema de colores dependiendo de la palabra que le proporcionamos. Aunque el sistema funciona con palabras en inglés, con ayuda de algún traductor fácilmente podríamos utilizarlo.

En el ejemplo, queremos encontrar el esquema de colores de una puesta de sol, entonces le proporcionamos la palabra "Sunset". Luego, "Instant Color Schemes" sirviéndose de la API de Yahoo realiza una búsqueda y selecciona las 5 imágenes más relacionadas, para luego extraer los 6 colores más prominentes de cada imagen; y finalmente, encontrar una relación entre los colores a fin de proporcionar un esquemade colores.

Después de hacer unas pruebas, se darán cuenta que la herramienta funciona muy bien en la mayoría de casos.

Extraer colores de una fotografía

¿No encuentras las palabras adecuadas? Si esto es así, puedes hacer que tu foto favorita hable por ti. Esto podría ser especialmente útil cuando intentamos encontrar un esquema de colores que se adapte a ciertos objetos, una pintura o una estatua, por ejemplo.

Con "Color Palette Generator" sólo hay que subir la foto y el sistema automáticamente nos generará el esquema de colores que predominan en esa imagen.

Otro punto a destacar, es que el código fuente de este proyecto esta disponible de forma gratuita, lo que significa que lo podemos utilizar y modificar; respetando su licencia.

Así pues, ya tenemos dos herramientas que nos ayudarán a tomar la decisión correcta respecto a los colores a utilizar. ¿Qué piensan?

Debemos tener en cuenta que el usuario lo primero que percibirá serán los colores antes que la tipografía, botones o imágenes que estén en nuestra página, por eso debemos ser especialmente cuidadosos con la elección de la paleta de colores que será la base de todos los elementos de nuestra página.

Elegir una Paleta de Colores

Para hacer una buena elección de los colores que vamos a incluir en la paleta debemos tener unas nociones básicas de la “teoría básica del color”, en HTML qué es lo que nos interesa a nosotros la paleta de colores RGB se compone de tres colores primarios: Rojo, Verde y Azul, estos colores primarios están representados según el siguiente formato: #RRGGBB (ROJO, VERDE, AZUL).

Los valores que puede adoptar cada uno de los tres colores primarios van de 0 a 255 (en decimal) y las combinaciones cómo te puedes imaginar son múltiples, por ello estamos ante una gran cantidad de combinaciones de colores lo que nos dificulta la elección a la hora de trabajar, pero cómo en casi todo en la vida podemos agarrarnos a unas reglas en este caso son reglas simples de armonía de color lo que nos va servir de gran ayuda para crear la paleta de colores.

Los esquemas de color más comunes de utilizar son monocromos, análogos, complementarios, división complementaria y triada en inglés (monochrome, analog, complementary, split complementary and triad). Los nombres en inglés nos sirven para utilizar esta magnífica herramienta web en la que conseguir los esquemas de colores deseados.

Yafla Color (Selección de colores)

Bueno vamos a tratar de explicar el funcionamiento de cada uno de los esquemas de color y cómo conseguirlos en la herramienta web ofrecida.

Monocromo

Un esquema de color monocromo usa un color con modificaciones de brillo, si tuviermaos por ejemplo el color rojo utilizariamos colores con mucha luz roja sin llegar a utilizar el blanco y colores rojos muy oscuros sin llegar al negro.

En la herramienta web que hemos citado anteriormente estos esquemas corresponderían a los dos laterales.

Análogo

Se utilizan tres colores para la composición de este esquema estos colores serán los colores adyacentes a los elegidos en una hipotética rueda de color del mismo. Por ejemplo si tuvieramos cómo base un color salmón estos serían nuestros colores.

En la herramienta web que hemos citado anteriormente los colores serían (selected color, analog -30 y analog +30).

Complementario

En este esquema utilizaríamos dos colores que serían el color elegido y su opuesto en la rueda de color, el motivo del uso de estos colores es para mantener un buen equilibrio en el diseño final. Por ejemplo si elegimos el color azul tendriamos cómo complementario el color amarillo, lo que se podía ver como una representación del frío y del calor.

En la herramienta web que hemos citado anteriormente los colores serían (selected color y complementary).

División Complementaria

En los esquemas de división complementaria se utiliza dos colores opuestos de cada cara de lo colores complementarrios del color elegido, de esta manera podemos conseguir un contraste suave.

En la herramienta web que hemos citado anteriormente los colores serían (selected color, Split.Comp -150 y Split.Comp +150).

Trial

En este esquema de color utilizaremos tres colores que estan en posiciones equidistantes en la rueda de color. Conseguireemos un nivel alto de contraste en nuestro diseño final.

En la herramienta web que hemos citado anteriormente los colores serían (selected color, Triad Color -120y Triad Color +120).

Conclusión

Bueno, espero que estos ejemplos de colores para una interfaz de usuario con cada uno de los esquemas de colores explicados os sirvan de utilidad, ahora sólo tienes que elegir cúal es el esquema de color que deseas aplicar y cúal es el color elegido, si quieres tener una apariencia “Web 2.0″ prueba a ver estos colores que son un buen repertorio de colores “2.0″ que no deben faltar en tu hoja de estilos (divididos en tres categorias).

Suaves

Intensos

Oscuros