Teoría del colorcolor021.jpg


Aunque parezca mentira, los colores de los objetos nos transmiten emociones muy fuertes, pese a que, generalmente, no nos demos cuenta de ello. Los hospitales carecen de color rojo, pues éste es asociado a la sangre, y en las oficinas suele predominar el blanco que denota orden y pulcritud
La combinación de colores es fundamental al momento del diseño, ya que va a tener una influencia realmente grande en cómo lo perciban los usuarios y la sensación que les quede después de verlo.

Es muy importante también el numero de colores. Más de 6 colores simultáneos en una composicion pueden ser demasiados si existe un gran contraste entre ellos pero pueden formar una combinación agradable si la relación entre ellos es adecuada. Siempre es mejor pocos colores antes que muchos estableciendo un mínimo de 3.

El color y su expansión
Probablemente alguna vez os hayáis preguntado por qué la mayoría de las páginas web que hay en internet tienen un fondo claro y no oscuro.

fundes_color0.jpgfundes_color1.jpg
Esto se debe al carácter expansivo de los colores, no se verá igual un texto sobre fondo negro que blanco.
El texto sobre fondo blanco es más legible y por lo tanto el lector debe forzar menos la vista, sintiéndose agradecido.
fundes_color3.jpg
Así mismo, en la imagen de los círculos, parece que el círculo de la izquierda tienda a expandirse y a hacerse más grande, todo lo contrario que en el de la derecha. Eso es debido a que el color oscuro comprime la figura del medio.
Estas técnicas las usaremos cuando queramos que una parte de nuestra web quede cerrada o abierta.


Significado del color
Los colores tienen un significado propio aunque no nos demos cuenta, pero debemos tener cuidado porque este significado puede variar según la cultura.
Blanco: Es un color latente por su capacidad de potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo, puro e inocente. El blanco es el fondo universal de la comunicación gráfica.
Negro: Es el símbolo del silencio, del misterio y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante.
Gris: Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía. Dan impresión de frialdad metálica, pero también dan sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.
Amarillo: Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos. No es recomendable usarlo como color principal de nuestra página, pues tiene demasiada fuerza y tiende a cansar al visitante.
Naranja: Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética.
Rojo: Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y agresivo. El rojo es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo.
Azul: Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusión óptica de retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el infinito.
Violeta: Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría representar también la introversión. En sus tonos más claros se vuelve un poco triste, en los más oscuros representa grandeza.
Verde: Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo reverdece suscita la esperanza de una vida renovada.
Marrón: Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.

Combinación de colores
Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser:TeoriaColor_circuloCromatico.png
  • Análogos o Adyacentes: Son aquellos que se encuentran a ambos lados del mismo en el círculo de color.
  • Complementarios: Son aquellos que se encuentran opuestos en el círculo de color. Usados juntos producen un gran contraste. Su efecto puede ser llamativo y hasta agresivo.
  • Monocromáticos: Son aquellos que difieren sólo en su luminosidad (brillo) y no en su saturación ni tono. Usados producen sensación de unidad, homogeneidad y robustez.
  • Monotono: Un esquema de color monotono lo constituyen un único tono de color junto a sus posibles variaciones en términos de luminosidad y saturación.

Armonía y Contraste
La ARMONÌA: Se logra cuando los elementos y los recursos visuales se selecciona y se disponen de tal manera que se acentúan las similitudes y se produce una sensación de equilibrio. En tanto que el CONTRASTE se alcanza seleccionando y disponiendo los elementos de forma que se acentúan las diferencias y produce una sensación de tensión.

En todas las armonías cromáticas se pueden observar tres colores:
1.jpg
  • Uno dominante o primario: que es el mas neutro y de mayor extensión, generalmente dominando el fondo de la página, sirve para destacar los otros colores que conforman nuestra composición gráfica, especialmente al opuesto.
  • El tónico o destacado: Es el mas potente en color y valor, y el que se utiliza como nota de animación o audacia en cualquier elemento. Suele utilizarse el complementario del color dominante.
  • El de mediación o secundario: Actúa como conciliador y modo de transición entre los dos anteriores, suele tener una situación en el circulo cromático cercano a la del color primario aunque también puede utilizarse un color opuesto, cercano al color destacado.

Un color puro y brillante aplicado en una gran extensión de la página suele resultar irritante y cansino (especialmente, el amarillo), mientras que ese mismo color, usado en pequeñas proporciones y sobre un fondo apagado puede crear sensación de dinamismo.
uso_del_color_brillante.gif_2.png

Dos colores claros brillantes puestos uno al lado de otro impactan en nuestra vista, produciendo un efecto de rechazo, mientras que si esos dos mismos colores los situamos uno dentro del otro el efecto cambia por completo, resultando agradable.

El contraste será mayor cuanto mayores sean las diferencias entre ambos en términos de Tono, Luminancia y Cromancia (Tono, Brillo y Saturación)

Es muy importante que exita un gran contraste entre el texto y el fondo. Sin embargo habrá que tener sumo cuidado en no caer en estridencias que generalmente son tomadas como inmadurez o falta de profesionalidad. Esta misma recomendación es aplicable cuando elegimos colores para resaltar o separar áreas de contenidos (aquí es menos necesario y abusar de él puede ser aún más perjudicial).
El contraste de saturación con frecuencia es el más adecuado para resaltar aspectos de la página web de una forma moderada, poco estridente.

Herramientas útiles
TeoriaColor_HerramientaKuler.pngEl programa de diseño Adobe Photoshop incluye la extensión Kuler, en esta extensión podemos conseguir diferentes combinaciones de colores tanto creadas por nosotros como descargadas de internet.

También en internet podemos encontrar herramientas online muy útiles para la combinación de colores como por ejemplo Color Scheme Designer.
TeoriaColor_ColorSchemeDesigner.png






http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/
http://creaarteconelarte.blogspot.com/2011/04/armonia-y-contraste.html
http://www.cristalab.com/tutoriales/guia-basica-para-la-combinacion-de-colores-c53345l/
La ARMONÌA: Se logra cuando los elementos y los recursos visuales se selecciona y se disponen de tal manera que se acentúan las similitudes y se produce una sensación de equilibrio. En tanto que el CONTRASTE se alcanza seleccionando y disponiendo los elementos de forma que se acentúan las diferencias y produce una sensación de tensión.