Recordamos la teoría del color en las clases de arte: el significado de la rueda de colores, la temperatura y el croma. Como diseñador/a web, trabajas con la teoría del color todos los días, ya sea inconsciente o conscientemente. En este artículo te mostraré cómo utilizar los principios y herramientas adecuados para crear buenas combinaciones de colores para tu próximo proyecto web.

Teoría del color: El orden de los colores

Los primeros registros de la teoría del color y del círculo cromático se remontan al menos a principios del siglo XVII. El origen de los colores, el reflejo de la luz, el proceso en el ojo humano: todo esto ha mantenido ocupada a la humanidad durante mucho tiempo.

Los diseñadores solemos ser fundamentalmente visuales. La creación de combinaciones de colores suele surgir de las entrañas. Vemos y analizamos constantemente los colores que nos rodean. El resultado es una forma intuitiva de tratar los colores. 

Sin embargo, el conocimiento factual de los colores y sus efectos no solo es indispensable para explicar la elección y la disposición de los colores. También es importante para tomar decisiones que se desvían de la norma.

Para encontrar las combinaciones de colores óptimas para los/as clientes/as y tus sitios web, es inevitable tener un buen conocimiento de la teoría del color.

Como diseñadores de superficies digitales, tenemos una ventaja decisiva con respecto a los medios de impresión: el número de colores que finalmente se utiliza y los tonos que se eligen no influyen en el coste del producto. Sin embargo, esto solo se aplica mientras tu proyecto siga siendo exclusivamente digital.

Tampoco estás sujeto/a a las limitaciones técnicas que tenemos con los medios impresos. Esto te da a ti, como diseñador/a, la maravillosa libertad de desarrollar todo tu potencial.

Colores primarios, secundarios y terciarios

Nuestras pantallas suelen basarse en el sistema o modelo RGB (rojo, verde y azul por sus siglas en inglés), también conocido como sistema de color aditivo. Como regla general, todo lo que refleja la luz se basa en el sistema de color aditivo. En esta estructura, utilizamos los colores primarios como punto de partida. El blanco se crea combinando todos los colores, mientras que el negro representa aquí la ausencia de los colores.

Explicado con el ejemplo de una rueda de colores, los colores primarios son el amarillo, el rojo y el azul. Los secundarios se crean cuando se mezclan los colores primarios. Los colores terciarios se crean a partir de mezclas que contienen colores primarios y secundarios.

Tonos, matices, sombras y croma

Los tonos, o matices, describen los seis colores primarios y secundarios no mezclados:

• Los matices describen el matiz que se produce cuando se añade blanco a un color.
• Las sombras utiliza el mismo principio que los matices, pero aquí mezclamos el negro.
• El croma, también llamado saturación o intensidad, es lo que llamamos a la mezcla de tonos con grises o colores neutros como el blanco y el negro. Si seguimos esta definición, las sombras y los matices también pertenecen al croma.

Temperatura y contraste

También se pueden clasificar los colores por temperaturas. Aquí se aplican algunas reglas generales:

Los colores cálidos parecen más dominantes cuando los combinas con colores fríos.

De este modo también puedes transmitir la sensación de profundidad. Por tanto, los colores fríos parecen más lejanos que los cálidos. Los colores de calidez intensa también pueden hacer que los colores fríos parezcan aún más fríos.

El gris así como los tonos de gris, el blanco y el negro, pertenecen al grupo de los colores neutros. El beige y el marrón también suelen asignarse a los colores neutros. Personalmente, solo estoy de acuerdo en parte, porque un tono de gris puede parecer cálido o frío. También tiendo a considerar el beige y el marrón como tonos cálidos. Los colores neutros se definen para mí como el blanco y el negro y todos los tonos de gris entre ellos, a los que no se ha añadido ningún otro color.

Los colores neutros tienden a parecer poco interesantes por sí solos, por lo que necesitan al menos un color que destaque. 

Las excepciones confirman la regla, porque hay algunos diseños minimalistas en blanco y negro que se las arreglan sin ningún otro color. El marrón y el beige también pueden ser muy atractivos como color dominante, por ejemplo, en un diseño monocromático.

Los colores primarios contrastan entre sí.

Hay otra forma de crear contraste. Observando los colores que están a unos tres cuadros de distancia en la rueda de colores. Estos emparejamientos pueden crear fácilmente desarmonía porque se muerden unos a otros. Sin embargo, si se utilizan correctamente, por ejemplo como llamada a la acción, pueden dar a tu diseño un contraste interesante.

8 principios para una paleta de colores armoniosa

Colores complementarios

Los colores complementarios son dos colores directamente opuestos que se combinan en este concepto, como en el ejemplo del informe Youtube Culture & Trends Report.

