Herramienta de color práctica

Generador de design tokens

Crea design tokens de color desde una paleta y exporta CSS variables, SCSS maps, JSON y Tailwind.

Abrir en la herramienta principalVolver a la herramienta
EnglishItalianoEspañolFrançaisDeutsch

Qué ofrece esta página

  • Convierte HEX en tokens con nombre.
  • Usa escalas numéricas para shades y nombres semánticos para roles UI.
  • Exporta JSON para mover tokens entre design y build.

Bueno para

  • Design systems
  • Handoff tokens
  • Equipos frontend

Cómo usarlo

Generador de paletasCrea paletas accesibles, comprueba contraste WCAG, extrae colores de imágenes y exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.Checker WCAGComprueba el contraste entre texto y fondo según WCAG AA y AAA, prueba pares reales y elige combinaciones legibles.Extractor de imágenesExtrae colores dominantes de imágenes PNG, JPG o WebP en el navegador y conviértelos en paletas y tokens exportables.
¿Puedo usarlo con el generador principal?

Sí. Empieza aquí, abre la herramienta principal de Chromoforge con el mismo color base y exporta la paleta.

¿Qué diferencia hay entre tokens primitivos y semánticos?

Los primitivos nombran valores en bruto, como blue-500 o gray-900. Los tokens semánticos nombran la intención, como color-action-background o color-text-muted, y apuntan a un primitivo. Los componentes solo deberían consumir tokens semánticos, así un rebranding o un tema nuevo cambia una capa de indirección en lugar de cada componente.

¿Qué formato de exportación conviene guardar en el repositorio?

Custom properties CSS cuando el tema debe cambiar en tiempo de ejecución en el navegador. JSON cuando los tokens alimentan una tubería multiplataforma como Style Dictionary y también deben llegar a iOS o Android. Variables SCSS solo si todo se resuelve en compilación y no hace falta tematizar en runtime.