En el diseño, el color es muy subjetivo. Lo que produce una reacción en una persona puede provocar una muy distinta en otra. A veces esto se debe a las preferencias personales, otras debido a factores culturales. La teoría del color es una ciencia en sí misma. Estudiar cómo afectan los colores a las personas, de manera individual o en grupo, es algo a lo que muchas personas dedican una vida de estudios. Y hay mucho por estudiar. A veces cambiando el matiz o la saturación de un color podemos causar una sensación completamente distinta. Las diferencias culturales significan que un color considerado feliz en un país, puede ser considerado deprimente en otro.

 

teoria-del-color-estrella

Este es el primero de dos artículos sobre la teoría del color. Aquí veremos los significados detrás de las familias de colores y daremos algunos ejemplos sobre cómo esos colores son usados (con un poco de análisis de cada un). En la siguiente entrega hablaremos de cómo el matiz, tono, saturacion y sombras afectan la forma en la que percibimos los colores.

Colores Cálidos

teoria-del-color-calidos

 

Los colores cálidos incluyen al rojo, naranja, amarillo y las variaciones de estos tres colores. Son los colores del fuego, de las hojas caidas, de los amaneceres y atardeceres, por lo general son energizantes, apasionados y positivos.

El rojo y amarillo son colores primarios, con naranja entre estos dos, significa que los colores cálidos son realmente cálidos y no se obtienen combinando un color cálido con un color frio. Usa colores cálidos en tus diseños para reflejar pasión, felicidad, entusiasmo y energía.

ROJO (COLOR PRIMARIO)

teoria-del-color-rojo

 

El rojo es un color muy caliente, se le asocia con el fuego, violencia y la guerra. También se le relaciona con el amor y la pasión. En la historia ha sido asociado con el diablo tanto como con cupido. El color rojo también esta asociado con cambios físicos reales en las personas, aumentando la presión arterial y el ritmo de la respiración. Se cree que también mejora el metabolismo humano.

Se le puede relacionar con la furia, pero también con la importancia (piensa en la alfombra roja de un evento). El rojo también indica peligro (por eso las señales de pare y los semáforos lo usan, y muchos carteles de advertencia también) .

Fuera del mundo occidental, el color rojo tiene asociaciones distintas. Por ejemplo, en China, el rojo es el color de la prosperidad y felicidad. Puede usarse también para atraer la buena suerte. El rojo es también el color del comunismo.  En otras culturas orientales, el rojo es utilizado por las novias en matrimonios. En Sudáfrca, sin embargo, el rojo es el color del luto. En el África, el color rojo ha sido asociado con la prevención del SIDA debido a la popularidad de la campaña [RED].

En diseño, el rojo es un poderoso color de acento. Puede tener un efecto abrumador si se utiliza demasiado en diseños, en especial en su forma más pura. Es un gran color cuando la pasión o el poder quieren ser expresados en el diseño. El rojo es muy versátil, los tonos claros son más energéticos, mientra que los oscuros son más poderosos y elegantes.

Ejemplos

teoria-del-color-1

Los tonos rojos oscuros en este diseño le dan una sensación poderosa y elegante al sitio.

teoria-del-color-2

Los acentos rojos contra el fondo negro le dan una sensación potente y de gama alta al sitio.

teoria-del-color-3

Los acentos en rojo brillante le dan al diseño del sitio energía y movimiento.

teoria-del-color-4

El rojo oscuro en este sitio, combinado con elementos grunge,se asemeja al color de la sangre.

teoria-del-color-5

Rojo oscuro, combinado con blanco y gris, da una impresión muy elegante y profesional.

NARANJA (COLOR SECUNDARIO)

teoria-del-color-naranja

El naranja es un color vibrante y energético. En sus formas apagadas, puede asociarse con la tierra y el otoño. Debido a su asociación con el cambio de las estaciones, el naranja puede representar cambio y movimiento en general.

También se le puede relacionar con salud y vitalidad, gracias a la fruta que lleva su nombre. En diseños, el naranja llama la atención sin ser tan abrumador como el rojo. Es también considerado más amigable y atractivo.