Dos colores complementarios destacan al máximo el uno del otro. Esto crea una combinación de colores contrastada, pero armoniosa. Estos diseños se prestan a ser dinámicos y a llamar la atención. Por lo tanto, debes asegurarte de que esto también refleja el producto que quieres comunicar.

Combinación de triángulos

La combinación de triángulos (tríada) describe tres colores que son equidistantes entre sí en la rueda de colores.

Al igual que las combinaciones anteriores, ésta también es bastante sencilla y fácil de usar. Ofrece más diversidad, pero sigues estando en el lado seguro. Apenas hay una composición armoniosa a partir del principio básico. Estas paletas de colores son especialmente adecuadas para sitios web que pretenden atraer a una amplia gama de usuarios.

Aun así, deberías elegir un color que domine en tu diseño. Esto garantiza un diseño claro y más armonía. Échale un vistazo al ejemplo de Slaveryfootprint.org.

Colores complementarios adyacentes

Los colores complementarios adyacentes o divididos describen un concepto similar al de los colores complementarios. Aquí, solo se divide un lado. En lugar del color primario complementario, ahora se utilizan los colores terciarios circundantes o cercanos. Esta paleta ofrece más posibilidades de combinación.

La adición de un tercer color al esquema complementario añade un poco más de equilibrio al diseño. Esta combinación se utiliza con bastante frecuencia en la web. La combinación o esquema de colores no tiene que ser tan fuerte como en este ejemplo. 

El tercer color suele ser utilizado por los diseñadores como color de acento y se usa con mucha moderación. Con este principio darás a tus sitios web un contraste suave.

Combinación de colores tétrada

Al igual que el concepto de tres lados, la combinación tétrada combina cuatro colores. De todas las combinaciones presentadas hasta ahora, ésta es la más difícil de dominar. 

Aquí también combinamos dos pares de colores complementarios. Sin embargo, aquí se requiere sensibilidad en la distribución de la jerarquía. En este sitio web, el tono rojo se utiliza con moderación para evitar que el rojo domine sobre los demás colores. En su lugar, se ha utilizado un azul frío y un beige neutro como colores dominantes.

Cuando utilices este principio, asegúrate de utilizar colores cálidos y fríos en armonía.

Tétrada equidistante

Consiste en dos colores adyacentes y sus colores complementarios.

Con estos colores, crearás una paleta de colores que aportará un contraste atractivo a partir de colores complementarios y, al mismo tiempo, resulta más variada, como en este ejemplo.

Colores análogos

Las paletas de colores análogas son dos o más colores que se encuentran uno al lado del otro en la rueda de colores. Estos colores análogos parecen menos contrastados en comparación con las composiciones descritas anteriormente, pero aun así no pierden su efecto. 

Para tu sitio web, es conveniente elaborar una jerarquía y utilizar los colores en consecuencia. En el siguiente ejemplo, Crips Studios ha elegido el púrpura como color mayoritariamente dominante. Este color es entonces también el que establecerá el estado de ánimo de tu sitio web.

Monocromo

Monocromo o monocromático son términos que se aplican a lo que tiene un solo color. Los colores monocromáticos describen diferentes tonos y/o croma del mismo color. Esta es la forma más sencilla de conseguir una combinación de colores armoniosa. Bien utilizado, harás que tu sitio destaque sobre otras páginas.

El uso de colores monocromáticos refuerza además el impacto emocional del color de origen y crea elegancia. Los diseños minimalistas se benefician de las paletas de colores monocromáticas. También debes saber que los sitios web monocromáticos tienen poco contraste.

Croma y tonalidad o matiz

Uso de colores con valores de croma o tono similares. En el ejemplo de Bliss, la armonía se creó mediante el uso constante de tonos pastel.

Inspiración y herramientas de la teoría del color

Ya es un clásico y sigue siendo una de mis herramientas favoritas para crear paletas de colores: Rueda de colores de Adobe.

Como novedad, también se puede comprobar tu selección para ver si se sigue mostrando con suficiente contraste para los usuarios que padecen daltonismo.

• Eggradients ofrece una gama de inspiración para degradados y los estilos CSS que los acompañan.
• Khroma es una aplicación de navegación basada en la inteligencia artificial que aprende qué colores te gustan especialmente y crea las combinaciones correspondientes. Definitivamente, se recomienda como inspiración rápida para los colores y las combinaciones.
• Coolors es una plataforma donde puedes inspirarte y crear tus propias paletas de colores. También ofrece extensiones para Chrome y Adobe.

Colourco funciona de forma similar a Adobe Color Wheel. Se puede establecer el principio según el cual se va a crear tu paleta de colores. Con solo pasar el ratón, puedes probar y crear combinaciones de colores. Puedes descargar la selección como hoja de estilo Sass o .png.

Emotive Feels también ofrece un sitio web de diseño atractivo para explorar una amplia gama de colores y sus efectos.