Tipos de paletas de colores y cómo crear la paleta de colores perfecta
Dentro de la teoría del color, la paleta de color o esquema de color, color scheme en inglés, es una fórmula básica para crear harmoniosas y efectivas combinaciones de color. Siempre que tenemos que seleccionar los colores para un proyecto dentro de nuestro servicios de, por ejemplo, diseño web Cádiz, seleccionamos uno de estos:
Tipos de paletas de colores
- Paleta monocromática
- Paleta análoga
- Paleta complementaria
- Paleta complementaria dividida
- Paleta triádica
- Paleta tetrádica
Paleta monocromática
Como su nombre indica, es el más sencillo de todos los esquemas de color, y consiste en la elección de un color base y cualquier número de variaciones de este. Este tipo de esquema es común en diseños minimalistas.
Paleta análoga
Un esquema de color análogo consiste en colores que son adyacentes el uno del otro en la rueda de color. La clave para crear un buen esquema de color análogo consiste en no tener una separación entre colores de más de ⅓ del total.
Paleta complementaria
El esquema de color complementario es aquel cuyos colores estan situados uno frente al otro en la rueda de color.
Errores comunes en el esquema complementario
Como los colores complementarios son tan diferentes el uno del otro, pueden causar un efecto conocido como contraste simultáneo cuando se colocan juntos, donde cada color hace que el otro parezca más vibrante y dominante. Esto es lo que hace que los colores complementarios tengan éxito moviendo los ojos de los visitantes alrededor de la composición. Sin embargo, puede ser muy doloroso para los ojos cuando los colores complementarios son usados en una relación primer plano-fondo.
Paleta complementaria dividida
Para crear un esquema de color complementario dividido, se usan los 2 colores adyacentes al complementario del color base. Por ejemplo, si el rojo fuera el color base, en lugar de usar verde para formar un esquema de color complementario, se usarán los 2 colores adyacentes al verde, chartreuse (amarillo-verde) y aquamarine (azul-verde).
Paleta triádica
Para un esquema de color triádico, simplemente se gira una posición más el complementario dividido. Así, para el ejemplo anterior, seleccionando el color rojo como color base, se seleccionará el amarillo en lugar del chartreuse, y el color azul en lugar del aquamarine. Esto divide la rueda de color en tercios, de ahí el prefijo tri en triádico.
Paleta tetádrica
Sabiendo que triádico implica el uso de 3 colores, se entiende que para el caso del esquema de color tetádrico se usarán 4. El esquema de color tetádrico combina cualquier esquema de color complementario con otro esquema de color complementario.
Cómo hacer mi paleta de colores
Para elegir el tipo de paleta de color puedes utilizar herramientas como paletton.com.
Tomaremos nuestra página como ejemplo, en nuestro caso utilizamos un esquema monocromático, cuyo color principal es un naranja (#d63f0e). Además, necesitaremos un color de activación de ese color y un color de texto predeterminado:
- #d63f0e
- #f7941e
- #222222
Para romper el layout, podemos utilizar una mezcla de paneles claros y oscuros, así que necesitaremos una selección de tonos. Podríamos utilizar una serie de tonos grises neutros pero el resultado sería demasiado artificial:
- #F2F2F2
- #B2B2B2
- #7C7C7C
- #4F4F4F
- #3E3E3E
En su lugar, desplazamos un poco a la derecha cada uno de estos colores en nuestro color picker, de tal forma que los colores se verán lo suficientemente neutros como para trabajar en cualquier tipo de composición pero sin ser tan fríos y antisépticos.
- #ECECEC
- #B8BCC7
- #898CA2
- #3D4158
- #1F2133
Nuestra paleta de colores
Bonus track: Controla el contraste
Cuando selecciones la paleta de colores de tu diseño, es esencial que haya al menos 2 colores que tengan el suficiente contraste para ser usados como fondo y texto. Además de por motivos de accesibilidad, es uno de los checks que deberás pasar para obtener un 100% de optimización en google lighthouse. Puedes utilizar una extensión del navegador como esta (Colour Contrast Checker), con sliders que te permitirán ajustar los colores hasta lograr pasar el check.