Creating your own color palette for your design project

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Los colores juegan un papel crucial en cada diseño: le dan vida, ayudan a agregar significado a las características que implementa y hacen que su producto sea accesible a través de una relación de contraste adecuada.

De hecho, el contraste de color es un factor clave en las Pautas de Accesibilidad al Contenido Web (WCAG). Cumplir con estas pautas garantiza que su diseño sea inclusivo y accesible para todos los usuarios, independientemente de sus capacidades visuales.

Además, añadir colores aleatoriamente a los diseños puede causar problemas. Pueden aparecer inconsistencias y diferentes tonos del mismo color en todo el producto, lo que se traduciría en una pésima experiencia de usuario.

Tener una paleta de colores clara te ayuda a evitar contrastes e inconsistencias. Además, agiliza el proceso de diseño, ya que los colores ya están elegidos, lo que te permite concentrarte en otros aspectos creativos de tu trabajo.

En este artículo, te ayudo a crear tu propia paleta de colores. ¡Sigue mis pasos!

¿Cómo crear una paleta de colores?

Esta sección detallará los pasos para crear una paleta de colores eficaz. Abordaremos la selección de la jerarquía adecuada, la elección de un modelo de color, la selección de las mejores herramientas, la comprensión de las directrices de accesibilidad y la aplicación de la regla de los cinco pasos para la selección de colores.

1. Define tus colores primarios y secundarios

Piensa en qué colores se identifican con tu producto. Podrías usar como referencia tu logotipo, otros elementos de tu antiguo sistema de diseño o colores que generalmente se identifican con tu marca.

Para este tutorial, utilizaré azul y gris como colores primarios, con verde, rojo y amarillo como colores secundarios (inspirados en los semáforos, un esquema de color estándar en muchos productos).

2. Establece un tono

Disponemos de una gran variedad de modelos de color: RGB, CMYK, Pantone, HSB, HEX y HSL, entre otros. Un aspecto importante de estos modelos es el tono. Comprender y controlar el tono de los colores es crucial para crear una paleta de colores armoniosa (y efectiva).

El HSB es el mejor para una paleta de colores digital. Digo esto porque debes mantener un valor de tono para garantizar la consistencia de tu paleta de colores. Desviarse de ese número podría resultar en tonos que no combinen bien. También puedes terminar con un tono diferente y un color de referencia.

Así que primero, define el color que satisface tus necesidades y verifica su valor de tono.

Este número es ahora tu fuente de verdad; necesitarás usarlo para crear tu escala.

Es posible que sea necesario cambiar el brillo de algunas cortinas para cumplir con los estándares de accesibilidad (que se analizan más adelante en este artículo).

Usaré este azul como ejemplo:

3. Elige una herramienta para crear tu paleta

ColorBox es una herramienta intuitiva para crear paletas. Claro que también tienes otras opciones, como el generador de paletas de colores de Canva, Colorspace, Kroma y Color Hunt.

Decidí usar ColorBox porque podemos tener nuestra paleta lista con solo unos pocos clics, y los códigos importantes a solo un clic de distancia.

Establezca el tono, que en este caso es 214. Además, asegúrese de que los valores inicial y final sean los mismos.

A continuación, configure todas las curvas como lineales para asegurar que el color seleccionado se ubique en el centro de la paleta. Si aplica otros valores, esta posición puede variar y no tendrá suficientes tonos por encima ni por debajo.

Define el número de pasos que quieres. Aquí, usaré once, con blanco al principio, negro al final y nueve tonos entre ellos.

También puedes añadir pequeños escalones si necesitas un tono extra entre ellos.

