Pgina 1 Combinacin y mezcla de colores para la Web

13/04/2012 08:06:49 a.m. http://www.webusable.com/coloursMix.htm

Usabilidad
Diseo Tcnico
Diseo Grfico
CSSs
Esquemas
Herramientas
Utilidades
Sobre WebUsable
Buscar
El uso de los colores en la Web
Relacionado: Los colores | Cubo 6X6 | El significado de los colores | Cdigos de colores
Contenido:
1. Introduccin
2. Nmero de colores en pgina
3. Relacin entre colores
4. El Contraste entre colores
1. 4.1 Contraste de Tono
2. 4.2 Contraste de Valor
3. 4.3 Contraste de Saturacin
4. 4.4 Contraste Simultneo
5. 4.5 Combinacin de contrastes
5. Los colores y el texto
6. Ceguera al color
1. Introduccin:
Esta es una faceta primordial al definir las lneas maestras de diseodeun seb site: va a tener una influencia
realmente grande en como lo perciban los usuarios y la sensacin que les quede despus de la visita.
Por descontado que es un tema subjetivo, ya que cada uno puede aceptar mejor o peor determinadas combinaciones
de colores. Sin embargo existen criterios objetivos si se quiere obtener un diseo equilibrado y agradable y, sobre
todo, que ni estrese ni canse.
2. Nmero de colores en pgina:
Es arriesgado establecer una norma estricta, ya que 6 colores simultneos en una pgina pueden ser demasiados si
existe un gran contraste entre ellos, pero pueden conformar una combinacin agradable si la relacin entre los
mismos es adecuada..
Como norma inicial puede asegurarse que siempre es mejor pocos colores mejor que muchos. Como mnimo,
el riesgo de estridencias es menor.
Como siguiente norma se puede afirmar que 3 colores en una misma pgina sera lo mnimo a utilizar y, en la
mayora de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la pgina sea anodina y
aburrida son muy grandes.
Color Primario: es el tono bsico de la pgina, el que la define, y el que ocupa la gran mayora de la
misma. Sera el color del atributo "background" de la pgina.
Color Secundario: es el segundo tono predominante en la pgina, aunque en mucha menor medida
que el primario. Normalmente debe acotar o resaltar reas y debe ser bastante prximo en tono al
primario.
Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la pgina. Por
definicin debe contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con
moderacin. Puede utilizarse el Complementario o el Complementario Escindido del color primario
de la pgina.
3. Relacin entre colores:
Segn su posicin relativa en el Crculo Estndar de Color, los colores pueden ser:
Colores Anlogos: Para un color dado, sus colores anlogos son aquellos que
se encuentran a ambos lados del mismo en el crculo de color.
Por ejemplo los anlogos del naranja seran el rojo y el amarillo. En un sentido
ms especfico, los anlogos del rojo "red", seran rojo violceo "crimson"
y rojo anaranjado "orangered".

Pgina 2 Combinacin y mezcla de colores para la Web
13/04/2012 08:06:49 a.m. http://www.webusable.com/coloursMix.htm
Por ejemplo los anlogos del naranja seran el rojo y el amarillo. En un sentido ms especfico, los anlogos del
rojo "red", seran rojo violceo "crimson" y rojo anaranjado "orangered".



Usados juntos producen sensacin de armona. Suele ser una buena idea usar colores complementarios
como primario y secundario de una pgina web.
Colores Complementarios: Son aquellos que se encuentran opuestos en el crculo
de color (por ejemplo el amarillo y el violeta). Usados juntos producen un gran
contraste destacando mucho uno sobre el otro. Su efecto puede ser llamativo y
hasta agresivo.
Dos colores complementarios seran por ejemplo el rojo violceo "crimson" y el
turquesa "turquoise".


Suele funcionar muy bien usar el color complementario del primario de una pgina como color
destacado. Tambin suele ser una buena alternativa utilizar el color complementario del secundario.
Colores Monocromticos: Son aquellos que se encuentran aislados, sin presencia de otros colores. Usados
producen sensacin de unidad, homogeneidad y robustez. Se puede evitar la monotona utilizndolos con
diferente luminosidad (ms claros y ms oscuros).



