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 numericas 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

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

Generador de paletasCrea design tokens de color desde una paleta y exporta CSS variables, SCSS maps, JSON y Tailwind.Checker WCAGCrea design tokens de color desde una paleta y exporta CSS variables, SCSS maps, JSON y Tailwind.Extractor de imágenesCrea design tokens de color desde una paleta y exporta CSS variables, SCSS maps, JSON y Tailwind.
¿Puedo usarlo con el generador principal?

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