Herramientas de Diseño gratis

¿Cuál necesitas?

Cuatro de estas son sobre color y cuatro sobre las formas y medidas que lo rodean. Del lado del color, el conversor mueve un valor entre hex, RGB y HSL, el generador de paletas arma un conjunto que se sostiene, y el verificador de contraste es el que decide si algo de eso se puede leer. Pasa el verificador antes de comprometerte con una paleta y no después, porque un par que falla en 4,5:1 suele fallar por suficiente margen como para que ningún ajuste salve los dos colores.

Del otro lado, los generadores de degradado, sombra y borde redondeado existen porque esas tres propiedades tienen una sintaxis fácil de leer y tediosa de escribir de memoria. La calculadora de relación de aspecto y el conversor de unidades resuelven cuentas que aparecen todo el tiempo y que nadie disfruta hacer dos veces.

Lo que esta categoría no hace

Ninguna de estas tiene una opinión sobre si un diseño es bueno. El generador de paletas produce combinaciones relacionadas matemáticamente, que no es lo mismo que apropiadas para tu tema, y el verificador de contraste impone un piso, no una meta. Pasar WCAG AA significa que el texto es legible, no que sea cómodo de leer durante mil palabras.

Tampoco hay edición de imágenes ni herramienta de maquetación. Estas producen valores que pegas en el CSS, y los artículos de diseño cubren qué controla cada uno de esos valores.

Preguntas frecuentes

¿Qué relación de contraste necesito para cumplir WCAG?

Para texto de cuerpo normal, 4,5:1 contra su fondo cumple AA y 7:1 cumple AAA. El texto grande, que es de 24px para arriba o 18,66px en negrita, necesita 3:1 para AA y 4,5:1 para AAA. Los componentes de interfaz y los gráficos con significado necesitan 3:1. La relación va de 1:1 a un máximo de 21:1, que es negro puro sobre blanco puro.

¿Conviene escribir los colores en hex, RGB o HSL?

Describen los mismos colores, así que depende de qué estés haciendo. El hex es compacto y universal. RGB es como trabaja la pantalla. HSL es el que vale usar cuando necesitas generar una variación, porque aclarar algo o bajarle la saturación es cambiar un número en vez de tres.

¿Por qué mi degradado tiene una banda gris en el medio?

Porque el navegador interpola entre los dos colores en sRGB, y el camino entre dos tonos saturados pasa por un medio desaturado. Agregar una parada de color intermedia en el punto medio, o elegir dos tonos más cercanos entre sí, evita esa zona muerta.