Ejemplos

teoria-del-color-6

El recuadro naranja brillante jala la atención a sus contenidos, incluso con otros elementos rojo brillante alrededor.

teoria-del-color-7

El naranja es usado aquí en su aplicación más obvia, para representar fuego.

teoria-del-color-8

El naranja oscuro, contra el verde limón, actúa como color neutral relacionado a la tierra.

teoria-del-color-9

El naranja es utilizado aquí para dar una impresión amigable y atractiva.

teoria-del-color-10

Los acentos naranjas agregan mucho interés visual y llaman a la acción.

AMARILLO (COLOR PRIMARIO)

teoria-del-color-amarillo

Se suele considerar al amarillo como el color cálido más brillante y energético. Se le asocia con la felicidad y el sol. Sin embargo también se le puede relacionar con el engaño y cobardía (en algunos lugares, decirle amarillo a alguien significa llamarle cobarde).

El amarillo se asocia también con la esperanza, esto se ve en algunos países donde las personas usan cintas amarillas cuando tienen seres queridos en la guerra. El amarillo también se relaciona con el peligro moderado, no tanto como el rojo.

En otros países, el amarillo tiene connotaciones completamente distintas. En Egipto, por ejemplo, el amarillo es el color de luto. En Japón representa coraje y en la India es el color de los comerciantes.

En diseño gráfico, el amarillo brillante puede crear una sensación de felicidad y entusiasmo. Amarillos más suaves son usados como un color sin género para bebés (en vez de rosado o celeste) y niños pequeños. Amarillos claros dan una sensación de felicidad más tranquila que la de los brillantes. Amarillos oscuros y dorados pueden lucir antiguos y pueden ser usados en diseños web donde se busca la permanencia.

Ejemplos

teoria-del-color-11

La cabecera amarilla y los gráficos en el resto del sitio le dan una sensación de energía y positividad.

teoria-del-color-12

El amarillo claro es usado como color neutral en esta cabecera, combinado con las ilustraciones a mano, le dan al sitio una impresión bastante entusiasta.

teoria-del-color-13

Los acentos amarillo brillante dirigen la atención a la parte más importante de este sitio.

teoria-del-color-14

El girasol amarillo recuerda a los visitanttes del verano, combinado con un fondo amarillo-antiguo, da una sensación hogareña.

teoria-del-color-15

El amarillo brillante aquí le agrega un poco de energía al diseño.

Colores Fríos

teoria-del-color-frios

Los colores fríos incluyen al verde, azul y morado, son a menudo más tenues que los colores cálidos. Son los colores de la noche, el agua, la naturaleza y suelen ser relajantes, apacibles y algo reservados.

El azul es el único color primario en el espectro frío, eso significa que los otros colores se obtienen de la mezcla de azul con un color cálido (amarillo para el verde, rojo para el morado). Los verdes toman algunos atributos del amarillo y el morado toma algunos del rojo. Usa colores fríos en tus diseños para dar una sensación de calma o profesionalismo.

VERDE (COLOR SECUNDARIO)

teoria-del-color-verde

El verde es un color muy terrestre. Puede representar nuevos comienzos y desarrollo, también simboliza renovación y abundancia. Por otro lado, el color verde puede representar envidia o celos, además de falta de experiencia.

El color verde tiene muchos de los atributos calmantes que tiene el azul pero además incorpora algo de la energía del amarillo. En el diseño web, el verde tiene un efecto armonizador o de balance, es muy estable. Es apropiado para diseños relacionados con fortuna, estabilidad, renovación y naturaleza. Verdes brillantes son más energéticos, mientras que los verdes olivo son mas representativos del mundo natural. Verdes oscuros son los más estables y representan afluencia.

Ejemplos

teoria-del-color-16

Los verdes apagados de este sitio le dan una sensación bastante natural.

teoria-del-color-17

La cabecera verde brillante de este sitio mezclada con la hoja le da un sensación natural y vibrante.

teoria-del-color-18

El tono olivo del verde de este sitio le da una sensación a naturaleza bastante apropiada para el contenido del sitio.

