color en la web
DESCRIPTION
Clase nº 4 sobre las combinaciones de colores apropiadas para una interfaz webTRANSCRIPT
Color en la web 1. intro
El color es una faceta primordial al definir las líneas maestras de diseño de un website: va a tener una influencia realmente grande en como lo perciban los usuarios y la sensación que les quede después de la visita.
Por descontado que es un tema subjeCvo, ya que cada uno puede aceptar mejor o peor determinadas combinaciones de colores. Sin embargo existen criterios objeCvos si se quiere obtener un diseño equilibrado y agradable y, sobre todo, que ni estrese ni canse.
Color en la web 2. Número de colores
Es arriesgado establecer una norma estricta, ya que 6 colores simultáneos en una página pueden ser demasiados si existe un gran contraste entre ellos, pero pueden conformar una combinación agradable si la relación entre los mismos es adecuada.
Como norma inicial puede asegurarse que siempre es mejor pocos colores que muchos. Como mínimo, el riesgo de estridencias es menor.
Como siguiente norma se puede afirmar que 3 colores en una misma página sería lo mínimo a uClizar y, en la mayoría de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la página sea plana y aburrida son mayores.
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 uCliza para resaltar aspectos concretos de la página. Por definición debe contrastar mucho con los colores primario y secundario y, por tanto, debe uClizarse con moderación.
Color en la web 2. Número de colores
Color en la web 3. Relación
Según su posición relaCva en el Círculo CromáCco, los colores pueden ser:
Color en la web 3.a Análogos
Para un color dado, 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 senCdo 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.
Color en la web 3.b Complementarios
Son aquellos que se encuentran opuestos en el círculo de color. Usados juntos producen un gran contraste destacando mucho uno sobre el otro. Su efecto puede ser llamaCvo y en algunos casos 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 alternaCva uClizar el color complementario del secundario.
Color en la web 3.c MonocromáCcos
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 uClizándolos con diferente luminosidad (más claros y más oscuros).
Color en la web 3.d Adyacentes
Dado un color, sus complementarios adyacentes son los colores análogos de su color complementario.
Dos 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.
Color en la web 3.e Triada
Tres olores consCtuyen una Triada cuando sus tonos son equidistantes en el Círculo Estándar de Color.
Un ejemplo de triada lo consCtuirían el amarillo "yellow" junto al turquesa "turquoise" y al violeta "violet".
UClizar un esquema de color en triada 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 nuestras necesidades, siempre se pueden apagar un poco los colores disminuyendo su luminosidad o su saturación (o ambas).
Color en la web 3.f Esquema CromáCco Monotono
Un esquema de color monotono lo consCtuyen un único tono de color junto a sus posibles variaciones en términos de Cntes, 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 se sensación de monotonía, siempre es una buena solución introducir negro y blanco.
Color en la web 3.g Esquema AcromáCco Monotono
Un esquema de color acromáCco monotono es un caso parCcular del esquema de color monotono consCtuído sólo por colores neutros dentro de la gama del negro al blanco.
Suele ser un esquema eficaz con el que diseñar los disCntos componentes de la página web, pero con seguridad resultará aburrido. Una buena solución es introducir un color resaltado para generar el contrapunto.
Color en la web 4.Contraste
El contraste entre dos colores, es la diferencia que hay entre ambos.
El contraste será mayor cuanto mayores sean las diferencias entre ambos en términos de:
Tono > canCdad de luz / oscuridad
Luminancia > brillo / opacidad
Crominancia > saturación
Color en la web 4.Contraste
Cuando se diseña una página web 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 transmiCr a los visitantes.
En primer lugar será importante que exista un gran contraste entre el texto y el "background” para permiCr una correcta legibilidad. Sin embargo habrá que tener sumo cuidado en no caer en estridencias que generalmente son tomadas como 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.
Color en la web 4. Contraste
Ej: no es lo mismo elegir la combinación:
Que elegir esta otra:
En el segundo caso la gran luminosidad de ambos colores, y en especial la del verde, hace que el contraste sea demasido grande y la combinación resulte un tanto molesta.
La Teoría del Color define muchos Cpos de contraste y, aunque algunos no son especialmente aplicables a páginas web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.
Color en la web 4. Contraste de tono
Está relacionado directamente con las distancias entre dos colores dentro del Círculo CromáCco, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.
Es interesante el contraste de tono entre colores fríos y cálidos. Los colores cálidos siempre aparecen al espectador más próximos, mientras que los colores fríos aparecen al espectador más distantes.
En una página web será más conveniente uClizar colores fríos para marcos, tapices o elementos secundarios y colores cálidos para menús, iconos o barras de herramientas que queramos que el usuario siempre tenga presente.
Color en la web 4. Contraste de luminancia o de valor
Permite crear grandes contrastes con el mismo tono de color sólo mediante el brillo de luz:
En general este Cpo de contraste, aún siendo grande, es agradable al ojo humano, con lo que usarlo en diseños web suele ser trabajar sobre seguro. Como contraparCda, no arriesgar en la combinación de tonos, puede significar apostar por un diseño convencional, poco impactante.
Color en la web 4. Contraste de saturación
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.
Color en la web 4. Contraste simultáneo
Cuando vemos un color, nuestra percepción de él es influida por los colores que lo rodean. Nunca podremos considerar las caracterísCcas de un color como absolutas sino siempre relaCvas al entorno. En el siguiente ejemplo podemos ver como en cada fila de cuadrados los centrales, que Cenen el mismo color, parecen tener colores disCntos:
Color en la web 4. Combinación de contrastes
En este caso se ha uClizado un Contraste de Tono, poniendo un lienzo violeta y el texto en turquesa, que es complementario adyacente del primero, por lo que la combinación debería aportar suficiente contraste de color.
Sin embargo, vemos que para el caso de textos, no es así: la combinación no aporta suficiente contraste y leer el texto cansa la vista (sobre todo si fuera un párrafo largo). Aunque la mezcla es natural y no es desagradable, no es adecuada para textos.
Color en la web 4. Combinación de contrastes
En este segundo caso, al contraste de color inicial le hemos añadido Contraste de Luminancia, oscureciendo el background e iluminando el foreground. La combinación de ambos contrastes aumenta sensiblemente la legibilidad del texto.
Color en la web 4. Combinación de contrastes
Los colores Cenen unas caracterísCcas naturales de luminosidad. En el ejemplo vemos que el turquesa o azul mar es naturalmente más claro que el rojo violáceo, la mezcla funciona bien y aporta suficiente contraste.
Color en la web 4. Combinación de contrastes
Sin embargo, inverCr las relaciones naturales entre colores no funciona. Aportando contraste de luminancia y de saturación simultáneamente conseguimos oscurecer el turquesa y aclarar el crimson pero, aunque consiguiéramos suficiente contraste para resaltar el texto (que vemos que no es el caso), la vista no se senCría cómoda ante la mezcla y el texto no se lee.