Advertisement
  1. Web Design
  2. UX/UI
  3. Design Theory

Entendiendo las cualidades y características del color

Scroll to top
Read Time: 17 min
This post is part of a series called Design School for Developers.
Defining and Recognizing Colors
Selecting Your Own Color Scheme

() translation by (you can also view the original English article)

Continuando con nuestro artículo anterior sobre definir y reconocer los colores, ahora exploremos las cualidades y características de los colores. 


Rojo

Una parte de la familia de los colores más cálidos, el color primario rojo es un color fuerte y emocionalmente intenso.

colour-redcolour-redcolour-red

Naturalmente, mejora el ritmo metabólico en las personas, también se ha demostrado que incremente el ritmo cardiaco y la presión en la sangre cuando las personas son expuestas a éste color.  Es utilizado, bastante, en los sistemas de tráfico (piense en la señales de camino y las luces en los semáforos) debido a que el color rojo es un color de alta visibilidad por lo cual tiene un montón de impacto.

Algunas asociaciones de color rojo incluyen:

  • energía
  • positividad
  • acción
  • guerra
  • peligro
  • fuerza
  • coraje y
  • todas las cosas intensas y apasionadas
  • amor, sexo, pasión, deseo

Lo que es realmente interesante acerca del color rojo es cómo tiene dos direcciones de asociaciones opuestas, es decir; por un lado el amor, y por otro la guerra.  Debido a que el color rojo es bien conocido como un color de gran impacto que a menudo representa peligro, también se asocia con muchas imágenes memorables de la guerra.  Sin embargo, el color rojo es mucho más conocido por el amor y las cosas que son del corazón. Con variaciones del color rojo (desde el más intenso, los colores oscuros a las variaciones más claras tales como el rosado) se asocia fuertemente con el día de San Valentín en la cultura occidental.

En otras culturas, el rojo tiene un significado completamente diferente.  En China, por ejemplo, el rojo es asociado con la prosperidad y la felicidad, así como un símbolo de buena suerte.  En India, el rojo representa pureza y a menudo es un color utilizado en las bodas.  Por otra parte, en Sudáfrica el color rojo es el color usado más comúnmente en los funerales.

Cuando se usa el rojo, a menudo se usa sabiamente más como un énfasis de color que un color focal para el sitio web completo.  Mientras que en algunas situaciones funciona bien como el color de enfoque principal, la mayoría de las veces usar demasiado rojo en un diseño causa sentimientos de irritación, agitación e ira.  Por otra parte, cuando se usa muy poco rojo, también puede crear un sentimiento de manipulación y cautela.

Debido a estos dos extremos, puede resultar difícil usar el color rojo para construir el balance correcto. Sin embargo, cuando usamos el color rojo como énfasis, particularmente en características que usted quiere mejorar o hacer particularmente notable, como botones u otros elementos que invitan al usuario a tomar una decisión, el color rojo puede ser bastante efectivo.


Naranja

Otro color que pertenece a la familia de los colores cálidos, es el color naranja, que a menudo es visto como un color brillante, optimista y edificante.

colour-orangecolour-orangecolour-orange

Tanto joven como impulsivo, el naranja a menudo actúa como un estimulante mental y parece ser bastante equilibrado.

Veamos algunas asociaciones del color naranja:

  • entusiasmo
  • felicidad
  • reacciones por instinto
  • espontaneidad
  • aventura, tomar riesgos
  • otoño (invierno) y la cosecha
  • creatividad
  • los cítricos
  • comida sana