teoria-del-color-19

Los verdes brillantes de aspecto retro en este sitio le dan un aspecto fresco y energizante.

teoria-del-color-20

Otro sitio verde olivo con una sensación muy natural

AZUL (COLOR PRIMARIO)

teoria-del-color-azul

El azul es un color asociado con la tristeza por los países de habla inglesa. Se le usa extensivamente para representar calma y responsabilidad. Azules claros pueden ser refrescantes y amistosos, los oscuros son más fuertes y seguros. El azul también es asociado con la paz y tiene connotaciones religiosas en muchas culturas y tradiciones (por ejemplo, la Virgen María es representada usando ropa azul).

El significado del azul es afectado directamente del tono y matiz. En el diseño gráfico, el tono azul de exacto que uses tendrá un gran impacto en cómo tus diseños son percibidos. Azules claros son relajados, los brillantes refrescantes. Los más oscuros son excelentes para sitios corporativos o diseños donde la fuerza y confianza son importantes.

Ejemplos

teoria-del-color-21

El azul oscuro da una sensación de confianza, mientras los toques de azul claro y brillante rompen con la monotonía.

teoria-del-color-22

El azul oscuro le da a este sitio un aspecto profesional, en especial combinado con el fondo blaco, pero las palabras en azul claro lo hacen interesante.

teoria-del-color-23

El celeste brillante de este sitio le da un toque joven y moderno, que es enfatizado con los acentos rojizos.

teoria-del-color-24

Este sitio combina una gran gama de azules, que nos deja con una sensación generalizada de frescura.

teoria-del-color-25

El azul claro y apagado de este sitio da una impresión de calma y relajo.

MORADO (COLOR SECUNDARIO)

teoria-del-color-morado

El morado ha sido largamente asociado a la realeza. Es una combinación de rojo y azul, toma atributos de ambos. Esa asociado con la creatividad e imaginación también.

En Tailandia, es el el color de luto de las viudas. Morados oscuros son asociados tradicionalmente con fortuna y nobleza, mientras que los más ligeros (como lavanda) son considerados románticos.

En el diseño, morados oscuros dan una sensación de lujo, los claros son más suaves y se les relaciona con primavera y romance.

teoria-del-color-26

El tono usado aquí evoca la herencia real del morado, que es apropiada para la marca de lujo Asprey.

teoria-del-color-27

Los morados medios y ligeros aquí funcionan bien para brindar una sensación de creatividad.

teoria-del-color-28

Los morados rojizos de este sitio le dan una apariencia rica y energética.

teoria-del-color-29

El fondo morado del sitio le brinda un aura de creatividad a todo el sitio.

teoria-del-color-30

Los acentos morado oscuro en este sitio refuerzan la idea de lujo y refinamiento.

Colores Neutros

teoria-del-color-neutros

Los colores neutros suelen servir de fondos en diseño web. Son combinados frecuentemente con colores mas claros de acento, pero pueden ser usados solos y crear diseños muy sofisticados. Los significados e impresiones de los colores neutros están más determinados por los colores que los rodean que en el caso de los colores cálidos y fríos.

NEGRO

teoria-del-color-negro

Es el más fuerte de los colores neutros. Es comúnmente asociado al poder, elegancia y formalidad. Sin embargo también se le relaciona a la maldad, muerte y misterio. Es el color de luto tradicional en occidente. Algunas culturas lo asocian a la rebeldía y a lo oculto.

El negro es usado frecuentemente en diseños vanguardistas, a la par que en diseños muy elegantes. Puede ser conservador o moderno, tradicional o no convencional, dependiendo de con qué colores se le combina. En el diseño web el negro suele ser usado para las tipografías y otras partes funcionales debido a su neutralidad. El negro puede lograr fácilmente una sensación de sofisticación y misterio en un diseño.

Ejemplos

teoria-del-color-31

Los detalles en negro, mezclado con los colores más brillantes y un fondo de color marrón muy oscuro añaden un aspecto más afilado al diseño general.

teoria-del-color-32