Colores Complementarios Adyacentes: Dado un color, sus complementarios adyacentes son los colores
anlogos de su color complementario.
Dos colores complementarios adyacentes del rojo "red" seran 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. Tambin suele ser mayor la sensacin de armona
que usando el complementario directo.
Colores Triada: Tres olores constituyen una Triada cuando sus tonos son equidistantes en el Crculo
Estndar de Color.
Un ejemplo de triada lo constituiran el amarillo "yellow" junto al turquesa "turquoise" y al violeta
"violet".



Utilizar un esquema de color en triada suele ser una buena solucin cuando se desea un diseo colorido, ya
que la mezcla estar bien balanceada. Si el conjunto resulta demasiado colorido para nuestras necesidades,
siempre se pueden apagar un poco los colores disminuyendo su luminosidad o su saturacin (o ambas).
Esquema Cromtico Monotono: Un esquema de color monotono lo constituyen un nico tono de color
junto a sus posibles variaciones en trminos de tintes, luminosidad y saturacin.



Suele ser una buena solucin si se desea un diseo robusto y homogneo pero con las diferenciaciones y
resaltes necesarios. En el caso probable se sensacin de monotona, siempre es una buena solucin introducir
negro y blanco.
Esquema Acromtico Monotono: Un esquema de color acromtico monotono es un caso particular del
esquema de color monotono constitudo slo por colores neutros dentro de la gama del negro al blanco.




Suele ser un esquema eficaz con el que disear los distintos componentes de la pgina web, pero con
seguridad resultar aburrido. Una buena solucin es introducir un color resaltado.
4. El Contraste entre colores:
Pgina 3 Combinacin y mezcla de colores para la Web
13/04/2012 08:06:49 a.m. http://www.webusable.com/coloursMix.htm
4. El Contraste entre colores:
Buscandlo una definicin intuitiva, podemos simplificar y decir que el contraste entre dos colores, es la diferencia
que hay entre ambos. El contraste ser mayor cuanto mayores sean las diferencias entre ambos en trminos de:
Tono
Luminancia
Crominancia
Cuando se disea una pgina web el elegir el contraste entre los colores que vamos a usar es muy importante
porque va a influir directamente en la sensacin que vamos a transmitir a los visitantes.
En primer lugar ser importante que exita un gran contraste entre el testo ordinario y el "background". Sin embargo
habr que tener sumo cuidado en no caer en estridencias que generalmente son tomadas como inmadurez o falta de
profesionalidad.
Esta misma recomendacin es aplicable cuando elegimos colores para resaltar o separar reas de contenidos: aqu es
menos necdesario y abusar de l puede ser an ms perjudicial.
Si en nuestras pginas utilizamos por ejemplo un marco del rea de trabajo gris y queremos utilizar un verde para
reas resaltadas, no es lo mismo elegir la combinacin:


Que elegir esta otra:


En el segundo caso la gran luninosidad de ambos colores, y en especial la del verde, hace que el contraste sea
demasido grande y la combinacin resulte agresiva.
La Teora del Color define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a pginas
web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.
4.1 Contraste de Tono: Est relacionado directamente con las distancias entre dos colores dentro del Crculo
Estndar de Color descritas en el apartado 3. Relacin entre colores. as, cuanta mayor es la distancia entre dos
colores dentro del crculo, mayor es el contraste entre ambos.


Entonces, una pareja de colores complementarios produce el mximo contraste, mientras que para
cualquier color el que menor contraste produce con este es su adyacente.
Es interesante el contraste ce tono entre colores fros y clidos. Los colores clidos siempre aparecen al
espectador ms prximos, mientras que los colores fros aparecen al espectador ms distantes.
En una pgina web ser ms conveniente utilizar colores fros para marcos, tapices o elementos secundarios y
colores calientes para mens, iconos o barras de herramientas que queramos que el usuario siempre tenga
presente.
Para la relacin texto y background normalmente no ser suficiente cfontraste de tono ya que no
garantizar legibilidad suficiente. Ser necesario aplicar algn tipo de contraste adicional.
4.2 Contraste de Luminancia (o de Valor): Permite crear grandes contrastes con el mismo tono de color slo
mediante el brillo de luz:


En general este tipo de contraste, an siendo grande, es agradable al ojo humano, con lo que usarlo en
diseos web suele ser trabajar sobre seguro. Como contrapartida, no arriesgar en la combinacin de tonos,
puede significar apostar por un diseo convencional, poco impactante.
4.3 Contraste de Saturacin: El contraste de saturacin con frecuencia es el ms adecuado para resaltar aspectos
de la pgina web de una forma moderada, poco estridente.


Un efecto interesante se obtiene utilizando reas con diferentes saturaciones con un fondo gris: se produce
una sensacin de transparencia que puede ser muy apropiada en ciertas circunstancias.



Pgina 4 Combinacin y mezcla de colores para la Web
13/04/2012 08:06:49 a.m. http://www.webusable.com/coloursMix.htm



4.4 Contraste Simultneo: Es un efecto creado por nuestro sistema visual que, dado un color predominante,
tiende a requerir su color complementario.
Este efecto puede obtenerse combinando dos colores brillantes pero que no sean complementarios, o,
simplemente, utilizando un color brillante sobre un background neutro (un color de la gama de los grises).


Este tipo de contraste tiene la ventaja de resaltar diferencias entre reas de forma impactante, pero sin la
agresividad que producen los complementarios. Sin embargo puede provocar tensin e inestabilidad y debe
utilizarse con prudencia.
4.5 Combinacin de contrastes: Es lo ms frecuente, sobre todo cuando se trata de resaltar textos.
Esto es un texto
En este caso se ha utilizado un Contraste de Tono, poniendo un lienzo violeta y el texto en turquesa, que es
complementario adyacente del primero, por lo que la combinacin debera aportar suficiente contraste de
color.
Sin embargo, vemos que para el caso de textos, no es as: la combinacin no aporta suficiente contraste y
leer el texto cansa la vista (sobre todo si fuera un prrafo largo). Aunque la mezcla es natural y no es
desagradable, no es adecuada para textos.
Esto es un texto
En este segundo caso, al contraste de color inicial le hemos aadido Contraste de Luminancia, oscureciendo
el background e iluminando el foreground. La combinacin de ambos contrastes aumenta sensiblemente la
legibilidad del texto.
Esto es un texto
Los colores tienen unas caractersticas naturales de luminosidad. As el turquesa o azul mar es naturalmente
ms claro que el rojo violceo. Habida cuenta que son complementarios, la mezcla funciona bien y aporta
suficiente contraste.
Esto es un texto Esto es un texto
Sin embargo, invertir las relaciones naturales entre colores no funciona. Aportando contraste de luminancia y
de saturacin simultneamente conseguimos oscurecer el turquesa y aclarar el crimson pero, aunque
consiguieramos suficiente contraste para resaltar el texto (que vemos que no es el caso), la vista no se
sentira cmoda ante la mezcla.
5. Los colores y el texto:
Como acabamos de comentar usar convenientemente el contraste es especialmente importante cuando se trata de
escribir texto y resaltarlo suficientemente para garantizar su legibilidad a la totalidad de nuestros usuarios.
Pero no slo es una cuestin de contraste. Hay combinaciones de colores que:
Son especialmente conflictivas para usuarios con disfunciones en la vista
6. Ceguera al color:
Hay mltiples tipos de disfunciones en la visualizacin de los colores, como describimos en nuestra pgina de los
colores. Sin embargo a efectos de accesibilidad slo necesitamos preocuparnos de los daltnicos, grupo que
constituye la inmensa mayora de los que sufren alteraciones en la percepcin del color.
Pensando en ellos, deberemos tratar de evitar siempre las combinaciones de texto en cualquiera de las variedades del
verde sobre fondos rojizos, reas con motivos en este color predominante, etc ., y biceversa. Independiente de la
luminosidad o saturacin de los colores.
Pgina 5 Combinacin y mezcla de colores para la Web
13/04/2012 08:06:49 a.m. http://www.webusable.com/coloursMix.htm
Pensando en ellos, deberemos tratar de evitar siempre las combinaciones de texto en cualquiera de las variedades del
verde sobre fondos rojizos, reas con motivos en este color predominante, etc ., y biceversa. Independiente de la
luminosidad o saturacin de los colores.
Relacionado: Los colores | Cubo 6X6 Estndar | El significado de los colores | Cdigos de colores

WebUsable .com Todos los derechos reservados.