Herramientas gratuitas para elegir los colores de tu web

Adobe Color CC

La gente lo llama Adobe Kuler, hace unos años se renombró como Adobe Color CC. Es una de las herramientas gratuitas de Adobe donde cualquiera puede generar esquemas de color desde cero. Podemos elegir entre muchas paletas de color diferentes, donde seguro encontraremos la que mejor se adapte a nuestras necesidades. También podemos guardar los diferentes códigos hexadecimales y RGB, o crear una rueda basada en una imagen previamente elegida.

Paletton

Paletton es un clásico que todos los diseñadores web deberían conocer. Ha existido durante años y sigue siendo un sitio de referencia. Simplemente hay que añadir un color base y dejar que la aplicación haga el resto. Podemos escoger entre diferentes relaciones de color y cómo deberían aparecer en el diseño. Y para cada elección de color, encontrará ligeras variaciones con contraste variable. De esta manera, podemos completar una paleta con colores similares.

Canva

Cuando añadimos un color, la web nos ofrece una detallada descripción del mismo. A lo que hay que añadir una completa paleta con diferentes tonalidades. Además de diversas combinaciones de color que podemos usar. Canva es instructivo a la vez que útil.

Coolors

Coolors es un gran generador de paletas de colores. El verdadero valor de está en la aplicación web es que genera automáticamente esquemas de color de manera prácticamente automática. Podemos mezclar y combinar colores, cambiar configuraciones, hacer ajustes para el daltonismo, o aleatorizar nuestros propios esquemas de acuerdo con ciertos criterios. También está disponible como extensión para Chrome, o incluso como app para iOS.

¿De qué nos sirve que nuestra web tenga los colores perfectos, si el texto apenas puede leerse?

Color Safe

Color Safe es una herramienta que permite a los diseñadores aprovechar las paletas de colores accesibles según las pautas de las WCAG. Para usarlo, solo hay que seleccionar el color de fondo, la tipografía, el tamaño de fuente, su peso y el estándar WCAG. A continuación, elegimos un color para el texto. Podemos previsualizar el color del texto en la barra de herramientas superior haciendo clic en un cuadro y seleccionar el valor HEX o RGB en la barra de herramientas para copiarlo al portapapeles.

Accessible Colors

Accessible Colors funciona de una forma muy parecida a Color Safe, aunque con una interfaz más simple. Algunos agradecerán esto. En una linea, insertaremos los datos necesarios: color, tamaño y la tipografía. En otra el color de fondo. Y eso es todo. La web nos devolverá los resultados según queremos que sea AA o AAA, siguiendo las directrices de la WCAG.