Upload
simplemente-pablo
View
217
Download
0
Embed Size (px)
Citation preview
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
1/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 1 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
CÓMO APLICAR LA TEORÍA DEL COLOR EN EL DISEÑO WEB
agosto 31, 2015WebNo Comments
Dicen que la primera impresión lo es todo. Cómo te ves y cómo te muestras
determinará cómo te perciben los demás. Lo mismo es aplicable aldiseño web denuestro sitio. La impresión que generemos en nuestros usuarios dependerá de muchos
factores, y uno de los más importantes es el color.
El color genera sensaciones y emociones, incluso recuerdos. Por tanto es
importante conocer los fundamentos de la teoría del color y que si la conoces te
ayudará a transmitir el mensaje que deseas en tu sitio web o bien generar nuevas ideas.
A veriguar qué colores funcionan bien con los demás no es sólo una cuestión de suerte.
En realidad, existen muchos estudios sobre los efectos que provocan los colores en las
personas.
En la teoría del color existen diversas combinaciones de colores que se agrupan por
catogías y que van muy bien para lograr un objetivo concreto en el diseño web de tu
página.
Empecemos con los fundamentos básicos de la teoría del color y luego pasaremos a
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/teoriacolor.pnghttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/#respondhttp://high-view.com.mx/category/web/
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
2/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 2 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
las combinaciones más avanzadas.
LA RUEDA DE COLORES Y COMBINACIONES
COLORES PRIMARIOS
Los colores primarios son aquellos que no se pueden obtener de la mezcla de ningún
otro. Son los colores básicos que mezclados darán lugar al resto de colores de la gama
cromática. Estos son el rojo, amarillo y azul. Sin embargo, si estamos hablando de
colores de pantalla, tanto en dispositivos móviles como en monitores de sobremesa, los
colores primarios son el rojo, verde y azul (RGB).
COLORES SECUNDARIOS
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-primarios.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
3/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 3 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Si mezclamos a partes iguales los colores primarios, es decir, el rojo con el amarillo, el
amarillo con el azul, y el azul con el rojo, se crean los colores secundarios, que son el
naranja, verde y magenta. La combinación de estos colores en diseño web generan una
gran variedad de contrastes.
COLORES TERCIARIOS
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-secundarios.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
4/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 4 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los colores terciarios se consiguen si mezclamos a partes iguales un color primario
junto con uno secundario, es decir, rojo con magenta, azul con verde, amarillo con
verde, rojo con naranja y amarillo con naranja.
Asi que, ahora que ya conoces cómo se crean los colores, podrás entender mejor cómo
trabajan las combinaciones de colores en el modelo de rueda de colores.
Entender los principios de la combinación de colores te ayudará a elegir las
combinaciones de colores que funcionan bien juntas, generar las emociones
adecuadas, y crear una adecuada cantidad de contrastes en tu diseño web.
A continuación te mostramos las combinaciones de colores básicos derivados de la
rueda de color.
COLORES COMPLEMENTARIOS
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-terciarios.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
5/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 5 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los colores complementarios son colores que están situados uno frente al otro en la
rueda de color. Ejemplos de ello serían el el rojo y el verde, azul y el naranja, el amarillo
y el púrpura, etc. Las combinaciones de colores complementarios crean un gran
contraste entre sí al usarlos a la vez.
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-complementarios-rueda.jpghttp://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-complementarios.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
6/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 6 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
COLORES ANÁLOGOS
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-analogos-ejemplo.jpghttp://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-analogos.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
7/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 7 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los colores análogos son colores que están uno justo al lado del otro en la rueda de
color. Es buena idea elegir un conjunto de colores análogos para crear una sensación
de variedad en el diseño de tu página web.Ejemplos de estos serían el azul con el
verde, el azul con el azul-violeta o amarillo-verde, el amarillo con el amarillo-naranja.
TRÍADAS DE COLORES
http://i2.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-triadas.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
8/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 8 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Una tríada de colores es un conjunto de tres colores que están dispuestos
uniformemente alrededor de la rueda de color. Una tríada contiene una buena variedad
de colores bien equilibrados. En el ejemplo de arriba, el cian, el naranja y el morado
crean un bonito contraste balanceado entre ellos.
COMPLEMENTARIOS DIVIDIDOS
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-triadas-ejemplo.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
9/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 9 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los complementarios divididos parten de toman un color y – en lugar de elegir el
color complementario que le corresponde en la rueda de color – tomamos los dos
situados en posiciones inmediatamente adyacentes. En el ejemplo anterior, si elegimos
el amarillo, el color opuesto en la rueda de color es el morado, pero en vez elegir este,
cogemos el azul-morado y rojo-morado, que crearán un gran contraste con el amarillo yentre ellos serán colores muy cooperativos.
CUADRADO DE COLORES
http://i2.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-split-complementarios.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
10/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 10 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
El modelo de cuadrado de color tiene cuatro colores uniformemente espaciados
alrededor de la rueda de color. En el ejemplo anterior, los colores son azul, naranja, rojo-
violeta, y amarillo-verde. Estos esquemas de color son muy bonitos y funcionan bien
con un color fuerte y versiones más aclaradas de los otros tres colores.
TETRÁDICA (DOBLE COMPLEMENTARIO)
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-cuadrados.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
11/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 11 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los esquemas de color en tetrádica se construyen mediante la creación de un
rectángulo en la rueda de color. Selecciona dos opuestos en la rueda de color y a
continuación seleccionamos otro color desplazándonos dos espacios en la rueda y más
su color complementario.
ACLARADOS Y OSCURECIDOS
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-tetradicos.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
12/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 12 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
El aclarado un color es cuando tomas un color, como el azul en el ejemplo anterior, y
agregas blanco al mismo. Un oscurecido es un color al que se le ha añadido negro.
Puedes crear un gran esquema de colores monocromáticos con aclarados y
oscurecidos del mismo tono de color.
COLORES CÁLIDOS
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/aclarado-sombreado.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
13/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 13 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los colores cálidos crean una sensación de calidez y calor en una imagen o un diseño.
Cuando vemos colores cálidos, pensamos en el sol, el calor, el fuego y el amor (la
pasión). El rojo es el color de la sangre, que es caliente, y naranja y amarillo están más
relacionados con el verano. La adición de un filtro anaranjado a una fotografía hace que
se vea más cálida y más alegre.
COLORES FRÍOS
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-calidos.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
14/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 14 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
Los colores fríos llevan connotaciones de climas fríos, invierno, la muerte, la tristeza, el
hielo, la noche y el agua. Los colores fríos se pueden asociar con la calma, la
tranquilidad, la confianza, la limpieza. El morado está asociada con la realeza, ya que
socialmente se supone que está reservado a ellos.
LOS COLORES EN EL DISEÑO WEB
ROJO
El rojo es el color del amor y la pasión. Las cajas de bombones son de color rojo en el
día de San Valentín. Algunas son de color rosa, que es un aclarado del color rojo. El rojo
es también el color de la ira y de la sangre. Los colores rojo, naranja y amarillo se
encuentran todos ellos en el fuego. Rojo también puede significar peligro. Las señales
de detención son de color rojo, y reciben toda nuestra atención pues nos dicen quedebemos tener cuidado y mirar antes de continuar. El rojo es dominante, y cuando se
combina con colores como el negro, puede crear un look muy masculino. Botones y
enlaces en rojo pueden ayudarte a generar un mensaje de seriedad en el diseño de un
sitio web. Aunque su uso excesivo puede resultar agresivo.
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/colores-frios.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
15/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 15 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
NARANJA
El naranja representa el calor, pero no es tan agresivo como el rojo. El naranja puede
retratar un ambiente divertido porque es enérgico y crea una sensación de calor sin
connotaciones de peligro y de sangre, como ocurre con el color rojo. El naranja puede
estar asociada con la salud, como por ejemplo la vitamina C, que se encuentra
comúnmente en las naranjas.
http://i1.wp.com/high-view.com.mx/wp-content/uploads/2015/08/diseno-web-rojo.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
16/22
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
17/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 17 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
VERDE
El verde es el color del dinero, por lo que en nuestra cultura se asocia con la riqueza.
Como la mayoría de las plantas son de color verde, también se asocia con el
crecimiento y la salud. Se utiliza para mostrar que los productos son naturales y
saludables. También puede tener una connotación de pérdidas y ganancias.
Combinado con azules, el verde perpetúa la salud, la limpieza, la vida y la naturaleza.
http://i2.wp.com/high-view.com.mx/wp-content/uploads/2015/08/diseno-web-amarillo.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
18/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 18 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
AZUL
Dependiendo del aclarado y oscurecimiento del azul, puede representar diferentes
sentimientos, pensamientos y emociones. En las imágenes, azules con tonos oscuros
pueden dar una sensación de tristeza. El azul claro es el color del cielo y del agua, que
puede ser refrescante, libre y tranquilo. Los cielos azules generan calma y tranquilidad.
El agua elimina la suciedad y limpia las heridas. El azul puede representar frescura y
renovación, como cuando la lluvia lava la suciedad y el polvo. La tranquilidad del azul
favorece la relajación.
http://i2.wp.com/high-view.com.mx/wp-content/uploads/2015/08/diseno-web-green.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
19/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 19 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
MORADO
Asociado por el color de las vestimentas reales, el morado se relaciona con la
realeza. Los morados con más rojo pueden estar asociados con romances, intimidad,
suavidad y confort. El morado puede generar sensación de misterio y de lujo.
http://i2.wp.com/high-view.com.mx/wp-content/uploads/2015/08/diseno-web-azul.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
20/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 20 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
BLANCO
Es el color universal utilizado en artes gráficas. Está dentro de la gama de los grises
y representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia los
colores que lo acompañan. El blanco puede también estar asociado con higiene y
esterilidad, debido a que los médicos visten de blanco y la mayoría de los hospitales
utilizan el blanco en sus ropas y camas. La mayoría de las representaciones artísticas
de figuras religiosas son muy claras y blancas, representando la “bondad” y la santidad.
También el blanco puede representar limpieza, como en el caso de la ropa limpia. Y
puede representar suavidad por su analógíca con el algodón y las nubes.
http://i2.wp.com/high-view.com.mx/wp-content/uploads/2015/08/diseno-web-purpura.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
21/22
16-05-16 igh View Cómo aplicar la teoría del color en el diseño web - High View
Página 21 ttp://high-view.com.mx/como-aplicar-la-teoria-del-color-en-el-diseno-web/
NEGRO
El negro se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el
silencio, y el misterio. Es un color que sirve para otorgar elegancia y distinción. También
se asocia con la muerte, especialmente en los paises occidentales. Mucha cantidad de
negro en una imagen puede sugerir depresión y desesperación, así como soledad. Sin
embargo, a pesar de todas las connotaciones negativas, cuando se combina con otros
colores, como el oro, puede representar lujo. Combinado con plata o gris, puede
representar sofisticación, como por ejemplo el sitio web de relojes que te mostramos a
continuación.
http://i0.wp.com/high-view.com.mx/wp-content/uploads/2015/08/diseno-web-blanco.jpg
8/15/2019 High View Cómo Aplicar La Teoría Del Color en El Diseño Web - High View
22/22