El color naranja a menudo se asocia a la tercera temporada en el ciclo anual: otoño (o invierno Debido a los cambios de color en las temporadas, los colores naranja ofrecen una transición calidad desde los colores más brillantes del verano antes de que se pongan los más severos; los colores fríos de invierno.  El color naranja, también es el color principal asociado con Halloween, el cual toma lugar en la parte más alta del otoño, el 31 de Octubre.

Así como las asociaciones con la naturaleza, el color naranja es visto como un color que evoca entusiasmo y espontaneidad en las personas. Un color que estimula el sentido de aventura y de tomar riesgos. De igual forma, el color naranja (debido a sus asociaciones con los cítricos) también actúa como un estimulante de apetito, por lo que puede ser útil en los diseños de sitios web donde la comida o el apetito de los usuarios es lo relevante.

Y pensando en lo que dijimos anteriormente acerca de todas las asociaciones que el color naranja tiene con el otoño y la transición entre las temporadas, ¿por qué no trasladar esto en sus diseños, es decir, usando el color naranja como un color que ofrece transiciones entre dos diferentes áreas de sus diseños?

Cuando use el color naranja, es, definitivamente, útil pensar en tu comercio y tu audiencia objetiva.  Cuando las personas jóvenes son tu público objetivo, el color naranja parece ser un color popular.  Así como esto, el color naranja puede ser utilizado para conseguir que las personas hablen y piensen.


Amarillo

El último de los principales colores cálidos, el color amarillo es brillante y un color creativo.

colour-yellowcolour-yellowcolour-yellow

Es conocido por su habilidad para promover pensamientos claros y hacer decisiones rápidas, el color amarillo es probablemente el color más asociado con la felicidad, la energía positiva y el resplandor del sol.

Veamos algunas asociaciones del color amarillo:

  • creatividad
  • brillo solar
  • felicidad
  • energía
  • cobardía
  • engaño
  • advertencias
  • inestabilidad
  • claridad
  • actividad

El color amarillo es uno de los tres colores primarios, se ve principalmente como evocando la felicidad, es un color creativo y además es utilizado efectivamente para crear diseños que evoquen sentimientos de felicidad y claridad.

También es un color muy enérgico, el amarillo, además tiene un grado de actividad que puede pasar a lo largo de sus diseños.  Puedes usar el color amarillo para crear entusiasmo y mejorar las áreas en sus diseños en donde se necesite tomar acción.

Sin embargo, en otras culturas el color amarillo tiene asociaciones y significados ampliamente diferentes.  En Egipto, el amarillo se usa bastante como el color para el luto y en la edad media, las ropas de color amarillo fueron usadas para significar a los que habían muerto.  En India, es un color que a menudo es usado por los comerciantes.  Y en Japón, el amarillo es un símbolo de coraje y además tiene asociaciones positivas. 

Cuando diseñas con el color amarillo, necesitas estar consciente que si lo usas mucho, bueno, algunas veces puede presentar sentimientos de ansiedad, debido a que es muy brillante, “movimientos rápidos” de ese color pueden llevarte a sentir sin equilibrio en tu sitio web.  En lugar de eso, intenta introducir otros colores junto al color amarillo y usa el amarillo como un resaltador en la página para prestar atención a los aspectos más importantes de un diseño.

Sin embargo, debido a los efectos que el color amarillo tiene en las personas (volvamos a la sensación de movimiento rápido que aparentemente ofrece) puedes usar en algunas ocasiones amarillo para tu ventaja, por ejemplo, el amarillo parece inducir a las tomas de decisiones más rápidas y además tenemos los botones en color amarillo de los diseños en los e-Commerce en donde funciona extremadamente bien con tal que encaje con el resto del diseño.

Debido a la sensación bastante inestable que provoca el color amarillo no sería una buena idea usar amarillo en un sitio web donde quieres provocar un sentimiento de estabilidad o de seguridad.  Además, parecer ser que históricamente los hombres perciben el color amarillo como un color infantil, así que no será una buena elección de color para un sitio de productos de hombres. Por lo que sería correcto en el hogar cuando sea utilizado para una audiencia más joven.


Verde

Pertenece a la familia de colores fríos, el color verde es un rejuvenecedor y a menudo se describe como un pacificador natural, a causa de sus muchas asociaciones con aspectos relajantes de la naturaleza.

colour-greencolour-greencolour-green

Veamos algunas asociaciones del color verde:

  • primavera
  • crecimiento
  • renovación y renacimiento
  • equilibrio
  • naturaleza
  • césped y jardines
  • estabilidad
  • posesividad
  • celos
  • envidia
  • fertilidad
  • seguridad
  • dinero
  • reciclaje

De una combinación de azul y amarillo, el verde ofrece la claridad mental y el entusiasmo del amarillo mezclado con el más emocionalmente calmo y estable, el azul.  En la naturaleza, vemos el color verde a nuestro alrededor todo el tiempo; en las hojas, el césped, las flores y mucho más por supuesto.  Debido a esto, muchas de las asociaciones que tenemos con el color verde se relacionan bastante a la naturaleza y temas similares tales como renacer y fertilidad.

A menudo el color verde se usa para hacer referencia a un color que ofrece una sensación de estabilidad y equilibrio.  Puede funcionar bien en diseños donde quieras mostrar que un producto o servicio es confiable o seguro de usar.

Por el otro lado de la moneda, el verde, también tiene muchas asociaciones con los celos, envidia y posesividad. Por lo tanto, tienes que ser muy cuidadoso sobre cómo usar los colores y asegurar que usas el verde más para añadir balance a un sitio web.

El color verde tiene fuertes vínculos con el mercado de reciclaje, siendo el color verde el más utilizado en los logos de reciclaje en Gran Bretaña y Europa, solamente.  Además, tiene sentido usar el color verde en diseños que se relacionan a productos reciclados o cualquier producto, servicio o empresa que sea “verde”.

En otras culturas, el verde generalmente tiene buenas connotaciones.  En Irlanda, así como aparece en la bandera nacional, es un color que se asocia bastante al festejo St. Patrick´s Day. El verde es también el color de la suerte, trébol de cuatro hojas, el cual es probablemente el símbolo más conocido de la suerte en el mundo. El verde, es el color tradicional en el Islam y, también, es mencionado en una buena parte del Corán, con muchos de esos en el paraíso descrito como vistiendo “prendas verdes”.


Azul

El color más frío de todos los colores, el azul, a menudo es visto como un color confiable y tranquilo, probablemente debido a las asociaciones más obvias del color azul con el mar y el cielo.

colour-bluecolour-bluecolour-blue

Es un color conservativo que, por lo general, se usa bien en los diseños que representan precisión y un aire de responsabilidad.

Algunas asociaciones del color azul incluyen:

  • el mar
  • el cielo
  • confianza
  • honestidad
  • lealtad
  • sinceridad
  • paz
  • tranquilidad
  • inteligencia

El último de los colores primarios (además de rojo y amarillo), el azul es un color reductor del estrés que a menudo se utiliza en diseños para audiencias masculinas y corporativas.  El azul, es un color que invoca el sentimiento de confianza, honestidad y seguridad y, además, se presta bien, en particular a los diseños para productos, servicios o compañías que quieren evocar estos sentimientos en sus audiencias.

Con sus muchas asociaciones, ya sea con el cielo y con el océano, el azul, también funciona en diseños que quieren promover intensamente estas cosas.  Por ejemplo, si un producto se relaciona bastante al océano (un producto de surfear, por ejemplo), entonces el color azul puede utilizarse para llevar a familiarizarse a esos sentimientos que se relacionan al océano y ayuda a la audiencia a relacionarse con el producto o más con el sitio web. Lo mismo se puede decir para cualquier color que se relacione a cosas reales o en la actualidad, tales como cualquier cosa en la naturaleza, como el césped o las flores.

El color azul también es conocido por ser un supresor del apetito, así que no será el color más adecuado para usarse en diseños que implican la comida en alguna manera.  Deberás estar consciente de que al usar demasiado el color azul puede ser sofocante y, del mismo modo, parecer anticuado, esto dependiendo de los tonos usados.

Algunas de las mejores ocasiones para usar el color azul en tus diseños serán para sitios web que están enfocados en una audiencia masculina y también para negocios corporativos.  Sin embargo, eso no quiere decir que no puedes usar el color azul en otros estilos de diseño, es decir, no te limites a experimentar y divertirte con los colores solamente porque es posible que no esperes que coincidan con los parámetros aquí mencionados.

Al igual que las asociaciones generales, hay muchas connotaciones diferentes que vienen con el color azul en diferentes culturas, por así decirlo.  En la cultura Occidental, por ejemplo, existe la tradición de que “algo es azul”, que a menudo se utiliza en las bodas en donde a la novia se le ofrece algo azul (es algo así como la otra tradición “algo viejo” o “algo nuevo”) como un regalo de buena suerte en su nueva vida marital. Sin embargo, en Irán, el color azul es el color utilizado para el luto.


Violeta/Purpura

Es el último de los colores de la familia de los colores fríos, el color púrpura se ve bastante como un color misterioso, usualmente, representando ambición, realeza y poder.

colour-violetcolour-violetcolour-violet

Algunas asociaciones del color purpura incluyen:

  • realeza
  • imaginación
  • poder
  • lujo
  • riqueza
  • extravagancia
  • ambisión
  • sabiduría
  • magía
  • misterio

De una buena combinación de rojo y azul, purpura es intrigante y tiene el efecto tranquilizante y de calma del azul y la energía que ofrece el color rojo.  El purpura con frecuencia se ve como un color de lujo y funciona bien en diseños que necesitan mostrar un poquito más de un margen extravagante.

A diferencia de los colores azules y verdes, el purpura es un color raro que se encuentra en la naturaleza. Por ejemplo, las flores purpuras tales como los lirios, orquídeas y lavanda son raros de encontrar pero son muy frágiles y delicados, sin embargo, muy preciosos y son tratados con un enorme respeto. 

El purpura es una cultura popular en muchas culturas, y por muchas diferentes razones. En Tailandia, el color purpura es el color de luto para las viudas, mientras que en Egipto, es muy conocido como el color favorito de Cleopatra, quien fue la última faraón del Antiguo Egipto. En muchas otras culturas, el purpura el color tradicional usado por la realeza o las personas con autoridad.  Y en los Estados Unidos, hay el “color purpura”, la cual es una significativa condecoración del ejercito de los Estados Unidos, otorgado en el nombre del presidente a aquellos que han sido heridos o perdieron la vida en combate.

Cuando uses purpura, necesitas ser cuidadoso de no utilizarlo demasiado, en tanto que cierta cantidad puede, definitivamente, promover una sensación  de más majestuosidad, extravagancia o lujo a sus diseños, por otro lado, demasiado purpura también puede irritar e incluso hasta ha llegado a causar depresiones en algunas personas.

Se ha descubierto que la mayoría de los niños prefieren el color purpura que otros colores, por lo que sería un color apropiado y realmente efectivo para usar en diseños que tengan una audiencia más joven.

El uso del color purpura en tus diseños puede aumentar la imaginación o la creatividad y los tonos claros de purpura también funcionan bien en los diseños femeninos.


Esquemas de color

Los esquemas de color son un arreglo de colores que, una vez que se ponen juntos, pueden ser utilizados en cualquier forma de diseño, incluyendo tus diseños en la web.  Es difícil trabajar para elaborar un buen esquema de color —y es fácil observar cuando los colores se sienten o se ven “apagados” o no del todo bien. No obstante, cuando haces el esfuerzo por crear un esquema de color bueno y efectivo, y le pones un buen uso, este sin duda hará la diferencia entre un buen diseño y uno que es mediocre.

Existen unos cuantos esquemas de color, incluyendo: monocromático, análogos, complementario, complementarios separado, tríadico y tetraédrico.

Nota: Es probable que podrías haber escuchado los siguientes términos utilizados bastante cuando se está  discutiendo eltema del esquema de color.  Aquí hay un pequeño y práctico glosario para ayudarte a comprender mejor sí lo necesitas.

  • Hue: Un “hue o tono” es el color mismo, puede ser cualquiera, es decir: verde, azul, rojo, purpura, etc.
  • Tint: Una “tint o tinta” es cuando se añade “blanco” a un tono de color, convirtiendo ese color en uno más claro.
  • Shade: Un “shade o tonalidad” es cuando, por ejemplo, añades “negro” a un tono o “hue”, haciéndolo más oscuro.
  • Tone: Un “tone” se crea cuando se añade “gris” a un tono de color.

Monocromático

Los esquemas de color monocromático usan un tono de color (como el azul, por ejemplo) y luego usan varias tintas (tint) o tonalidades (shades) de ese color original.

colour-wheel-monochromaticcolour-wheel-monochromaticcolour-wheel-monochromatic

Estos son los esquemas de colores más fáciles de crear, debido a que solamente implica un color, así que ya sabes que los pocos colores bases que elijas funcionaran en armonía con otros.

Análogos

Los esquemas de color análogos son creados por medio de la selección de tonos que están a la par de otros colores en la rueda de color.  Por ejemplo, azul-verde, verde y amarillo-verde.

colour-wheel-analogouscolour-wheel-analogouscolour-wheel-analogous

La manera más fácil de usar un esquema de color análogo es seleccionar uno de los colores como el color principal, es decir, el color dominante, y luego usar los otros dos muy poco, como colores que enfatizan el primer color.

Complementario

Los esquemas de color complementarios son creados al seleccionar dos colores que son opuestos en la rueda de color, por ejemplo, rojos y verdes o purpura y amarillo.  Debido a que estos colores son exactamente opuestos, ofrecen extremadamente alto contraste y tienen un gran impacto.

colour-wheel-complementarycolour-wheel-complementarycolour-wheel-complementary

Los esquemas de color complementarios pueden ser difíciles de conseguir, por esta razón funcionan mejor cuando tienes elementos de un diseño que quieres destacar, en vez de usarlos en dosis completas a través del diseño por completo.

Complementario separado

Estos esquemas de color son creados cuando se toma un color de la rueda de color y luego tomamos los dos colores que están, ya sea al lado de lo que será el primer de los colores complementarios.

colour-wheel-split-complementarycolour-wheel-split-complementarycolour-wheel-split-complementary

Por ejemplo, si tu color principal es purpura, entonces tus otros dos colores serán, los colores que están al lado del color complementario al color purpura, en este caso el color complementario al purpura es el amarillo, por lo tanto, sus colores complementarios separados serán: amarillo-verde y amarillo-naranja.

Como este esquema de color es bastante parecido al esquema de color complementario, eso significa que todavía tendrá bastante impacto cuando se utilice, de hecho, puede dar una sensación un poquito más balanceada y calmada en vez de un esquema de color complementario por completo.  Una vez más, cuando uses este esquema de color, es más fácil usar uno de los colores como el color central de nuestro esquema y los otros dos colores utilizarlos para enfatizar el color principal.

Tríadico

El esquema de color tríadico usa tres colores que están separados de forma uniforme en la rueda de color, por ejemplo; purpura, naranja y verde.

colour-wheel-triadiccolour-wheel-triadiccolour-wheel-triadic

Usando el esquema de color tríadico significa que tú, por lo general, terminarás con un esquema de color bastante brillante y vibrante, sin embargo, esto no es un problema si bajamos los tonos y tonalidades por medio de la variación de las tonalidades (añadir negro a los colores) y tintas (añadir blancos a los colores) de los colores de nuestro esquema tríadico.  Al igual que con los esquemas de color que aprendimos anteriormente, los esquemas de color tríadico funcionan mejor cuando uno de los tres colores tiene mayor enfoque que los demás, y utilizamos los dos colores restantes para enfatizar nuestro color principal.

Tetraédrico

El esquema de color tetraédrico cuando se emparejan dos grupos de esquemas de colores complementarios. Casi funciona como creando un rectángulo alrededor de la rueda de color.  Un ejemplo de un esquema de color tetraédrico es rojo, verde, azul y naranja.

colour-wheel-tetradiccolour-wheel-tetradiccolour-wheel-tetradic

Lo brillante acerca del esquema de color tetraédrico es que ofrece mucha variedad cuando se trata de seleccionar los colores que usted use y, además, puede ofrecerte más ideas cuando estas diseñando tu sitio web.  Al igual que con los otros esquemas de color el esquema de color tetraédrico funciona mejor cuando permitimos que uno de los colores de nuestro esquema sea el color central y los demás solamente como colores complementarios.


Conclusión

Eso concluye nuestra mirada a las características de los colores.  En la próxima parte de nuestra serie, Escuela de Diseño para Desarrolladores, analizaremos formas prácticas para elegir un esquema de color.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.