El negro mezclado con azules glaciares se ve más frío.

teoria-del-color-33

El negro aquí, mezclad con grises oscuros y verde limón, y un tema grunge en general, suma a lo afilado del diseño.

teoria-del-color-34

Los acentos negros aquí agregan una capa extra de sofisticación y modernidad.

teoria-del-color-35

Los fuertes acentos negros en este sitio refuerzan la sofisticación.

BLANCO

teoria-del-color-blanc

El blanco es el opuesto del negro en el espectro y, como su opuesto, puede funcionar bien con cualquier otro color. Se le asocia con la pureza, limpieza y virtud, en occidente el blanco es el color preferido de las novias en sus bodas. También se le asocia con la industria médica, especialmente con doctores, enfermeras y dentistas. El blanco también se relaciona con la bondad y los ángeles suelen ser representados de blanco.

En el diseño, el blanco es considerado un fondo neutral que permite a los otros colores tener mayor participación. Puede ayudar al diseño a mantener limpieza y simplicidad, por eso es popular en diseños minimalistas. Puede ser usado tanto para retratar invierno o verano, dependiendo de los otros colores que le rodeen.

Ejemplos

teoria-del-color-36

El blanco en la web de Fuelhaus es usado para contrastar con el azul eléctrico.

teoria-del-color-37

Fondos blancos son muy populares en sitios minimalistas, proveen gran contraste con tipografías negras.

teoria-del-color-38

Aquí el blanco es usado como color de acento, que aligera el efecto general del sitio.

teoria-del-color-39

Blanco combinado con gris da una sensación limpia y suave a su diseño.

teoria-del-color-40

Otra vez, usar blanco de fondo suaviza el diseño.

Gris

teoria-del-color-gris

El gris es un color neutro, generalmente considerado en el extremo frío del espectro de color. A veces puede ser considerado deprimente y malhumorado. Grises ligeros se pueden utilizar en lugar de blanco en algunos diseños, y grises oscuros pueden ser utilizados en lugar de negro.

El color gris es generalmente conservador y formal, pero también puede ser moderno. A veces se le considera un color de luto. Se utiliza comúnmente en diseños corporativos, donde la formalidad y profesionalidad son clave. Puede ser un color muy sofisticado. Grises puros son tonos de negro, aunque otros grises pueden tener tonalidades azules o marrones. En diseño, los fondos grises son muy comunes, como la tipografía gris.

Ejemplos

teoria-del-color-41

Gris claro le da un aspecto rebajado y tranquilo a este diseño

teoria-del-color-42

El fondo gris claro en este sitio refuerza el aspecto moderno creado por la tipografía.

teoria-del-color-43

El gris más frío en este sitio le da un toque moderno y sofisticado.

teoria-del-color-44

El fondo gris oscuro y la tipografía clara dan un aspecto decididamente moderno a este diseño.

teoria-del-color-45

El amplio espectro de tonos de gris utilizados en este diseño se combinan para dar un aspecto sofisticado y profesional para el sitio.

MARRÓN

teoria-del-color-marron

El marrón se asocia con la tierra, la madera y la piedra. Es un color totalmente natural y cálido neutral. El marrón se puede asociar a la fiabilidad, firmeza, y con terrenalidad. También se le puede considerar opaco.

También se ve en las texturas de madera y algunas veces en las texturas de piedra. Ayuda a traer una sensación de calidez y la entereza a los diseños. Se utiliza a veces en sus formas más oscuras como un reemplazo para el negro, ya sea en fondos o tipografía.

Ejemplos

teoria-del-color-46

El marrón grisáceo brinda una sensación de responsabilidad y confianza.

teoria-del-color-47

El marrón-anaranjado le da un toque terrestre al sitio.

teoria-del-color-48

El marrón oscuro usado en el fondo de esta página le da un aspecto firme, y los colores brillantes permiten que el diseño general resalte.

teoria-del-color-49

La textura de madera es un uso muy popular del color marrón y, en este caso, el marrón claro vuelve amigable un sitio que de otra manera sería minimalista.

teoria-del-color-50

