Generador de paletas de color
Genera paletas armónicas desde un color base con reglas complementarias, analogas, triadicas y monocromaticas.
Cómo ayuda
Genera paletas armónicas desde un color base con reglas complementarias, analogas, triadicas y monocromaticas.
- 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 extraido de una foto, o simplemente una idea — y Chromaforge calcula automaticamente las variantes armónicas basandose 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 fürte, ideal para CTA sobre fondos neutros. Usarlo con moderación: un par complementario puro cansa la vista en áreas grandes.
Analogo: 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 tension visual.
Triadico: 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: dificil equivocarse, facil 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 triadico te da tres opciones probadas en 10 segundos.
- Landing page: usa una paleta analoga para fondo, secciones y cards — sin conflictos, maxima coherencia.
- Sistema de diseño: genera la escala monocromatica y tendrás de inmediato los tonos para texto, bordes, fondos y estados hover/active.
- Ilustracion UI: la paleta complementaria dividida (split-complementary) reduce la tension del complementario puro manteniendo la energia 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 armonica y paleta generativa?
Una paleta armonica usa reglas de color (complementario, triadico, etc.) para garantizar relaciones visualmente agradables. Una paleta generativa parte de datos o algoritmos sin vinculos esteticos precisos. Para interfaces digitales, la armonica es casi siempre la eleccion correcta.
¿Como elijo el color base si parto de cero?
Considera el sector (azul para finanzas/tech, verde para salud/naturaleza, naranja para energia/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.
¿La paleta generada funciona en dark mode?
No automaticamente. En dark mode, los tonos medios suelen ser insuficientes como texto (contraste demasiado bajo) y los tonos claros se usan como texto en vez de como fondo. Despues de generar la paleta, verifica cada par con el comprobador de contraste WCAG.
¿Puedo usar la paleta exportada directamente en Figma?
Sí. Chromaforge exporta en formato JSON compatible con Tokens Studio para Figma (antes Figma Tokens). Tambi?n puedes copiar el bloque CSS con las custom properties y usarlo directamente en un archivo de variables del proyecto.