Diseño web y UX

Teoría del color: Elige un color para tu sitio web

Por Alberto Ruiz García
Teoría del color: Elige un color para tu sitio web

Elegir los colores que nos identifican puede llegar a ser una tarea que trae varios quebraderos de cabeza, parece sencillo pero realmente la selección del que color que va a representar nuestra marca es especialmente importante. En primer lugar aunque nos gusten dos colores, al combinarlos podemos descubrir que juntos no funcionan bien, también a la hora de expresarnos podemos encontrar problemas ya que lo que para nosotros es un color no lo es para otra persona, conflicto especialmente importante si la persona con la que debemos entendernos es la persona responsable del nuestros diseños. Por último la selección debe ser inteligente ya que los colores demasiado intensos pueden llegar a cansar ¿No pensabas que sería tan compleja la simple selección de un color, verdad?

¡Tranquilo! Por suerte desde palbin.com te traemos los fundamentos principales de la teoría del color para que la elección sea mucho más sencilla. Con este post aprenderás cual es el método adecuado para trabajar, como comunicarte en colores exactos y algunas de las combinaciones clásicas más eficaces para realizar una elección estética de colores corporativos.


Colores aditivos y sustractivos

En el colegio a todos nos han explicado que el rojo, el amarillo y el azul son los colores primarios y que a partir de sus combinaciones pueden aparecer todos los demás. Lo cierto es que esto no es del todo así, realmente distinguimos entre colores aditivos y sustractivos, distinción que te será muy útil a la hora de establecer el color.

Colores aditivos

Los colores aditivos son los también llamados luz, reciben este nombre por su naturaleza luminosa y su procedencia de un foco emisor de la misma. Éste es muy importante para ti ya que es el color que emiten las pantallas por lo que será el que deberás tener en cuenta para tu web. Cabe destacar que estos colores nunca son 100% reales ya que su percepción depende totalmente de la calibración del monitor o pantalla desde el que se percibe y dada la recepción subjetiva del color, no es posible calibrarlos de manera completamente correcta.

Los colores primarios en los colores aditivos corresponden al modo RGB, siglas que provienen de Red, Green y Blue, o lo que es lo mismo Rojo, Verde y Azul, mediante su combinación se pueden conseguir todos los demás. El blanco por su parte supone la totalidad de luz, es decir, la unión de todos los colores y el negro supone la oscuridad, es decir la ausencia de todo color.En base a esto se proyectan las pantallas, los famosos píxeles son micropuntos que contienen los 3 colores y que se iluminan o se apagan en función del color que se pretende conseguir. La unión de todos estos píxeles que lucen el color apropiado en cada punto configurará los colores y composiciones que nosotros percibimos en la pantalla, algo así como un tremendo mosaico.

RGB

Dada la complicación de una representación exacta del color en pantalla, se ha configurado una forma de representar de manera precisa los colores, el código hexadecimal. Este código comprende 6 cifras distribuidas en parejas, y cada una de estas parejas supone un grado de colores primarios, la primera pareja corresponde al Red, la segunda al Green y la tercera al Blue. Estas cifras comprenden grados de intensidad, siendo 0 total oscuridad y "F" el grado más intenso en un abanico desplegado en 256 colores (Del 00, que es 0 al FF que es 255) ¿Parece complejo verdad? No te preocupes, existen herramientas como Color Picker que te ayudarán a determinar un color que te guste con un solo click, copia el código y envianoslo en tu formulario de diseño, logotipo o puesta en marcha.

Colores sustractivos

son los colores a los que estamos acostumbrados en el día a día, colores no tan luminosos con cierta solidez y se llaman sustractivos porque funcionan de la siguiente forma. La luz emite su espectro de color que es absorbida por los objetos, devolviendo los residuos que son percibidos como los colores que ven nuestros ojos.

El ser humano los representa artificialmente mediante el modo CMYK, en el que los colores primarios son Cyan, Magenta, Yellow y Key (Cian, Magenta, Amarillo y Color Clave). Si combinamos los colores primarios podemos conseguir todos los demás colores a excepción del negro. Uno de los actos de fe al que estábamos expuestos cuando eramos niños era enseñarnos que al juntar todos los colores aparecía negro, lo cierto es que no es así, aparecía un color de dudable estética que no sabías muy bien como definirlo pero desde luego no era negro. Ante la imposibilidad de representar el color negro, se crea el color Key, que hace referencia al negro y con su adhesión ya tenemos todas las gramas cromáticas al completo. A la inversa que anteriormente el blanco será la ausencia de color.