El fondo marrón/gris le da una sensación de estabilidad y naturaleza.

BEIGE

teoria-del-color-beige

El beige es único en el espectro de color, ya que puede tomar tonos fríos o calientes dependiendo de los colores que lo rodean. Tiene la calidez de color marrón y la frescura del blanco, y, como el marrón, es a veces visto como aburrido. Es un color conservador en la mayoría de los casos, y se reserva normalmente para los fondos. También puede simbolizar la piedad.

Beige en diseño web se utiliza generalmente en los fondos, y se le ve comúnmente en fondos con textura de papel. Tomará las características de los colores a su alrededor, lo que significa que tiene poco efecto en sí mismo en la impresión final de un diseño da cuando se utiliza con otros colores.

Ejemplos

teoria-del-color-51

El beige claro aquí se siente joven debido a los colores brillantes alrededor.

teoria-del-color-52

El fondo beige claro aquí le agrega un toque conservador y elegante.

teoria-del-color-53

El beige amarillento aquí se vuelve aun más cálido debido a los tonos naranjas y marrones alrededor.

teoria-del-color-54

Es común el uso del beige en texturas de bolsas de papel, y en un tono grisáceo toma la textura de una piedra.

teoria-del-color-55

La cabecera beige y los demás acentos le dan a este sitio un toque refinado y tradicional.

CREMA Y MARFIL

teoria-del-color-marfil

Marfil y crema son colores sofisticados, con algo de la calidez del marrón y una mucha frescura del blanco. Son generalmente tranquilos, y con frecuencia pueden evocar un sentido histórico. Marfil es un color tranquilo, con algo pureza asociada con el blanco, aunque un poco más caliente.

En el diseño, marfil puede echar una sensación de elegancia y tranquilidad a un sitio. Cuando se combina con colores tierra como el melocotón o marrón, puede tomar una cualidad terrosa. También se puede utilizar para aligerar los colores más oscuros, sin el marcado contraste de utilizar blanco.

Ejemplos

teoria-del-color-56

El fondo marfil tiene un toque cálido que es balanceado por los colores fríos en el resto de la página.

teoria-del-color-57

El fondo crema/gris de este sitio se vuelve más cálido por los acentos naranjas y marrones.

teoria-del-color-58

El fondo crema agrega una sensación de elegancia discreta.

teoria-del-color-59

El fondo crema aquí refuerza el tema antiguo que predomina en el diseño de esta web.

teoria-del-color-60

El marfil combinado con otros colores claros y tonos de joyas que hacen que este sitio tenga una apariencia muy elegante.

En resumen…

Si bien la información contenida aquí puede parecer un poco abrumadora, la teoría del color se trata de la sensación de un tono particular, evoca que más cualquier otra cosa. Pero aquí una guía de referencia rápida para los significados comunes de los colores mencionados anteriormente:

Rojo: pasión, amor, Ira

Naranja: energía, felicidad, vitalidad

Amarillo: felicidad, esperanza, engaño

Verde: Nuevos comienzos, abundancia, naturaleza

Azul: calma, responsabilidad, tristeza

Púrpura: Creatividad, Realeza, Riqueza

Negro: Misterio, Elegancia, maldad

Gray: Mal humor, conservadurismo, Formalidad

Blanco: Pureza, Limpieza, Virtud

Marrón: Naturaleza, saludable, Fiabilidad

Beige: Conservador, Piedad, opacidad

Crema o marfil: calma, elegancia, Pureza

Este artículo ha sido traducido y adaptado de SmashingMagazine.com. Si encuentras algún artículo interesante sobre Diseño Web, Diseño Gráfico, Imagen Corporativa, Diseño de Logos, Programación o Publicidad y Marketing que te gustaría que traduzcamos, no dudes en contactarnos a través de los comentarios.

The following two tabs change content below.
fiorisantamaria1@gmail.com'
Fiori es CEO de Staff Creativa, Agencia de Diseño Web y Marketing Online
fiorisantamaria1@gmail.com'

Latest posts by Fiori Santa Maria (see all)

11 Comments

Deja una respuesta