teoría del color aplicada al diseño web
TRANSCRIPT
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 1/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
1
Alumno: Lenin Chávez. Asignatura: Aplicaciones Informáticas 1
Docente: Ing. Irving Reascos.
Martes, 08 de noviembre de 2011
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 2/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
2
Contenidos:
Resumen con respecto a colores, tonos y matices(Parte Teórica).
1.1. Combinaciones de colores monocromáticas.
1.2. Combinaciones de colores complementarios. 1.3. Colores cálidos y colores fríos. 1.4. Combinaciones de colores tríadicas. 1.5. Combinaciones de colores tetrádicas.
2. Consejos de usabilidad, “No me hagan pensar”.
3. Colores dependiendo de las partes de una página.
(Parte Práctica).
4. Significado de los colores aplicado al diseño web. (enqué casos aplicarlos)
4.1 Tabla de propiedades de los colores
o Significado
o Su uso aporta
o Significado
4.2 Tabla de sensaciones:
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 3/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
3
1. Colores, tonos y matices
Los colores, o tonos, se han dividido tradicionalmente en colores primarios, secundarios y
terciarios.
Los colores primarios son el rojo, el amarillo y el azul, y se denominan primarios porque no
hay que mezclar colores para conseguirlos. Si queréis traducir estos colores en colores web,
podéis reproducirlos utilizando sus equivalentes hex (hexadecimales) #ff0000, #ffff00 y
#0033cc como se muestra a continuación:
Los colores secundarios se mezclan a partir de los colores primarios, y son lossiguientes:
Rojo + amarillo = naranja (#ff9900) Amarillo + azul = verde (#00cc00) Azul + rojo = violeta (#660099)
Los colores terciarios se mezclan a partir de los colores secundarios y se encuentranentre los colores primarios y secundarios mostrados en la rueda anterior.
Aunque los colores web son diferentes de los colores normales "de los pintores",puede ser útil tener una rueda de colores (como la que se ve en la figura 2) y tenerla amano mientras aprendéis las diferentes combinaciones de colores. Además, una rueda
de colores os mostrará todos los colores, tonos y matices para empezar a ver las
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 4/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
4
posibilidades de colores de las que disponéis. A continuación, se enumeran algunostérminos importantes que hay que aprender:
Tono (tint): el color resultante cuando se añade blanco. Tonalidad (tone): el color resultante cuando se añade gris. Matiz (shade): el color resultante cuando se añade negro.
Las flechas de la figura anterior indican cosas diferentes, a saber:
Lado más exterior: color terciario de amarillo naranja (amarillo + naranja). Segundo lado: tono de este color terciario (blanco añadido). Tercer lado: tonalidad del color (gris añadido). Lado más interior: matiz sobre la rueda imprimida (negro añadido).
Como se puede ver en la rueda de colores anterior, la cantidad de blanco, gris y negroañadido a un color es mínima, pero suficiente para alterar el color original y crear loque se conoce como combinación de colores monocromática.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 5/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
5
Combinaciones de colores monocromáticas
Las combinaciones de colores existen desde hace siglos, de manera que no hay quereinventar la rueda de colores. Aunque el color de la web sea diferente del colorimprimido, los conceptos son los mismos. Sólo es necesario cambiar los númeroshexadecimales por nombres de colores y hacer que coincidan lo máximo posible. Unaherramienta de la Red que recomendamos para esta tarea es Color Scheme GeneratorII, como se observa en la figura siguiente, que permite determinar las combinaciones
de colores de manera rápida y sencilla, e incluso determinar si los colores que habéiselegido ofrecen suficiente contraste para los usuarios con poca visión o daltónicos.
Esta es la dirección de esta aplicación:
http://colorschemedesigner.com/previous/colorscheme2/index-en.html
El término web-safe colours
El término web-safe colours ("colores seguros para la web") proviene de un tiempo enel que los monitores podían mostrar 256 colores, de los que sólo 216 eran los mismosen las diferentes plataformas Windows/Mac/Unix, de aquí la expresión seguro para la
web. Mientras que algunos puristas todavía se ciñen a la "paleta de colores segurospara la web", los navegadores modernos son capaces de tratar lo que se conoce comocolor de "24 bits". El color de 24 bits real a entre diez y once bits por canal genera untotal de 16.777.216 colores diferentes. En otras palabras, es seguro decir que la paleta
de colores "seguros para la web" ya raramente es necesaria.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 6/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
6
Una combinación de colores monocromática equivale a un color y todos sus tonos,tonalidades y matices. Aunque esta combinación es la más sencilla de utilizar, paramuchos diseñadores no aporta mucho interés al diseño de una web. En vez de eso,quizá os atraiga explorar otras combinaciones para añadir variedad a vuestros enlaces,imágenes y banners.
1.2. Combinaciones de colores complementarios
La siguiente familia de combinaciones de colores que cabe descubrir es la combinación de
complementarios, donde se emparejan los colores que se encuentran directamente opuestos
entre ellos en la rueda de colores, como se puede ver en la siguiente figura.
Cuando se elige un color y su color opuesto, también se incluyen todos los tonos, las
tonalidades y los matices de ambos colores. Ello da una gama más amplia de opciones y se
traduce bien con la herramienta de colores en línea; podéis consultar la siguiente figura.
En la figura anterior, hemos elegido un color naranja con el color complementario opuesto: el
azul. La configuración que hemos elegido para conseguir esta combinación incluye el ajuste del
Contraste en la parte inferior izquierda, el valor predeterminado en el menú situado bajo el
generador y visión normal. Observad que el color principal seleccionado está marcado con un
punto negro en el disco interior de la rueda de colores (tanto por encima como en línea en la
web del generador) y que el color complementario opuesto que se ha elegido
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 7/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
7
automáticamente está marcado con un círculo vacío en la anilla interior. Estas marcas facilitan
que podáis analizar vuestra combinación de colores.
1.3. Colores cálidos y colores fríos
Las combinaciones de colores complementarios son geniales para utilizarlas en laswebs porque contienen colores cálidos y fríos al mismo tiempo. El uso de estos coloresproporciona contraste y es muy fácil recordar qué colores son cálidos y qué colores sonfríos, como se puede ver en la figura 8 (y en la web del generador de colores):
Figura 8. Colores cálidos (warm) y colores fríos (cold).
Los colores cálidos son los colores que recuerdan el verano, el sol o el fuego. Vandesde los violetas hasta los amarillos. Los colores fríos pueden recordar la primavera,el hielo o el agua. Estos colores van desde el amarillo verde hasta el violeta. Siobserváis cómo funcionan los colores en la rueda, no tardaréis en descubrir que nopodéis elegir un color sin elegir su opuesto en "temperatura". De manera que si elegísun rojo caliente, el opuesto es un verde frío. O, si elegís un azul verde frío, acabaréiscon un rojo naranja picante en el otro lado.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 8/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
8
1.4. Combinaciones de colores triádicas
Una combinación de colores triádica (podéis ver la figura 10) se crea eligiendo un colory después eligiendo dos colores más equidistantes entre ellos en torno al círculo, así:
Figura 10. Una combinación de colores triádica
Hemos elegido los colores primarios para esta combinación porque queríamos que seviera cómo las combinaciones de colores parecen dar un orden al caos. No escasualidad que los colores primarios estén donde están en la rueda de colores, ya quecada color contiene una cantidad igual de colores secundarios y terciarios entre cadaprimario. Pero una combinación de colores triádica puede parecer muy vista porque yase ha utilizado en exceso. En vez de esto, podéis elegir algunas otras opciones decolores en el generador de colores en línea; algo parecido a la figura 11:
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 9/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
9
Figura 11. Una combinación de colores triádica alternativa
1.5 Combinaciones de colores tetrádicas
Cuantos más colores elijáis, más complicada será la combinación de colores. Noobstante, un truco es encontrar un tono, tonalidad o matiz y limitarse a estas zonas deltablero en vez de mezclar colores puros y sus tonos, tonalidades y matices. Estemétodo funciona bien con una combinación de colores como la combinación tetrádicade cuatro colores. Esta combinación (podéis ver la figura 13) es casi igual que lacombinación complementaria, con la diferencia de que se utilizan doscomplementarios equidistantes.
Figura 13. Combinaciones de colores tetrádicas.
En la figura 14 se muestra cómo funciona una combinación tetrádica en línea:
Figura 14. Una combinación de colores tetrádica en el generador en línea
Fijaos en el punto negro bajo el rojo en la rueda de colores, a la izquierda. Éste es elprimer color que hemos seleccionado; después, hemos pinchado en el botón Tetrad debajo de la rueda. Los cuatro colores que han aparecido esta vez también eran un
poco diferentes de la rueda de colores que teníamos en la mano, pero cuando hemoscolocado la herramienta Angle/Distance debajo de la rueda de colores hasta "max", ha
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 10/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
10
coincidido mucho con la rueda de colores que teníamos en la mano. Los resultadosmostrados anteriormente son los que más se acercaban a la rueda de colores.
Esta combinación de colores puede complicarse bastante, de manera que lo quepodríais hacer, llegados a este punto, es elegir los cuatro tonos, tonalidades o maticesde los colores de la columna de la derecha. Podéis elegir vuestras opciones pinchandoen las flechas del extremo derecho. Por ejemplo, la figura 15 muestra un ejemplo debloque rellenado con los tonos de esta combinación de colores:
Figura 15. Tonos tetrádicas.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 11/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
11
2. Resumen Consejos de Usabilidad, “No me hagan pensar”.
1-HCERLO TODO MÁS SIMPLE.
El poder de un buen diseño esta en su simplicidad.
Defina la esencia.
2-HAGALO TODO MAS SIMPLE: PARTE 2!
Cuando su diseño final parece ser demasiado simple para la cantidad de tiempo que le dedicó,
su trabajo ya está listo.
2-SALGA DE SU MUNDO INTERIOR: COMUNIQUESE
Aprenda a comunicarse y colaborar con todos los miembros de las profesiones web claves:
programación, marketing, comerciales.
3-MENOS GLAMOUR Y MAS ORDEN
No se vea seducido por la forma en detrimento del contenido.
Un diseño web comprometido con el contenido contribuye en mayor medida que uno que hace
prevalecer las formas.
4-DISEÑE PARA CONEXIONES VIA MODEM!
La consideración estética más importante a tener en cuenta es LA VELOCIDAD DE TRANSMISION. Si
su trabajo tarda demasiado en bajar, deje todo de lado y vuelva al papel y al lápiz
5-TEXTOS. ¿ABURRIDOS?
Cuando le toque diagramar textos, PRIMERO LEALOS.
Piense en cómo alguien, con menos interés que el suyo, podría echarles un vistazo.
Otra cosa que es de gran ayuda es el ancho de los textos.
A menudo se ven por ahí webs con sus textos corriendo de punta a punta de la página.
¿Cómo se puede leer eso?
Mejor trate de que sus textos se mantengan en un ancho de 400 pixeles, o, al menos, un tercio de su
pantalla.
6-MAS COLOR Y GRAFICOS, MENOS IMAGENES Y
EFECTOS
El arte lineal, las formas vectoriales y el color plano se lleva de maravillas con la web. Para ser más
claros, si sus diseños usan mas Freehand que Photoshop, es seguro de que su página cargara mucho más
rápido.
7-GRAFICOS Y TEXTOS: NO!
Nunca, jamás, inserte texto en un grafico. El texto es texto.
Los gráficos son gráficos. No los confunda.
8-ATRAIGA
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 12/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
12
Con las fluctuaciones en las conexiones a la web, su carácter de "lenta" y demás afectaciones, usted
tiene 3 SEGUNDOS para convencer a un usuario de no usar el botón ATRAS del
navegador. TRES SEGUNDOS. Entonces, ponga todos sus esfuerzos para que aquello que desea mostrar
en una página web aparezca inmediatamente, y de forma interesante.
9-ATRAIGA-SIMPLIFIQUE-VAYA A LO QUE IMPORTA
Tiene 30 segundos para cargar TODA una página en el navegador del usuario. Quizás menos, 15 segs.
SEA RAPIDO
10-ENFOQUESE EN LO QUE INTERESA
A los usuarios no les interesa en absoluto como funciona y se navega dentro de su sitio web, solo
llegaron allí por el contenido.
DESELOS en forma rápida y simple.
11-INFORMESE-APRENDA
Manténgase al tanto de las nuevas tecnologías. La web jamás se queda quieta, así que dedique su
tiempo libre a aquello que es nuevo. Ya ha pasado el tiempo en que el pez más grande se comía al más
pequeño, ahora es el mas RAPIDO el que se come al MAS LENTO.
12-DEFINA SU PROBLEMA
El diseño trata sobre la resolución de problemas, sobre enfrentar una cuestión de comunicación con un
objetivo. Defina cual es el suyo y ya tendrá la mitad del problema resuelto.
13-APRENDASE LOS PRINCIPIOS DE NAVEGACION
a-La gente odia esperar
b-La gente odia hacer scroll
c-La gente odia leer
d-La gente prefiere hacer scroll antes que esperar
e-La gente prefiere esperar a leer.
f-La gente no es necesariamente racional o coherente, pero a veces si.
14-BUSQUE INSPIRACION
Hable con gente que está fuera de su campo de acción. Los arquitectos, por ejemplo, pueden darle unaperspectiva completamente nueva del diseño web, quizá pueden cambiar su forma de imaginar cómo se
conceptualiza un sitio, transformando las páginas web en "espacios web"
15-ESCUCHE MUSICA
Si, cuando la música acompaña a su trabajo este se hace más placentero y llevadero. Incluso llega a
generar más inspiración.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 13/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
13
3. Colores dependiendo de las partes de una página.
(Parte Práctica).
Los colores dominantes en ella deben permitir una lectura de contenidos clara yamena, así como una perfecta visualización de sus elementos gráficos. Para ello,
deberemos usar un color para el texto que contraste adecuadamente sobre el del fondo
de la página.
Buenos contrastes se obtienen: - Con fondos claros y textos oscuros, o al revés.
Con fondos fríos y textos cálidos, o al revés, siempre que no sean análogos.
Los enlaces que figuren en esta sección deben ser claramente diferenciados por el usuario,
sobre todo si la página va dirigida a un público muy general. Si no usamos los colores de enlace
estándares (azules vivos con texto subrayado), sí que deberemos usar un color que destaque
claramente del texto informativo y del fondo.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 14/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
14
El dintel se localiza por costumbre en la parte superior de la página, y en él suele (y casi
debe) figurar el logotipo de nuestra página, asociación o empresa. Es importante la presencia
de un logotipo, ya que crea un signo de continuidad y de identidad en nuestras páginas,
mostrando a los visitantes rápidamente dónde se encuentran. El color de este debe ser tal que
destaque claramente sobre el fondo.
El menú de navegación es tal vez el elemento más interactivo de
una página, facilitando al visitante una rápida navegación por todo
el contenido del sitio web. Sus enlaces deben aunar el ser
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 15/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
15
fácilmente visibles con el no ser demasiado impactantes, ya que no deben quitarle
importancia ni al cabecero ni al texto del cuerpo.
Una buena solución es el uso de textos o imágenes que inicialmente no destacan demasiado
sobre el fondo, pero que al situar el cursor sobre ellas se iluminan o cambian de color,
produciéndose un efecto positivo con ello.
Por último, el pie de página es el elemento menos importante de la página, de tal forma que
muchos autores ni siquiera lo consideran. Caso de usarse, no conviene que su color cambie
respecto al del fondo del cuerpo, y si lo hace debe ser muy ligeramente, ya que si no podemos
distraer la atención del usuario y crear un cuerpo de página encajonado.
En el pie de página se suelen colocar enlaces de tipo terciario, enlaces de correo oaccesos a servicios secundarios que proporcione nuestro sitio web.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 16/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
16
4. Significado de los colores aplicado al diseño web.
Blanco:
El blanco se asocia a la luz, la bondad, la inocencia, la pureza y la virginidad. Se
le considera el color de la perfección.
El blanco significa seguridad, pureza y limpieza. A diferencia del negro, el
blanco por lo general tiene una connotación positiva. Puede representar un inicio
afortunado.
En heráldica, el blanco representa fe y pureza.
En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el
color de nieve. En la promoción de productos de alta tecnología, el blanco puedeutilizarse para comunicar simplicidad.
Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a
los ángeles se les suele representar como imagenes vestidas con ropas blancas.
El blanco se le asocia con hospitales, médicos y esterilidad. Puede usarse por
tanto para sugerir para anunciar productos médicos o que estén directamente
relacionados con la salud.
Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a
los ángeles se les suele representar como imagenes vestidas con ropas blancas.
A menudo se asocia a con la pérdida de peso, productos bajos en calorías y los
productos lácteos.
Amarillo:
El amarillo simboliza la luz del sol. Representa la alegría, la felicidad, la
inteligencia y la energía.
El amarillo sugiere el efecto de entrar en calor, provoca alegría, estimula
la actividad mental y genera energía muscular. Con frecuencia se le
asocia a la comida.
El amarillo puro y brillante es un reclamo de atención, por lo que es
frecuente que los taxis sean de este color en algunas ciudades. En exceso,puede tener un efecto perturbador, inquietante. Es conocido que los
bebés lloran más en habitaciones amarillas.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 17/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
17
En exceso, puede tener un efecto perturbador, inquietante. Es conocido
que los bebés lloran más en habitaciones amarillas.
Cuando se sitúan varios colores en contraposición al negro, el amarillo es
en el que primero se fija la atención. Por eso, la combinación amarillo y
negro es usada para resaltar avisos o reclamos de atención. En heráldica el amarillo representa honor y lealtad.
En los últimos tiempos al amarillo también se le asocia con la cobardía.
Es recomendable utilizar amarillo para provocar sensaciones agradables,
alegres. Es muy adeecuado para promocionar productos para los niños y
para el ocio.
Por su eficacia para atraer la atención, es muy útili para destacar los
aspectos más importantes de una página web.
Los hombres normalmente encuentran el amarillo como muydesenfadado, por lo que no es muy recomendable para promocionar
productos caros, prestigiosos o específicos para hombres. Ningún
hombre de negocios compraría un reloj caro con correa amarilla.
El amarillo es un color espontáneo, variable, por lo que no es adecuado
para sugerir seguridad o estabilidad.
Naranja:
El naranja combina la energía del rojo con la felicidad del amarillo. Se le
asocia a la alrgría, el sol brillante y el trópico.
Representa el entusiasmo, la felicidad, la atracción, la creatividad, ladeterminación, el éxito, el ánimo y el estímulo.
Es un color muy caliente, por lo que produce sensación de calor. Sin
embargo, el naranja no es un color agresivo como el rojo.
La visión del color naranja produce la sensación de mayor aporte de
oxígeno al cerebro, produciendo un efecto vigorizante y de estimulación
de la actividad mental.
Es un color que encaja muy bien con la gente joven, por lo que es muy
recomendable para comunicar con ellos.
Color cítrico, se asocia a la alimentación sana y al estímulo del apetito.
Es muy ádecuado para promocionar productos alimenticios y juguetes
Es el color de la caída de la hoja y de la cosecha. En heráldica el naranja representa la fortaleza y la resistencia.
El color naranja tiene una visibilidad muy alta, por lo que es muy útil
para captar atención y subrayar los aspectos más destacables de una
página web.
El naranja combina la energía del rojo con la felicidad del amarillo. Se le
asocia a la alrgría, el sol brillante y el trópico.
o El naranja oscuro puede sugerir engaño y desconfianza.
o El naranja rojizo evoca deseo, pasión sexual , placer, dominio,
deseo de acción y agresividad
o El dorado produce sensación de prestigio. El dorado significa
sabiduría, claridad de ideas, y riqueza. Con frecuencia el dorado
representa alta calidad.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 18/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
18
Rojo:
El color rojo es el del fuego y el de la sangre, por lo que se le asocia al
peligro, la guerra, la energía, la fortaleza, la determinación, así como a la
pasión, al deseo y al amor.
Es un color muy intenso a nivel emocional. Mejora el metabolismo
humano, aumenta el ritmo respiratorio y eleva la presión sanguínea.
Tiene una visibilidad muy alta, por lo que se suele utilizar en avisos
importantes, prohibiciones y llamadas de precaución.
Trae el texto o las imagenes con este color a primer plano resaltándolas
sobre el resto de colores. Es muy recomendable para connminar a laspersonas a tomar decisiones rápidas durante su estancia en un sitio web.
En publicidad se utiliza el rojo para provocar sentimientos eróticos.
Símbolos como labios o uñas rojos, zapatos, vestidos, etc., son
arquetipos en la comunicación visual sugerente.
El rojo es el color para indicar peligro por antonomasia.
Como está muy relacionado con la energía, es muy adecuado para
anunciar coches motos, bebidas energéticas, juegos, deportes y
actividades de riesgo.
En heráldica el rojo simboliza valor y coraje. Es un color muy utilizado
en las banderas de muchos países
El color naranja tiene una visibilidad muy alta, por lo que es muy útilpara captar atención y subrayar los aspectos más destacables de una
página web.
El naranja combina la energía del rojo con la felicidad del amarillo. Se le
asocia a la alrgría, el sol brillante y el trópico.
o El rojo claro simboliza alegría, sensualidad, pasión, amor y
sensibilidad.
o El rosa evoca romance, amor y amistad. Representa cualidades
femeninas y pasividad.
o El rojo oscuro evoca energía, vigor, furia, fuerza de voluntad,
cólera, ira, malicia, valor, capacidad de liderazgo. En otro
sentido, también representa añoranza.o El marrón evoca estabilidad y representa cualidades masculinas.
o El marrón rojizo se asocia a la caída de la hoja y a la cosecha.
Púrpura:
El púrpura aporta la estabilidad del azul y la energía del rojo.
Se asocia a la realeza y simboliza poder, nobleza, lujo y ambición.
Sugiere riqueza y extravagancia.
El color púrpura también está asociado con la sabiduría, la creatividad, la
independencia, la dignidad.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 19/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
19
Hay encuestas que indican que es el color preferido del 75% de los niños
antes de la adolescencia. El púrpura representa la magia y el misterio.
Debido a que es un color muy poco frecuente en la naturaleza, hay quien
opina que es un color artificial.
El púrpura brillante es un color ideal para diseños drigidos a la mujer.
También es muy adecuado para promocionar artículos dirigidos a los
niños.
o El púrpura claro produce sentimientos nostálgicos y románticos.
o El púrpura oscuro evoca melancolía y tristeza. Puede producir
sensación de frustración.
o
Azul:
El azul es el color del cielo y del mar, por lo que se suele asociar con la
estabilidad y la profundidad.
Representa la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la
verdad y el cielo eterno.
Se le considera un color beneficioso tanto para el cuerpo como para la
mente. Retarda el metabolismo y produce un efecto relajante. Es un color
fuertemente ligado a la tranquilidad y la calma.
En heráldica el azul simboliza la sinceridad y la piedad.
Es muy adecuado para presentar productos relacionados con la limpieza
(personal, hogar o industrial), y todo aquello relacionado directamentecon:
o El cielo (líneas aéreas, aeropuertos)
o El aire (acondicionadores paracaidismo)
o El mar (cruceros, vacaciones y deportes marítimos)
o El agua (agua mineral, parques acuáticos, balnearios)
Es adecuado para promocionar productos de alta tecnología o de alta
precisión.
Al contrario de los colores emocionalmente calientes como rojo, naranja
y amarillo, el azul es un color frío ligado a la inteligencia y la
consciencia.
El azul es un color típicamente masculino, muy bien aceptado por loshombres, por lo que en general será un buen color para asociar a
productos para estos.
Sin embargo se debe evitar para productos alimenticios y relacionados
con la cocina en general, porque es un supresor del apetito.
Cuando se usa junto a colores cálidos (amarillo, naranja), la mezcla suele
ser llamativa. Puede ser recomendable para producir impacto, alteración.
o El azul claro se asocia a la salud, la curación, el entendimiento, la
suavidad y la tranquilidad.
o El azul oscuro representa el conocimeinto, l integridad, la
seriedad y el poder.
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 20/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
20
Verde:
El verde es el color de la naturaleza por excelencia. Representa armonía,
crecimiento, exuberancia, fertilidad y frescura.
Tiene una fuerte relación a nivel emocional con la seguridad. Por eso en
contraposición al rojo (connotación de peligro), se utiliza en el sentido de
"vía libre" en señalización.
El verde oscuro tiene también una correspondencia social con el dinero.
El color verde tiene un gran poder de curación. Es el color más relajante
para el ojo humano y puede ayudar a mejorar la vista.
El verde sugiere estabilidad y resistencia.
En ocasiones se asiocia también a la falta de experiencia: "está muy
verde" para describir a un novato, se utiliza en varios idiomas, no sólo en
español.
En heráldica el verde representa el crecimiento y la esperanza.
Es recomendable utilizar el verde asociado a productos médicos o
medicinas.
Por su asociación a la naturaleza es ideal para promocionar productos de
jardinería, turismo rural, actividades al aire libre o productos ecológicos.
El verde apagado y oscuro, por su asociación al dinero, es ideal para
promocionar productos financieros, banca y economía.:
o El verde "Agua" se asocia con la protección y la curaciónemocional.
o El verde amarillento se asocia con la enfermedad, la discordia, la
cobardía y la envidia.
o El verde oscuro se relaciona con la ambición, la codicia, la
avaricia y la envidia.
o El verde oliva es el color de la paz.
Negro:
El negro representa el poder, la elegancia, la formalidad, la muerte y el
misterio.
Es el color más enigmático y se asocia al miedo y a lo desconocido ("el
futuro se presenta muy negro", "agujeros negros"...).
El negro representa también autoridad, fortaleza, intransigencia. También
se asocia al prestigio y la seriedad.
En heráldica el negro representa el dolor y la pena.
En una página web puede dar imágen de elegancia, y aumenta la
sensación de profundidad y perspectiva. Sin embargo, no es
recomendable utilizarlo como fondo ya que disminuye la legibilidad.
Es conocido el efecto de hacer más delgado a las personas cuando visten
ropa negra. Por la misma razón puede ayudar a disminuir el efecto de
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 21/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
21
abigarramiento de areas de contenido, utilizado debidamente como
fondo.
Es típico su uso en museos, galerías o colecciones de fotos on-line,
debido a que hace resaltar mucho el resto de colores. Contrasta muy bien
con colores brillantes. Combinado con colores vivos y poderosos como el naranja o el rojo,
produce un efecto agresivo y vigoroso.
5.1 Tabla de propiedades de los colores:
5.2 Tabla de sensaciones:
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 22/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
22
5/11/2018 Teoría del Color Aplicada al Diseño Web - slidepdf.com
http://slidepdf.com/reader/full/teoria-del-color-aplicada-al-diseno-web 23/23
Teoría del Color Aplicada al Diseño Web
Universidad Técnica del Norte
Aplicaciones Informáticas 1
23
Bibliografía:
http://www.desarrolloweb.com/articulos/1572.php
www.intercambiosvirtuales.org/.../no-me-hagas-pensar-steve-krug-2d www.es.wikipedia.org/wiki/Colores_HTML