Generador de paletas de color
Genera paletas armónicas desde un color base con reglas complementarias, análogas, triádicas y monocromáticas.
Cómo ayuda
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona el generador de paletas
Parte de un color base — tu color de marca, un hex extraído de una foto, o simplemente una idea — y Chromoforge calcula automáticamente las variantes armónicas basándose en las relaciones angulares en la rueda de colores HSL.
Complementario: el color exactamente opuesto a 180° en el círculo cromático. Crea contraste fuerte, ideal para CTA sobre fondos neutros. Usarlo con moderación: un par complementario puro cansa la vista en áreas grandes.
Análogo: tres colores adyacentes (±30° y ±60°). Resultado natural y relajante, típico de diseños inspirados en la naturaleza. Funciona bien para interfaces de lectura larga donde se busca poca tensión visual.
Triádico: tres colores equidistantes a 120° entre si. Paleta viva con buen equilibrio. El truco es usar uno como dominante (60% de las superficies), otro como secundario (30%) y el tercero solo como acento (10%).
Monocromático: variantes en luminosidad y saturación del mismo hue. Es el enfoque más seguro para quien no quiere arriesgar: difícil equivocarse, fácil escalar a sistemas de diseño complejos con tonos 50-950.
Ejemplos prácticos
- Rebranding: tienes el color primario aprobado por el cliente y necesitas secundario y acento. El generador triádico te da tres opciones probadas en 10 segundos.
- Landing page: usa una paleta análoga para fondo, secciones y cards — sin conflictos, máxima coherencia.
- Sistema de diseño: genera la escala monocromática y tendrás de inmediato los tonos para texto, bordes, fondos y estados hover/active.
- Ilustración UI: la paleta complementaria dividida (split-complementary) reduce la tensión del complementario puro manteniendo la energía visual.
FAQ — Paletas de color
¿Cuántos colores debe tener una paleta UI?
Una paleta operativa para UI contiene normalmente 1-2 colores de marca, 1 color de acento, más una escala neutra (grises) con 6-10 pasos. Más de 2-3 colores de marca dificulta mantener la coherencia. La escala neutra es la parte más usada y la más infravalorada.
¿Cuál es la diferencia entre paleta armónica y paleta generativa?
Una paleta armónica usa reglas de color (complementario, triádico, etc.) para garantizar relaciones visualmente agradables. Una paleta generativa parte de datos o algoritmos sin vínculos estéticos precisos. Para interfaces digitales, la armónica es casi siempre la elección correcta.
¿Cómo elijo el color base si parto de cero?
Considera el sector (azul para finanzas/tech, verde para salud/naturaleza, naranja para energía/creatividad), luego ajusta mirando a los competidores para diferenciarte ligeramente sin salir de las expectativas del sector. Finalmente prueba la variante oscura del color: debe funcionar como color de texto sobre fondo blanco con ratio 4.5:1.