Generar paleta de colores a partir de un color

Generar una paleta de colores a partir de un color es partir de un hex de marca y obtener escalas utilizables: fondos, bordes, botones y texto, en claro y en oscuro. No es sacar cinco muestras «bonitas» sueltas. La herramienta para hacerlo en el navegador, sin registro, es Converly Colors.

El recorrido completo de la herramienta (fuentes, Design.md, exportar SVG) está en el generador de paletas de Converly. Esta página es el caso concreto: tienes un solo color.

Resumen

• Un color de marca no es una paleta. Hace falta escala (pasos) y roles (fondo, borde, sólido, texto).
• Entras en Converly Colors, pegas el hex en Color principal y revisas claro y oscuro.
• La escala sigue el sistema de 12 pasos tipo Radix. Cada muestra enseña contraste APCA.
• Exportas CSS, enlace o Design.md. El enlace restaura la paleta.
• Sirve para una web personalizada o un desarrollo a medida.

Por qué un color no basta

El hex del logo sirve para el botón sólido. No sirve, tal cual, para:

• el fondo de una tarjeta,
• el borde en hover,
• el texto sobre ese fondo,
• el mismo botón en modo oscuro.

Si copias el hex en todos los sitios, o el contraste falla o la interfaz queda plana. Generar la paleta a partir de ese color reparte el matiz en pasos: los claros para superficies, los medios para bordes, el paso sólido para la acción, los oscuros para texto.

Converly Colors usa tres semillas (principal, neutro, fondo), no una sola muestra final. Tú llegas con un color; los otros dos se ajustan si la interfaz es cálida, fría o neutra. Detalle de campos en la guía del generador.

Pasos

1. Abre Converly Colors.
2. En modo Claro, pega el hex de marca en Color principal (o usa el selector).
3. Deja el neutro en un gris cercano a tu marca, o cámbialo si los fondos se ven azulados o verdosos de más.
4. Ajusta Fondo solo si no quieres blanco puro.
5. Alterna Oscuro. Por defecto el oscuro se deriva del claro. Si un campo en oscuro no te vale, cámbialo: ese campo queda fijo.
6. Mira la vista previa (botones, inputs, texto), no solo las tiras de color.
7. Exportar: enlace para el equipo, CSS para el proyecto, o Design.md si documentas el sistema. El menú y el contraste por paso están explicados en escalas y exportación.

No hace falta cuenta. La página de la herramienta no se indexa; esta guía sí, para que llegues al generador con el color delante.

Qué sale

Eso es material de diseño web personalizado. Si además hay que construir la web, el encargo es desarrollo a medida.

Errores

• Quedarte con cinco colores de un generador decorativo y no tener paso de texto.
• Usar el color de marca como fondo de página y el blanco como único texto, sin medir contraste.
• Diseñar solo en claro y descubrir en oscuro que el botón desaparece.
• Exportar y luego «retocar un gris» en cada componente. La paleta deja de ser una.
• Confundir paleta con identidad. El color no dice qué vendes; la página sí. La paleta solo evita que cada pantalla improvise.

Preguntas frecuentes

¿Puedo generar la paleta si solo tengo el color del logo?

Sí. Ese hex es el color principal. Entra en Converly Colors, pégalo y revisa la preview. El neutro y el fondo se afinan en el mismo panel.

¿La herramienta elige la paleta por armonías (complementario, análogo)?

No es un generador de armonías decorativas. Construye escalas de interfaz a partir de las semillas, con roles de UI y contraste. Si buscabas cinco muestras para un moodboard, esto va un paso más allá: colores que se pueden implementar.

¿Es gratis?

Sí. Sin registro. El uso está en Converly Colors.

¿Sirve para una web ya publicada?

Sirve para fijar el sistema y exportar CSS. Aplicarlo en una web hecha con plantilla depende de si puedes cambiar variables o si el theme pisa los colores. Si cada pantalla tiene hex sueltos, un diseño a medida evita seguir parcheando.