Por último, utiliza tu código HEX principal (aquí, #2574DB) como referencia principal para forzar la progresión del color a través del mismo valor:

Si habilita la opción, también podrá ver todos los códigos HSB y HEX y las relaciones de contraste de los colores generados.

4. Realizar una comprobación de accesibilidad

Si has estado siguiendo esto, recordarás que tu color principal es el número 5, que se encuentra exactamente en el medio de tu paleta.

Este color juega un papel importante aquí: tienes cinco tonos más claros encima y cinco tonos más oscuros debajo.

Pero debes asegurarte de que este tono cumpla al menos con los estándares de accesibilidad AA. Por lo tanto, prueba este color sobre fondos en blanco y negro. Para ello, puedes usar Adobe Color. Así es como se hace:

Vaya a Herramientas de accesibilidad y seleccione el Comprobador de contraste.

A continuación, pegue su color en el campo de texto y establezca el fondo en blanco.

Nuestra verificación de fondo blanco muestra una proporción de 4,57, lo que significa que pasa por textos y componentes gráficos regulares y grandes y cumple con el estándar AA (nivel WCAG 2.1).

Ahora, hagamos lo mismo con un fondo completamente negro:

La verificación de fondo negro muestra una proporción de 4,6, por lo que estamos bien aquí.

También puedes invertir los colores para volver a verificar las proporciones y asegurarte de que cumplan con los estándares AA en ambos sentidos.

5. La regla de los 5 pasos

Ahora que ha realizado con éxito una verificación de accesibilidad en su color principal, es momento de verificar el contraste entre los otros tonos.

Pero a menudo no es posible realizar esta comprobación en fondos en blanco y negro.

Piense en mi ejemplo: el tono más claro de azul tiene un contraste terrible con el blanco, y el tono más oscuro apenas es visible sobre el negro:

Esto me lleva a la regla de los 5 pasos. Esta regla se trata de combinar tonos claros y oscuros.

En la paleta de colores que acabas de crear, nombra tus colores del 0 al 100. Esta nomenclatura es esencial: facilita la combinación, ya que la regla consiste en combinar colores que están a cinco pasos de distancia (0 – 50, 10 – 60, 20 – 70, 30 – 80, 40 – 90, 50 – 100).

Después de nombrar los colores, verifique si la regla funciona.

Para este ejemplo, elegí los colores 10 y 60 y los pegué en Adobe Color para comprobar la proporción:

La proporción resultó ser 5,08. ¡Fantástico!

Haz lo mismo con los otros pares de tonos, por ejemplo, 20-70, 30-80 y 40-90, y comprueba las proporciones. Estos pares también deberían pasar la prueba.

¿Pero qué pasa si tus pares de colores no pasan la prueba de proporción?

Si esos tonos no pasan la prueba, podrían afectar gravemente la experiencia de usuario (UX) de su producto, causando problemas de legibilidad y accesibilidad que, según el país, podrían llevar su trabajo a demandas.

Para corregir los que no superan la prueba, ve a tu herramienta de diseño y modifica la luminosidad hasta encontrar un tono que supere la prueba de contraste. Puedes optar por oscurecer el color más claro o viceversa; tú decides.

Repita los pasos del dos al cinco para todos los colores que definió al principio.

Aquí está la paleta que creé para mis colores:

La pesadilla con amarillo

El amarillo es el color más difícil con el que trabajar en términos de accesibilidad para los usuarios.

Piénsalo de esta manera: cuando quieres hacerlo más oscuro, no existe el “amarillo oscuro”; se convierte en un tono marrón, óxido o naranja.

Además, este color tiene un contraste terrible con el blanco:

Permítanos ayudarle a encontrar una manera de trabajar con paletas amarillas.

A continuación se muestra una lista de las diferentes opciones que puede elegir:

1. Elimina el amarillo de tu paleta

Dado que el amarillo no cumple con los estándares básicos de accesibilidad, puede intentar eliminarlo de su producto. Esta solución será especialmente fácil si su proyecto de diseño es reciente.

Pero si llevas tiempo trabajando en ello y tu diseño se basa en el esquema de semáforo, ten cuidado. Cambiarlo podría confundir a tus usuarios, ya que estas bobinas de color juegan un papel importante en tu producto.

Si estás dispuesto a cambiarlo, debes entrevistar a tus usuarios y probar tu prototipo con diferentes personas para comprender sus sentimientos sobre esos cambios.

2. Elige un fondo oscuro

Como comentamos antes, el amarillo tiene una mala relación de contraste con el blanco.

Curiosamente, ocurre lo contrario cuando hablamos de su contraste con el negro. Así que, si la paleta de colores de tu marca te permite un fondo oscuro, puedes experimentar fácilmente con diferentes tonos de amarillo. ¡Anímate!

3. Utiliza el amarillo estratégicamente

Puedes optar por usar el amarillo para las advertencias. En estos aspectos de diseño, debes dirigir la atención del usuario al mensaje, no al fondo.

Esto significa que si tu fondo no es accesible, no sería un problema de UX.

4. Agregar un borde

Si necesita que el amarillo sea visible, aplique un borde oscuro al elemento de diseño y luego agregue el mismo color en el borde y el texto.

Por ejemplo, si su fondo es amarillo 30, elija amarillo 80 o superior.

Al hacer esto, se garantiza que todos los colores de ese elemento sean accesibles. Aquí tienes un ejemplo:

Entendiendo los estándares WCAG

Crear tu paleta de colores digital es crucial para garantizar que tu producto cumpla con los estándares de accesibilidad. La accesibilidad mejora la experiencia del usuario para todos, ya sea una rampa en una acera, una paleta de colores para un producto digital o dispositivos que ayudan a personas con discapacidad.

Al desarrollar su paleta de colores, es importante comprender las pautas WCAG 2.0 , que clasifican la accesibilidad en tres niveles:

• Nivel A: El nivel básico, que aborda los requisitos mínimos de accesibilidad, aunque a menudo deja problemas más grandes sin resolver.
• Nivel AA: Un nivel intermedio comúnmente adoptado por las principales empresas. Por ejemplo, seguir directrices como Material Design de Google garantiza que la elección de colores cumpla con los criterios esenciales de accesibilidad.
• Nivel AAA: El nivel más alto, que incorpora los requisitos más avanzados y cubre consideraciones integrales de diseño y desarrollo.

Una paleta de colores cuidadosamente diseñada que cumple con los estándares de Nivel AA significa que su producto cumple con las buenas prácticas de accesibilidad. Alcanzar el Nivel AAA indica que su paleta, y su diseño en general, superan los requisitos habituales, brindando una experiencia de usuario excepcional.

Sin embargo, recuerda que una buena paleta de colores es solo una parte del rompecabezas de la accesibilidad. Si bien es esencial, la accesibilidad integral implica muchos factores más allá de la elección de colores.

Al centrarse en la creación de una paleta de colores accesible como paso fundamental, prepara el escenario para diseñar productos digitales que sean inclusivos, utilizables y agradables para todos los usuarios.

Si quieres conocer otros artículos parecidos a Creating your own color palette for your design project puedes visitar la categoría Guias.