Diseñar una interfaz
Color, contraste y CSS accesible, listo para pegar.
Diseñar una UI empieza por el color y termina en detalles como sombras y favicon. Este flujo encadena las herramientas visuales con foco en accesibilidad —incluye el verificador de contraste WCAG— para que no elijas colores lindos que después no se leen. Todo devuelve valores listos para pegar en tu CSS.
- Creá la paleta 🎨 Generador de paletas de colores Generá paletas de colores armoniosas en un click. Esquemas análogos, complementarios, triádicos y monocromáticos con códigos HEX, RGB y HSL listos para copiar.
- Verificá el contraste ⚖️ Verificador de contraste de colores Verificá si tu combinación de texto y fondo cumple WCAG 2.1 AA o AAA. Calculá el ratio de contraste exacto con preview en vivo, gratis y sin registro.
- Mezclá y ajustá colores ⚙️ Mezclador de dos colores Mezclá dos colores en proporciones distintas para obtener tonos intermedios. Útil para gradientes y paletas.
- Generá gradientes CSS 🌈 Generador de gradientes CSS Creá gradientes CSS lineales, radiales y cónicos con preview en vivo. Copiá el código listo para pegar, soporte de múltiples puntos de color y backgrounds modernos.
- Creá sombras CSS 🌑 Generador de box-shadow CSS Diseñá sombras CSS con vista previa en vivo: desplazamiento, desenfoque, expansión, color y sombras internas. Copiá el código box-shadow listo para pegar. 100% gratis.
- Extraé colores de una imagen 🎯 Extractor de colores de imagen Subí una imagen y obtené su paleta de colores dominantes, o hacé click en cualquier pixel para su HEX exacto. Nada se sube a ningún servidor. Gratis.
- Generá el favicon ⚙️ Generador de favicon (texto) gratis Generá un favicon a partir de texto: elegí letra, color de fondo y color de fuente. Descargá un PNG cuadrado listo para usar en cualquier sitio.
Resultado: Construís una paleta, verificás su contraste, generás gradientes y sombras CSS, extraés colores de una imagen y creás el favicon.