Tipos de paletas de colores y cómo crear la paleta de colores perfecta

Tipos de paletas de colores y cómo crear la paleta de colores perfecta

Tipos de esquema de color

Aunque el post se titule “tipos de paletas de colores”, empezaremos hablando de los esquemas de color, ya que, como veremos más adelante, no es lo mismo. Dentro de la teoría del color, el 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 elegir los colores de nuestros diseños, seleccionamos uno de estos 6 tipos de esquemas de color:

  • Monocromático
  • Análogo
  • Complementario
  • Complementario dividido
  • Triádico
  • Tetrádico

Monocromático

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.

 

Análogo

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.

 

Complementario

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.

 

Complementario dividido

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).

 

Triádico

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.

 

Tetádrico

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 crear una paleta de color

Una vez que conocemos los tipos más importantes de esquemas de color, podemos crear nuestra paleta de colores, que, aunque pueda parecer lo mismo, no lo es, ya que el esquema de color sólo nos dará 1, 2, 3 o 4 colores en función del esquema de color elegido pero además, necesitaremos algunos colores más para completar nuestro diseño.

Para elegir el tipo de esquema 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 en lighthouse para obtener un 100% de optimización. 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.

 

Configuración de privacidad

Desde este panel puedes modificar la configuración de privacidad para habilitar o deshabilitar las cookies no exceptuadas de las que hace uso este sitio web:

Cookies técnicas (Exceptuadas)

Se utilizan para gestionar la configuración de privacidad establecida por el usuario en su dispositivo.

Cookies de preferencias (Exceptuadas)

Se utilizan para identificar a los usuarios logados en el sitio web, personalizar la visualización de la interfaz de administración y la interfaz principal de la web.

Cookies de análisis

Se utilizan para distinguir los usuarios únicos y las sesiones de un usuario para aportar información sobre cómo los usuarios interactúan con el contenido del sitio web.

Cookies de publicidad

Se utilizan para hacer un seguimiento de las ventas y de otras conversiones cuando el usuario hace clic en un anuncio o una ficha.