Generador de paletas de colores: herramienta gratuita en Converly

¿Necesitas un sistema de diseño coherente —colores, tipografía y bordes— para modo claro y oscuro sin pelearte con decenas de hex a mano? Converly Colors es un generador completo en converly.es/colors/custom: paletas personalizadas, catálogo de más de 900 fuentes de Google, vista previa en vivo, exportación a CSS y Design.md. Gratis y sin registro.

Navegación rápida

Qué incluye | Paleta personalizada | Tipografías | Design.md | Compartir por URL | Exportar | Escalas y muestras | Casos de uso | FAQ

Qué incluye

Todo vive en una sola herramienta: converly.es/colors/custom.

Características clave:

• Escala de 12 pasos calibrada por rol (fondo, hover, borde, sólido, texto accesible), basada en el sistema Radix.
• Modo claro y oscuro con escalas independientes; el oscuro se deriva del claro hasta que lo personalices.
• Contraste APCA en cada muestra de color, junto con valores hex, alpha y Display P3.
• Design.md en inglés, listo para pegar en tu repo o pasárselo a una IA de código.
• Enlace compartible que restaura colores, tipografías, radio de bordes y apariencia.
• Navbar, tipografía y footer de Converly integrados en la herramienta.

Paleta personalizada

Abre converly.es/colors/custom cuando tengas un color de marca y quieras el resto del sistema generado automáticamente.

Tres campos de color controlan cada apariencia:

Light y dark inteligente

Por defecto, al editar en modo Claro, el generador calcula automáticamente los equivalentes en Oscuro. Si cambias un valor estando en modo oscuro, ese campo queda personalizado de forma independiente.

Alterna entre Claro y Oscuro con el selector superior para revisar la preview con tu paleta aplicada en tiempo real.

Radio de bordes

El slider Radio de bordes (0–48 px, o redondo completo) actualiza la preview al instante: botones, tarjetas, inputs y chips reflejan el radio elegido. Los presets rápidos (0, 4, 8, 12, 16) aceleran la decisión.

Pasos rápidos:

1. Entra en converly.es/colors/custom.
2. Pega el hex de tu marca en Color principal (o usa el selector de color).
3. Ajusta Color secundario si tu interfaz es cálida o fría.
4. Configura el radio de bordes según tu estilo (sharp, suave o pill).
5. Alterna Claro / Oscuro y revisa la preview inferior.
6. Pulsa Exportar → elige enlace, Design.md o CSS.

Tipografías

El panel Catálogo de fuentes integra más de 900 familias de Google Fonts, organizadas por categoría (Sans Serif, Serif, Display, Monospace, Handwriting).

Tres roles tipográficos, asignados en orden o de forma individual:

Busca por nombre, filtra por categoría y haz clic en una fuente para asignarla. La vista previa lateral muestra la fuente con texto de ejemplo. Solo se descargan las familias que seleccionas — no las 900 de golpe.

Las tipografías elegidas se incluyen en el enlace compartible y en el Design.md exportado, con variables CSS (--rc-font-heading, --rc-font-labels, --rc-font-body) y el <link> de Google Fonts listo para copiar.

Design.md

Design.md es un archivo Markdown que documenta las decisiones de diseño de tu proyecto: colores, tipografía, bordes, botones y variables CSS. Converly genera uno adaptado a tu paleta actual. Si es la primera vez que oyes hablar del formato, empieza por ¿Qué es design.md?.

El archivo exportado está en inglés e incluye:

• Semillas de color y tabla de colores principales (light/dark)
• Escalas completas de acento y gris (pasos 1–12 con uso recomendado)
• Tokens semánticos (--{accent}-contrast, --gray-surface, etc.)
• Sección de tipografía con roles, selectores CSS y enlace de Google Fonts
• Guía de bordes, botones primarios/secundarios y bloque CSS listo para :root / .dark

Desde el menú Exportar puedes copiar o descargar Design.md. Si compartes la URL de tu paleta, quien la abra podrá exportar el mismo archivo con la configuración exacta.

Compartir por URL

Cada cambio actualiza la URL del navegador (con un breve debounce). Puedes enviar ese enlace a un compañero de diseño o guardarlo en Notion: al abrirlo, se restaura la paleta tal cual.

