teoría del color aplicada al diseño web

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

Upload: leniny2011

Post on 11-Jul-2015

254 views

Category:

Documents


0 download

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. 

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