Generador de sistema de color: un hex, cuatro formatos de salida
Pega un hex de marca. Obtienes una escala de 11 pasos, tokens semánticos, emparejamiento dark-mode, y salida lista para copiar a CSS, Tailwind, SCSS y Figma Tokens.
Los diseñadores re-derivan la misma escala de color desde un hex de marca en cada proyecto nuevo. La aritmética es mecánica — Tailwind la tiene, Material la tiene, cualquier design system la tiene — pero la superficie para copiar entre ellos es molesta. Así que construimos una herramienta de un solo archivo que corre las matemáticas una vez y vuelca todos los formatos que razonablemente le entregarías a un developer.
Qué te da
- Escala de 11 pasos (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) — anclada a objetivos de luminosidad perceptualmente uniformes
- Tokens semánticos — success, warning, danger, info — derivados de rotaciones de tono configurables alrededor de tu marca
- Emparejamiento dark-mode — mapeo automático de superficie/foreground que cambia con
prefers-color-scheme - Cuatro formatos de salida: CSS custom properties, config Tailwind, variables SCSS, JSON de Figma Tokens Studio
Cómo funciona
La escala vive en espacio HSL. La luminosidad está anclada a una escalera elegida a mano (97, 93, 86, 76, 64, 50, 42, 34, 26, 17, 10) que lee uniformemente en todos los tonos — fruto de unos miles de horas mirando design systems y ajustando hasta que naranja, morado, azul, verde y rojo se sintieran todos iguales en el paso 500.
La saturación baja ligeramente en los extremos. Los tonos más claros se mantienen legibles como papel, los más oscuros no llegan a fluorescente. Sin ese decaimiento, un naranja saturado en el paso 950 parece un cono de tráfico en sombra en lugar de un color de marca en su lectura más baja.
Los tokens semánticos derivan rotando el tono de la marca. El spread default es 120° — lo bastante lejos para que success y danger se sientan distintos, lo bastante cerca para que sigan sintiéndose una familia. Warning queda a 45° de la marca. Info queda opuesto a success. Los cuatro respetan el envelope de saturación de la marca.
Por qué la construimos
Seguíamos abriendo un archivo Figma nuevo, arrastrando la escala slate de Tailwind, re-tintando, exportando, pegando en el repo del developer, viendo que se veía mal en el design system, volviendo a Figma. El loop costaba dos horas por proyecto. Esta herramienta corre el loop en tres segundos — y vuelca cuatro formatos a la vez para que nadie pregunte "¿lo tienes en tokens Figma?"
Úsala
Es un solo archivo HTML. Ábrelo local o usa la versión live. Pega el hex de tu marca, nómbrale el prefijo CSS, clica cualquier swatch para copiar su hex, copia la salida formateada, pega en tu stack. Abrir en GitHub →
Advertencias
La luminosidad perceptual en HSL es aproximada. Para marcas que dependen de contraste casi matemático para daltonismo (dashboards financieros, interfaces accessibility-first), usa herramientas APCA o CIELAB encima de esta salida. La escala aquí es un punto de partida que es casi siempre mejor que lo que construirías a mano en veinte minutos — pero no sustituye una auditoría de accesibilidad en WCAG AAA.