Formato de los parámetros (hex sin #):

/colors/custom?accent-light=3D63DD&accent-dark=3D63DD&gray-light=8B8D98&gray-dark=8B8D98&bg-light=FFFFFF&bg-dark=111111&radius=12&font-heading=Inter&font-body=Source+Sans+3

Los valores por defecto se omiten de la URL para mantenerla corta. En Exportar → Copiar enlace para compartir obtienes el enlace listo.

Exportar

El menú Exportar reúne todas las opciones de salida:

Pega las variables CSS en tu :root y .dark:

:root {
  --blue-1: /* light accent-1 */;
  --blue-9: /* botón sólido */;
  --gray-6: /* borde */;
  --gray-12: /* texto principal */;
  --radius: 8px;
}

.dark {
  --blue-1: /* dark accent-1 */;
  /* ... */
}

Con Tailwind v4 puedes mapear estos tokens en @theme o referenciarlos con var(--blue-9) en tus utilidades.

Escalas y muestras

Debajo de los controles verás la rejilla de escalas de acento y gris. Cada fila muestra los 12 pasos con etiquetas de uso:

Haz clic en cualquier muestra para abrir el diálogo con:

• Uso y combina con (guía de pares recomendados)
• Contraste APCA respecto al fondo de la paleta
• Valores hex, alpha, Display P3 y variable CSS
• Copia con un clic de cada valor

La preview inferior muestra componentes reales — búsqueda, botones primarios y secundarios, formulario de registro, tabs, checkboxes, blockquotes con hover cards y lista de tareas — todos renderizados con tu paleta, tipografías y radio de bordes.

Casos de uso

Proyecto nuevo. Define accent + gray + tipografías en el generador, exporta Design.md y comparte la URL con el equipo antes de tocar Figma.

Dark mode que «no convence». Compara tu implementación actual con los pasos 6–8 (bordes) y 1–2 (fondos) que propone la herramienta. El modo oscuro derivado automáticamente suele ser un buen punto de partida; personalízalo solo donde haga falta.

Handoff diseño → desarrollo. Una URL con la paleta acordada —o un Design.md— evita capturas de pantalla y hojas de Excel con hex sueltos.

Prototipos con IA. Pega el Design.md en Cursor, v0 o similar: la IA recibe colores, tipografías, bordes y variables CSS sin ambigüedad. Si necesitas contexto sobre el formato, lee ¿Qué es design.md?. Combínalo con mejora de prototipos con Skills y Gemini para el layout.

Sistemas de diseño ligeros. Si no necesitas Figma Tokens ni Style Dictionary, Converly Colors genera un subset práctico: escalas, semántica, tipografía y CSS exportable en minutos.

Preguntas frecuentes

¿Es gratis?

Sí. No hace falta cuenta ni suscripción. Abre converly.es/colors/custom y úsala cuando quieras.

¿Dónde está el catálogo de escalas (/colors)?

La herramienta se ha unificado en /colors/custom. El explorador de 31 escalas predefinidas ya no está disponible como ruta separada; el generador personalizado cubre el flujo completo de creación y exportación.

¿Funciona en cualquier stack?

Sí. Las variables CSS y el Design.md valen para React, Vue, HTML estático, WordPress o lo que uses. No necesitas instalar nada extra.

¿Puedo compartir la paleta con mi equipo?

Sí. Copia la URL desde Exportar → Copiar enlace para compartir. Quien la abra verá exactamente la misma configuración: colores, tipografías, radio y modo de vista previa.

¿Las fuentes de Google ralentizan la página?

No. El catálogo carga un índice ligero de nombres al llegar al panel de fuentes. Las familias de Google Fonts solo se descargan cuando las seleccionas para preview o asignación.

¿Sustituye a un diseñador?

No. Te ahorra horas ajustando tonos, tipografías y tokens. La identidad visual (ilustración, motion, voz de marca) sigue siendo decisión de diseño.

¿Cumple accesibilidad?

Los pasos 11–12 están pensados para texto legible y cada muestra muestra contraste APCA. Valida combinaciones concretas (texto sobre imagen, botones ghost) con Lighthouse o WebAIM Contrast Checker.

---

Prueba la herramienta: converly.es/colors/custom

Lecturas relacionadas

• ¿Qué es design.md? Guía para sistemas de diseño con IA
• Mejora prototipos de IA con Skills, prompts y Gemini
• ¿Qué es el prompt engineering?

Última actualización: julio de 2026.