El color es un asunto serio. Sobre todo cuando eliges los colores que van a identificar a tu negocio, que también es algo serio. No puedes elegir simplemente tus colores favoritos y aplicarlos a tu tienda en línea a la ligera. Este artículo te explica cómo usar la teoría del color para crear una paleta de colores que se convierta en la imagen uniforme de tu marca de eCommerce.
La teoría del color tiene sus orígenes en la Óptica de Isaac Newton y en los cuadernos de Leonardo da Vinci, pero no es tan intimidante como parece. La teoría del color es un conjunto de pautas prácticas para mezclar colores y elegir combinaciones. Es el conocimiento aceptado sobre cómo deben combinarse los colores, y es la base teórica de las reglas que usaremos para crear nuestra paleta.
Según la teoría del color, hay tres tipos principales de paletas que puedes crear:
Análoga:
Las paletas análogas usan colores que están cerca unos de otros en el círculo cromático. Una paleta análoga transmite uniformidad y estabilidad, y limita las distracciones del contenido de tu sitio. Además, las paletas análogas son más fáciles de manejar. No hay mucha diferencia entre los colores que puedes elegir, así que es más difícil equivocarse.
Complementaria:
Las paletas complementarias usan colores que están opuestos en el círculo cromático. Estas paletas ofrecen una sensación de contraste y también de equilibrio. Son excelentes para atraer la atención de los visitantes hacia ciertos elementos de tu diseño, pero hay que manejarlas con cuidado, porque también pueden resultar chocantes.
Triádica:
Una paleta triádica está formada por tres colores principales espaciados por igual en el círculo cromático, lo que la convierte en la más variada de todas. Sin embargo, eso también la hace la más difícil de manejar, ya que la mayor cantidad de tonos exige mucha más reflexión y experimentación.
Como ejemplo, vamos a crear una paleta complementaria, porque es la que mejor funciona para el eCommerce. Los sitios de eCommerce necesitan llamar la atención sobre sus elementos de llamada a la acción, como los botones de agregar al carrito, y ese es el punto fuerte de la paleta complementaria.
Paso 1: empieza con el blanco
Todas las paletas de colores para diseño web necesitan blanco. El blanco es tu color de fondo. El espacio en blanco da a las imágenes y los elementos de tu sitio espacio para respirar. En Photoshop, el valor hexadecimal del blanco puro es #ffffff. Toda paleta de colores empezará así:
Paso 2: elige tu color base
Este será el color principal de tu sitio y el que determinará el resto de la paleta. Así que es una decisión importante, pero no hace falta darle demasiadas vueltas. Probablemente ya tienes en mente un color que quieres asociar con tu marca. Si no, aquí tienes algunas pautas para elegir tu color base:
Si ya tienes un logotipo que has estado usando con un color establecido, ese es tu color.
Si tu competidor ya se adueñó de un color y lo usa mucho en su marca, ese no es tu color.
Piensa en tu público, pero no caigas en el cliché. Piensa en quién va a usar tu sitio web. Elige un color que refleje cómo quieres que se sienta ese público, pero no seas demasiado obvio. Si haces un sitio para niñas y eliges el rosa como color base, te perderás entre la multitud.
Para esta paleta, elijo el morado como color base.
Una vez que hayas elegido un color base, tendrás que definir un tono exacto. Existen muchísimos formatos de color, como el hexadecimal y el RGB. Algunos se etiquetan como “seguros para la web”, lo que significa que casi siempre se verán bien en los monitores. También hay valores hexadecimales que corresponden a un tono específico. Por suerte, hay muchas herramientas que pueden ayudarte a identificar tonos seguros para la web y su valor hexadecimal. Yo usé una herramienta llamada Dribble. Dribble nos permite adelantarnos un poco, porque te deja elegir tu color base y luego te propone posibles paletas basadas en esa elección. Pero ignoremos ese atajo por el momento. Dribble me dice que el valor hexadecimal de mi tono de morado es #4F1091. Así que, con mi color base agregado, mi paleta ahora se ve así:
Paso 3: elige tu color de acento
Tu color de acento se usará con moderación en tu sitio, pero en lugares muy importantes. En una paleta complementaria, tu acento será (lo adivinaste) el color complementario de tu color base. Este será el color que usaré en los elementos que realmente quiero destacar, como mis botones de llamada a la acción.
Cualquiera que tenga un círculo cromático sabe que el complementario de mi morado base es el amarillo. Pero para encontrar el código hexadecimal exacto de un amarillo complementario, voy a usar una herramienta llamada Paletton. Introduzco mi valor hexadecimal, hago clic en agregar color complementario y me ofrece un par de amarillos para elegir. Quiero que mis botones de llamada a la acción destaquen, así que voy a elegir uno de los más brillantes. Me quedo con #FAD00C. Ahora mi paleta se ve así:
Paso 4: elige tus grises
Además de tu color base y tu color de acento, necesitarás algunos grises. Casi todos los sitios web que ves usan dos tonos: un gris oscuro y un gris claro. El gris oscuro se usa para el texto, mientras que el gris claro se usa para los elementos que van sobre tu fondo blanco pero que también necesitan distinguirse ligeramente de él.
Hay muchas formas de elegir tus grises. Puedes usar cualquiera de las herramientas que hemos utilizado hasta ahora. También existe este método para quienes tienen Photoshop. Sin embargo, como es bastante difícil equivocarse con los grises, irás sobre seguro si eliges algo entre #333333 y #666666 para el oscuro, y algo entre #FFFFFF y #CCCCCC para el claro. Para los grises oscuros voy a elegir #333333, y para los claros, #CCCCCC.
Con mis grises elegidos, tengo mi paleta final. Se ve así:
Así de sencillo es diseñar una paleta de colores complementaria para tu tienda de eCommerce. Cuando ya tengas algo de experiencia diseñando, podrás profundizar mucho más en tus opciones de color. Si te vendría bien ayuda profesional para lograr un diseño de eCommerce impresionante, nuestros diseños personalizados se ven hermosos sin importar el esquema de color. Si conoces otras buenas herramientas para diseñar una paleta de colores, déjalas en los comentarios o en nuestro Twitter. Mientras tanto, voy a jugar a escribir letras y números al azar en Photoshop para ver en qué color hexadecimal termino.