La teoría del color es un tema complejo y extenso. Se han escrito miles de libros al respecto. No es necesario que seas un experto (aunque sí lo eres facilita gran parte de tu trabajo como diseñador), pero sí lo es que tengas un conocimiento básico sobre el tema, de ese modo puedes elegir colores de manera más adecuada. Y sabemos que elegir una paleta de colores adecuada es importante en todo diseño web.
Esta es una guía bastante básica sobre el color en el diseño web. Es información introductoria que te recomendamos complementes con algún libro dedicado a la teoría del color y, por supuesto, con mucha práctica para poder aprender cómo los colores se relacionan entre sí.
¿Para qué sirve el color?
El color, al igual que las líneas, comunica un mensaje y puede impactar en el espectador. De hecho, gracias al color podemos lograr un vínculo con los usuarios. Si bien es cierto que existen muchos sitios basados en blanco y negro, usualmente son sitios minimalistas donde se destaca la simpleza y elegancia.
Añadir color a un sitio web le da mayor expresividad. Sumado a los gráficos, las fuentes, los botones y todo aquel elemento al que se le puede dar cierto estilo. Al combinar todos estos elementos puedes hacer que tu sitio web comunique un mensaje claro a tu audiencia.
Es probable que comiences a pensar en el color cuando tu proceso de diseño esté avanzado, es decir, cuando hayas terminado la etapa de los bocetos y te hayas decidido por uno. Pero es una etapa importante y es esencial que te tomes el tiempo necesario para elegir cuidadosamente una paleta de colores.
Tono, saturación y brillo
Elegir una paleta de colores adecuada puede ser una de las tareas más complejas que puedes enfrentar cómo diseñador. No sólo debes tener en cuenta la personalidad y estilo del sitio web, sino también lo que cada color expresa y cómo estos colores se asocian entre sí; es decir, cómo estos colores combinan uno con el otro.
Puedes comprender un poco más del color al ver ciertos valores individuales como el tono, la saturación y el brillo; éste último valor se asocia con el nivel de negro que existe en una imagen y en programas como Photoshop se trabaja en porcentajes (del 0 al 100). El 0% es blanco, mientras que el 100% es negro.
El tono se relaciona con la rueda de color, es por ello que en programas editores se suele medir en ángulos, aunque no es necesario que sepas el ángulo exacto de cada color principal ni el orden de los colores en la rueda. De hecho, muchos programas te ayudan en esto, así que no es realmente necesario que tengas algún tipo de conocimiento adicional acerca del tono.
Por último, la saturación se refiere al nivel de “pureza” del color. Un ejemplo sencillo es la comparación entre los colores vibrantes y los pasteles. Los colores pasteles tiene un valor de saturación mucho más bajo que los colores vibrantes.
Este modelo de color se denomina HSB (Hue, Saturation, Bright) y te ayuda a comprender mejor el espacio RGB que se emplea cuando diseñas para pantallas.
Relaciones entre el color
La teoría del color te ayuda a comprender cómo los colores se relación entre sí, conocimiento de utilidad al elegir paletas de colores. Te mencionamos algunas relaciones donde los colores generan equilibrio:
Colores complementarios
Son aquellos que se encuentran opuestos en la rueda del color y suelen generar mucho contraste. Por ejemplo, morado y amarillo. Dependiendo del nivel de saturación de cada color uno de ellos destacará más que el otro, lo cual es perfecto para distinguir el fondo de la forma (los elementos de tu sitio que no forman parte del fondo).
Colores análogos
Los colores análogos son aquellos que se hallan localizados uno al lado de otro en la rueda del color. Debido a esto no generan mucho contraste, pero aún así tienen armonía y equilibrio y pueden ser útiles al momento de diseñar banners, gráficos e incluso fondos.
Triadas
Como su nombre indica son tres colores que se encuentran a una distancia equidistante en la rueda del color. Es importante que, al trabajar con estos colores, definas un color dominante, mientras que los otros dos te servirán para lograr un balance.
Complementarios divididos
En esta relación se toma un color en la rueda y en vez de elegir el color opuesto a éste se eligen los dos colores adyacentes. Se genera un contraste que no es tan fuerte como el de los complementarios.
Dobles complementarios
En este caso se utilizan cuatro colores. Eliges dos colores en la rueda del color y sus colores opuestos correspondientes. La ventaja de utilizar este tipo de combinación en tus paletas es que se genera una paleta de colores más variada, la desventaja es que puede ser complicado balancear los cuatro colores de manera adecuada.
Trabajar con contraste
El contraste es uno de las características más importantes en el diseño web. Gracias al contraste podemos destacar ciertos elementos. El contraste podría ser definido como el nivel de claridad entre dos elementos de tu página web. Algunos de estos elementos podrían ser texto, enlaces, títulos, etc. Si existen un contraste entre ambos, no sólo el texto es legible sino que se existe una jerarquía entre dichos elementos, lo cual ayuda a la lectura visual.
Un excelente técnica para trabajar apropiadamente con el contraste es transformar tu sitio a escala de grises y verificar si todos los elementos son legibles. De acuerdo a la claridad puedes definir, también, cuál elemento es más importante que el otro.
Uso del negro
Muchos diseñadores evitan el negro puro (cuyo valor HEX es #000) pues usualmente es muy fuerte y no refleja la realidad puesto que aunque a primera vista pareciera que ciertos objetos reales son completamente negros, es probable que no lo sean. Este consejo también suele aplicarse en el diseño impreso por esta misma razón.
Este consejo es especialmente útil cuando trabajas con fondos claros. Si deseas que se genere un contraste puedes usar un gris oscuro. De esta manera, evitas un contraste muy fuerte y el texto sigue siendo legible.
En conclusión…
Trabajar con colores es una tarea compleja. Tener una base teórica te puede ser de mucha ayuda al momento de elegir colores, pero poner en práctica esos conocimientos también te ayuda a comprender mejor las relaciones entre colores. Por suerte, la comunidad del diseño, cuenta con muchas herramientas que te ayudan a generar paletas de colores. De esta manera, puedes aprender a combinar colores.
