¿Cómo usar la combinación de colores complementarios?

Una combinación de colores complementaria se compone mediante el uso de dos colores que se encuentran uno frente al otro en la rueda de colores, o también conocida como círculo cromático.  La combinación complementaria de colores, es el esquema que ayuda a atraer la mayor atención de los usuarios.

Artículos recomendados antes de seguir con la lectura:

• 3 conceptos sobre la teoría del color que no deberías olvidar
• Principios Universales de Diseño: El Color
• Principios Universales de Diseño: Peso visual
• Principios Universales de Diseño: Contraste

El potente contraste de los colores complementarios hace que el resultado sea muy nítido, especialmente si utilizas cada color en su saturación completa. Debido a que este esquema es una combinación de color cálido y frío, debes escojer cuidadosamente cuál de los dos colores será el dominante.

Por lo general, cuando se utiliza una combinación de colores que contrastan, es importante elegir el color primario y usar el siguiente como secundario para los acentos como botones CTA. Esta elección establecerá la impresión del resultado final, ya que tu diseño se verá cálido o frío dependiendo del color primario.

Una vez tengas tu color, puedes acabar de ajustar el tono para acabar de encontrar el equilibrio en tu diseño.

Aunque el esquema de colores complementarios se basa en dos colores, también puedes ampliarlo añadiendo matices con diferentes saturaciones y brillo.

Pasos para crear un esquema de colores complementarios

Paso 1: Elige el color primario “principal”

Cojamos como ejemplo el color "#1E3CC3". Y lo vamos a cambiar a HSB (hue, saturation, and brightness), que significa Tono, Saturación y Brillo.

Paso 2: Valor de tono

Copia el color primario escogido y aumenta o disminuye el valor H (Tono) en 180 puntos. El resultado es un color complementario.

Paso 3: Brillo y saturación

Ahora, para hacer la paleta de colores para tu diseño, prepara una versión oscura y clara de ambos colores.

Para la versión oscura, establece el valor B (Brillo) a 30 puntos. Para la versión clara, establece el valor B (Brillo) igual a 90 puntos y también el valor S (Saturación) a 50 puntos. El resultado es el siguiente:

Paso 4: Organiza tu esquema de colores

Ahora es momento de elegir con qué colores nos quedamos en cada elemento de tu diseño. Por ejemplo, las cabeceras con la versión más oscura, los acentos con la versión más clara y como primario y secundario los tonos medios.

Crear contraste con el blanco y/o el negro tambien te ayudará a estilizar tu diseño, ayudando a mejorar el enfoque, comprensión y ayudar a crear equilibrio y jerarquía, para así promover el ritmo en tu diseño.

Paso 5: Resultado

Al aplicar el resultado de tu esquema de colores, obtendrás un resultado como:

Conclusión

Comprender las relaciones entre los colores puede ayudarte no solo en tus diseños, sino que puede darte una apreciación de los diseños de los demás. El uso de colores complementarios es la mejor manera de captar la atención y guiar al usuario por tus diseños.

Photo by Malte Bickel on Unsplash