Teora del color basado en el curso

Fundamentos de Diseo Web

Colores dependiendo el uso.
Los colores en los elementos que conforman una pgina web son de gran importancia, ya
que permiten llamar la atencin de los usuarios para garantizar que el mensaje que
queremos proyectar sea el adecuado. Es por eso, que cada elemento web, puede tener un
color u otro dependiendo del uso o accin para el que est destinado.
Para poder seleccionar un color adecuado para los elementos, es necesario inicialmente
elegir una paleta de colores, con la que se pueda trabajar y crear combinaciones
agradables.
Cuando se usa un color primario (Rojo, Verde, Azul) en la paleta de colores, este
debe ser ampliamente utilizado en todas las pantallas y componentes, cambiando
sus tonalidades.
Las paletas con colores secundarios (resultado de la mezcla de dos colores
primarios), se pueden utilizar para indicar una accin relacionada o informacin. El
color secundario debe ser ms oscuro o ms claro que el color primario que se est
utilizando.
Colores de acento: los colores acentuados deben usarse en los botones de accin
flotantes, y en elementos interactivos, como por ejemplo:
Cajas de texto
Switches
Controles de seleccin
Seleccin de texto
Barras de progreso
Links
Los colores de acento, no deben ser utilizados para dar color a un texto en prrafo,
tampoco se deben usar en reas grandes, debemos evitar usar el mismo color que
un fondo.
Si el color acentuado, es muy claro o muy oscuro para contrastar con el color de
fondo, use en su lugar una sombra ms oscura o un tinte ms claro.
El color del texto puede ser presentado con distintos grados de opacidad para
transmitir la importancia de la informacin referente a otra. El nivel de opacidad
depende de si el fondo es ms claro o ms oscuro.
Textos oscuros en fondos claros.
Para textos oscuros en fondos claros, aplicar los siguientes niveles de
opacidad:
Los textos ms importantes tienen una opacidad de 87%
Los textos secundarios tienen una jerarqua visual de 54%
Los textos de consejo y los textos deshabilitados, tienen una opacidad
del 38%
Textos claros en fondos oscuros.

Los textos importantes tienen una opacidad del 100%

Los textos secundarios tienen una opacidad del 70%
Los textos de consejo y los textos deshabilitados, tienen una opacidad del
50%
Utilizar color negro o blanco transparente, en fondos que cambian de color para
mantener la legibilidad del texto.
Si se utiliza color negro o blanco en los iconos con valores hexadecimales, estos
podrn resaltar sobre cualquier color de fondo.
Para los iconos oscuros utilizar una opacidad del 38% si estn inactivos y de 54%
para iconos activos.
Si se trata de iconos claros, utilizar una opacidad del 100% para iconos activos y una
opacidad del 50% para iconos inactivos.

Un ejemplo de utilizar diferentes colores en un elemento, pueden ser los botones de accin
en la pgina web:
Color rojo: para botones que conllevan acciones negativas, por ejemplo el borrar
algn elemento o dato.
Color verde: se utiliza en botones que su accin es para confirmar o validar algo, por
ejemplo en los formularios de registro.
Color azul: va ms asociado a tener botones de informacin.

Cmo combinar colores?

La paleta de colores que se utilice en el diseo es importante, ya que es lo primero que un
usuario nota al visitar una pgina web, por lo que es necesario realizar las combinaciones
correctas, as como utilizar una proporcin de colores adecuadas.
Es importante mencionar que entre menos colores se utilicen mayor ser la atencin que se
capte del usuario. Ahora bien, se recomienda utilizar la proporcin 60-30-10, en la que se
indica que el 60% del diseo es abarcado por un color dominante, 30% del espacio de la
web puede ser llenado con uno o varios colores secundarios y el 10% ser el color que le
de acento a la combinacin de colores que se haya elegido.
Para seleccionar los colores se puede partir del crculo cromtico, con el cual se pueden
hacer combinaciones armoniosas, ya que se puede dividir en colores clidos y colores fros.
Colores Clidos:
Amarillo
Amarillo naranja
Naranja
Rojo anaranjado
Rojo
Rojo violaceo (Magenta)
Colores Fros:

Violeta
Azul Violaceo
Azul
Azul verdoso (cyan)
Verde
Amarillo Verdoso

