Combinación de colores

¿Cómo combinar colores a la hora de realizar el diseño de un nuevo

proyecto?

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.
Una de las primeras cosas a tener en cuenta es el número o cantidad de colores.
Es arriesgado establecer una norma estricta, ya que más de 6 colores simultáneos
en una composición 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.

Dos puntos a tener en cuenta

• Siempre es mejor pocos colores antes que muchos. Como mínimo, el

riesgo de estridencias es menor.
• Podemos afirmar que 3 colores en una misma composición sería lo mínimo
a utilizar y, en la mayoría de casos, debiera ser suficiente. Con menos de 3,
las posibilidades de que la página o la imagen sea anodina y aburrida son
muy grandes.

Estructura básica de una composición

• Color Primario: es el tono básico de la página, el que la define, y el que

ocupa la gran mayoría de la misma. Sería el color del atributo "background"
de la página.

• Color Secundario: es el segundo tono predominante en la página, aunque

en mucha menor medida que el primario. Normalmente debe acotar o
resaltar áreas y debe ser bastante próximo en tono al primario.

• Color Destacado: es el color que se utiliza para resaltar aspectos

concretos de la página. Por definición debe contrastar mucho con los
colores primario y secundario y, por tanto, debe utilizarse con moderación.
Puede utilizarse el Complementario o el Complementario Escindido del
color primario de la página.

Relación entre colores

Circulo Estándar del Color

Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser:

• Colores Análogos: Para un determinado color, sus colores análogos son

aquellos que se encuentran a ambos lados del mismo en el círculo de color.
Por ejemplo los análogos del naranja serían el rojo y el amarillo. En un
sentido más específico, los análogos del rojo "red", serían rojo violáceo
"crimson" y rojo anaranjado "orangered".

Usados juntos producen sensación de armonía. Suele ser una buena idea
usar colores complementarios como primario y secundario de una página
web.

• Colores Complementarios: Son aquellos que se encuentran opuestos en

el círculo de color (por ejemplo el amarillo y el violeta o naranja y azul).
Usados juntos producen un gran contraste destacando mucho uno sobre el
otro. Su efecto puede ser llamativo y hasta agresivo.
Dos colores complementarios serían por ejemplo el rojo violáceo "crimson"
y el turquesa "turquoise"
 Suele funcionar muy bien usar el color complementario del primario de una
página como color destacado. También suele ser una buena alternativa
utilizar el color complementario del secundario.

• Colores Monocromáticos: Son aquellos que se encuentran aislados, sin

presencia de otros colores. Usados producen sensación de unidad,
homogeneidad y robustez. Se puede evitar la monotonía utilizándolos con
diferente luminosidad (más clara y más oscura).

• Colores Complementarios Adyacentes: Para un color, sus

complementarios adyacentes son los colores análogos de su color
complementario.
Tres colores complementarios adyacentes del rojo "red" serían por ejemplo
el verde primavera "springgreen" y el azul cielo "skyblue".

El uso de de un color y sus complementarios adyacentes aporta un alto

nivel de contraste, sin llegar al extremo cuando se usa directamente su
complementario. También suele ser mayor la sensación de armonía que
usando el complementario directo.

• Tríada de Colores: Tres colores constituyen una Tríada cuando sus tonos
son equidistantes en el Círculo Estándar de Color.

• Un ejemplo de tríada lo constituirían el amarillo "yellow" junto al turquesa

"turquoise" y al violeta "violet".
 Utilizar un esquema de color en tríada suele ser una buena solución cuando
se desea un diseño colorido, ya que la mezcla estará bien balanceada. Si el
conjunto resulta demasiado colorido para lo que necesitamos, siempre se
pueden apagar un poco los colores disminuyendo su luminosidad o su
saturación (o ambas).

• Esquema Cromático Monótono: Un esquema de color monotono lo

constituyen un único tono de color junto a sus posibles variaciones en
términos de tintes, luminosidad y saturación.

Suele ser una buena solución si se desea un diseño robusto y homogéneo

pero con las diferenciaciones y resaltes necesarios. En el caso probable de
sensación de monotonía, siempre es una buena solución introducir negro y
blanco.

• Esquema Acromático Monótono: Un esquema de color acromático

monótono es un caso particular del esquema de color monótono constituido
sólo por colores neutros dentro de la gama del negro al blanco.

Suele ser un esquema eficaz con el que diseñar los distintos componentes
de la página web, pero con seguridad resultará aburrido. Una buena
solución es introducir un color resaltado como rojo o celeste.
Contraste entre colores

El contraste será mayor cuantos mayores sean las diferencias entre ambos en
términos de:

• Tono
• Luminancia
• Cromancia

Cuando se diseña un sitio el elegir el contraste entre los colores que vamos a usar
es muy importante porque va a influir directamente en la sensación que vamos a
transmitir a los visitantes.

En primer lugar será importante que exista un gran contraste entre el testo
ordinario 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).

Si en nuestras páginas utilizamos por ejemplo un marco del área de trabajo gris y
queremos utilizar un verde para áreas resaltadas, no es lo mismo elegir la sig.
Combinación:

En contraposición con esta

En el segundo caso la gran luminosidad de ambos colores, y en especial la del

verde, hace que el contraste sea demasiado grande y la combinación resulte
agresiva.