Elección de una buena paleta de colores

Por el 24 de Febrero de 2007

en: Sin categoría

La parte más complicada del diseño de un interfaz de usuario es conseguir un interfaz que se atractivo y útil para la gran mayoria de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle la mayor cantidad de información posible para que se llegue a sentir parte del proyecto pero todo esto muchas veces no lo llegamos a conseguir por una mala elección en la combinación de los colores que se integran en nuestra interfaz.

Debemos tener en cuenta que el usuario lo primero que percibirá serán los colores antes que la tipografía, botones o fotografías 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

 

Shiny Plata [#EEEEEE]

 

Reddit Blanco[#FFFFFF]

 

Magnolia Rosa [#F9F7ED]

 

Interactive action Amarillo [#FFFF88]

 

Qoop Verde [#CDEB8B]

 

Gmail Azul [#C3D9FF]

 

Shadows Gris [#36393D]

Intensos

 

Mozilla Rojo[#FF1A00]

 

Rollyo Rojo[#CC0000]

 

RSS Naranja [#FF7400]

 

Techcrunch Verde [#008C00]

 

Newsvine Verde [#006E2E]

 

Flock Azul [#4096EE]

 

Flickr Rosa [#FF0084]

Oscuros

 

Ruby on Rails Rojo [#B02B2C]

 

Etsy Vermellón[#D15600]

 

43 Things Oro [#C79810]

 

Writely Oliva [#73880A]

 

Basecamp Verde [#6BBA70]

 

Mozilla Azul [#3F4C6B]

 

Digg Azul [#356AA0]

 

Last.fm Rosa [#D01F3C]

  • Entradas relacionadas:
  • No hay coincidencias

13 Respuestas a Elección de una buena paleta de colores

Avatar

Anónimo

16 de Marzo de 2007 a las 3:30 pm

Deberías citar las fuentes originales de la información que traduces. En este caso, lo de los colores 2.0 está copiado de aquí: http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette

Para más inri, el artículo original no tiene licencia Creative Commons, y sin embargo tú publicas ésta información bajo dicha licencia. Probablemente estés vulnerando su copyright.

Yo que tú me andaría con cuidado con el tema del plagio, sobre todo porque éste no es el único caso que he visto en tu web, ni el más evidente. Te lo dice alguien a quien han dado más de un toque de atención con estos temas…

Avatar

Anónimo

18 de Marzo de 2007 a las 1:17 pm

por lo que leo no creo que le causara problemas al autor, como bien dices es traduccion de una parte de una pagina en ingles, el resto del contenido no tiene nada que ver con dicha pagina, yo creo que todo esta correcto

Avatar

Julio

27 de Mayo de 2007 a las 3:28 pm

Creo que reamente no hay ningun problema con respecto a derechos de autor o algo parecido, el contenido no es identico a la pag. en ingles, los colores son los mismos, pero nadie tiene derechos sobre los mismos. Yo pienso que esta pagina es de mucha ayuda, concentra la informacion en un solo lugar, no tenemos que visitar montones de paginas para resolver las dudas.. que yo pienso que es lo mas importante. Saludos!

Avatar

Anónimo

25 de Marzo de 2008 a las 11:26 am

Me ha servido de mucho el tuto.
La traducción es muy buena y no lo considero plagio, eso sí, debería citar la fuente en inglés.
Lo dicho, muy bueno y gracias porla traduccíon.

Avatar

Hombre

18 de Marzo de 2008 a las 11:18 pm

No seas WaterParty…El articulo esta muy bueno!

Avatar

Fernando

31 de Octubre de 2008 a las 6:35 pm

Muy buena la informacion !!!!
gracias por compartirla !!!!

Avatar

Anónimo

3 de Julio de 2008 a las 1:23 pm

EXELENTE PÁGINA,QUE YO SEPA LOS COLORES NO TIENEN DUEÑO, SE PUEDE HABALR DE DERECHOS DE AUTOR EN CUANTO A COLORES????? PLOP , FELICITACIONES ES DE MUCHA AYUDA TU PAGINA

Avatar

Usuario Interesado

21 de Julio de 2008 a las 9:01 pm

En verdad la información esta buena y me agrada que fué facil encontrarla…
me gustaría saber de que manera debo combinar estos colores pra obtener una buena relación de aspecto Fuente – Fondo y claro imagenes…
Cordial saludo
Desde colombia

Avatar

greys

14 de Octubre de 2009 a las 2:41 am

me gustaria saber como se logra obtener diferentes mezcla de colores utilizando varios tonos entre si y que color da la combinacion de estos

Avatar

maricela

2 de Noviembre de 2009 a las 11:54 pm

gracias por la ayuda de mi tarea chaoooooooooooooo

Avatar

Jose

5 de Noviembre de 2009 a las 7:26 pm

Me viene genial a la hora de diseñar mis páginas con un colorido mejor. Muchas gracias.

Avatar

Opinen sobre Villaforos.com - vBhispano - vBulletin en espa

22 de Noviembre de 2009 a las 5:56 pm

[...] [...]

Avatar

Martin

7 de Marzo de 2010 a las 12:54 pm

Gracias! He utilizado esta info para “pintar” la interface aplicacion windows. Con respecto a citar la fuente, me parece saludable, ya q deja otras posibilidades de seguir investigando, ademas de reconocer y agradecer el trabajo ya hecho por otro.

Dejar un comentario

Patrocinadores

¿Interesado en patrocinar TuFunción?

Suscripción

Primera División