Combinacin monocromtica.
Est basada en un solo color, y a partir de este se puede y subiendo o bajando la saturacin
para generar distintas tonalidades, es til cuando el sitio destaque por un solo color.

Combinacin de colores complementarios.

Si lo que se busca es contrastar, los colores complementarios son la opcin adecuada, ya
que el complementario de un color es su opuesto en el crculo cromtico, por ejemplo del
color azul su complementario es el naranja, y del amarillo verdoso es el magenta.

Combinacin de colores anlogos.

Esta combinacin se da al elegir los colores que se encuentran pegados en el crculo
cromtico, por ejemplo, si se elige el color cyan, sus colores anlogos son el color azul y el
color verde. Esta combinacin se utiliza para crear un mayor contraste que la combinacin
monocromtica, pero menor que la combinacin de colores complementaria.

Es recomendable, elegir un color predominante, y de sus anlogos elegir el color de apoyo

al predominante y el otro color para complementarlo para crear el contraste.

Combinacin de colores en triadas.

Esta combinacin se logra al formar un tringulo equiltero

sobre el crculo cromtico, y funciona de la mejor manera,
eligiendo un color dominante que se use en mayor medida que
los otros colores, para imprimir fuerza y contraste.

Significado de los colores.

Amarillo
Est vinculado con la inteligencia y la creatividad, transmite emociones como optimismo,
felicidad y alegra. Es comn verlo en promociones de artculos o servicios relacionados con
ocio o productos para nios. Puede dar muy buenos resultados para los botones de llamada
a la accin.

Naranja
El naranja es un color energtico y lleno de vida, asociado con la diversin, felicidad,
energa, ambicin y entusiasmo. Se utiliza para llamar la atencin en las llamadas a la
accin (suscripciones, compras, etc.), ventas u otro contenido que quieras que llame la
atencin.

Azul
Se asocia con la eficacia, seriedad, fortaleza, sabidura, lealtad, fuerza, productividad,
confianza y seguridad. Puede representar empresas grandes y bancos, adems que es
bueno para temas de salud, tecnologa, medicina, ciencia, polticos y servicios pblicos.

Rojo
Se asocia con la emocin, la pasin, amor, energa y movimiento. Tambin puede tener
asociaciones negativas, incluyendo la guerra, la violencia, el fuego y el peligro. Se usa el
rojo para representar comida, moda, entretenimiento, deportes, marketing, servicios de
emergencia y seguros de salud.

Morado
El morado se asocia con la realeza. Puede transmitir creatividad, imaginacin, autoridad,
sofisticacin y poder. Se usa los tonos oscuros para crear una sensacin de lujo y riqueza, y
los tonos ms claros para felicidad y romance. El morado tambin puede ser perfecto para
productos de belleza, astrologa, masaje, yoga, salud, espiritualidad y contenido relacionado
con chicas adolescentes y marcas femeninas.

Rosa
El rosa representa la sofisticacin, sinceridad, romance y amor. No tiene las notas violentas
del rojo, y puede ser bastante apacible. Es ptimo para productos o pginas dirigido a
mujeres y chicas adolescentes.

Verde
Se asocia con el crecimiento, la salud, naturaleza, bienestar, dinero, paz y energa. Es una
gran opcin para la ciencia, turismo, medicina, recursos humanos, medioambiente y
sostenibilidad.

Marrn
El marrn es un color natural y clido asociado con la tierra, amistad y naturaleza. Puede
usarse para estimular el apetito (como el caf y el chocolate), lo que lo hace apropiado para
el contenido sobre alimentos. Normalmente se emplea para fondos.

Blanco
El blanco se asocia con la pureza, limpieza, felicidad, sinceridad y seguridad. Gran color
para las pginas relacionadas con la industria de la salud. Tambin funciona para pginas
de tecnologa y ciencias.

Negro
Es un color fuerte asociado con la sofisticacin, la elegancia, autoridad, poder, estabilidad,
fuerza, formalidad e inteligencia. Dependiendo de los colores con los que se combine, el
negro puede ser elegante y tradicional, o moderno y puntero.

Referencias:
Google Material Design
https://material.google.com/
Como combinar colores en diseo Web, CristaLab
http://www.cristalab.com/tutoriales/como-combinar-colores-en-diseno-web-c113076l/