CMYK

Este modelo de color no nos interesa mucho para nuestro diseño web pero recuerda, si tu tienda online cuenta con campañas offline que requieren impresión física, éste es el formato que debes utilizar en tus diseños, sino la impresión no quedará de forma correcta.

Propiedades del color

Antes de pasar a las combinaciones debemos comprender como funciona el color. Existen 3 propiedades principales que debemos entender, el tono, la saturación y la luminosidad.

Cuando hablamos de tono, nos referimos a lo que normalmente conocemos (de forma errónea) como color, es decir, tono azul, rojo, violeta, etc. Al referirnos sin embargo a la saturación hablamos del grado de viveza del color, un amarillo muy vivo será un amarillo muy saturado mientras que si se acerca al gris estará desaturado. Por último la luminosidad se refiere al grado de oscuridad o blanquecino que está el color, por ejemplo amarillo claro, u oscuro.

Tono, saturación y luminosidad

En un cuadro como éste podemos ver la totalidad de un color con todas sus propiedades, podemos casi decir que es como un eje de cordenadas en el que el eje X (horizontal) correspondería a la saturación y el eje Y (vertical) a la luminosidad. Este color sería un azul poco saturado y muy luminoso.

Combinación de colores

Escoger un color propio y representativo puede dar muchos quebraderos de cabeza. No todos los colores funcionan bien juntos, existen muchas técnicas para combinar colores y vamos a enseñarte algunas para que puedas escoger con precisión tu gama corporativa, y hacer que tu web tenga un diseño atractivo y personal.

Para hacerlo nos basaremos en los colores representados en el círculo cromático, un círculo que alberga todos los colores con diferentes grados de tono, brillo e luminosidad ordenados de forma coherente en el paso de unos a otros, algo así como un arcoíris.

Combinación de colores

Monocromático

Se trata de escoger colores que se encuentran en el mismo sector, o mejor dicho que corresponden al mismo tono. Únicamente jugaremos con saturación y luminosidad.

Podemos escoger un tono (color), por ejemplo azul, y jugar con el luminosidad poniendo azules más claros y más oscuros, y/o con la saturación poniendo por ejemplo azules más eléctricos o más crudos.

Monocromático

Análogos

Es muy semejante al anterior, con la única diferencia de que permite también variar el tono pero con ciertas restricciones. Esta opción incluye de 2 a 3 tonos, eso sí estos tonos deben estar al lado en el círculo cromático, o lo que es lo mismo ser adyacentes.

Por ejemplo, si escogemos el verde podemos jugar también con azules y amarillos, además de jugar con los diferentes tonos también podemos tocar la saturación y la luminosidad para hacer combinaciones homogéneas pero más vistosas que las anteriores.

Análogos

Complementarios

Radicalmente diferente a los colores análogos, se trata de escoger los tonos que se encuentran en los extremos totalmente opuestos. Generalmente si se juega con luminosidad y saturación se hace en grados semejantes para que la combinación sea armónico.

En este caso si escogiéramos de nuevo el azul, el naranja sería su complementarios. La magia de esta combinación reside en contrastes fuertes pero armónicos que consiguen captar nuestra atención.

Complementarios

Triada

Funciona de forma parecida al caso anterior, pero en vez de escoger el color complementario escogeremos los que se sitúan en la las esquinas que conformarían un triángulo equilátero con el tono original. Es sin duda el más complejo de todos y su funcionamiento es especialmente complicado aunque si se hace adecuadamente puede ser muy eficaz.

Triada

Conclusión

¡Ya no hay excusa! Tienes las claves que necesitas para escoger el color perfecto para tu tienda online o para tu marca. Ahora sabes que no basta con decir "quiero que mi color sea el azul", tienes las herramientas adecuadas para definir exactamente cual es el que más encaja contigo. Juega con las propiedades del color y trabaja en el modo más adecuado para escoger aquellos que más te representen.

¡Encuentra tu color y dinos si te ha sido útil este post!


¿Quiéres mejorar tu e-commerce?
x
Academia digital ecommerce

Únete a nuestra Academia Digital y recibe los mejores trucos y consejos sobre Comercio Electrónico y Marketing Digital diréctamente en tu correo.

Recibirás un email para confirmar tu suscripción.

Comentarios


No se encontraron resultados.

Deja un Comentario

Tu email no será publicado


©2024 Siokia SL | Palbin.com: Crea tu tienda en dos pasos, 1 y 2. Condiciones de uso y Política de privacidad