¿Qué formatos de salida ofrece la herramienta?

Genera variables CSS nativas para hojas de estilo y archivos JSON estructurados para Style Dictionary.

¿Qué es una estrategia de acento?

Es el método matemático basado en el círculo cromático para calcular colores secundarios que armonicen con tu color principal.

¿La escala neutra es personalizable?

La herramienta genera automáticamente una escala de grises equilibrada basada en la luminosidad para complementar tus colores de marca.

¿Puedo usar estos tokens en Figma?

Sí, puedes copiar los valores hexadecimales generados o importar el JSON utilizando plugins de gestión de tokens de diseño.

¿Qué niveles de escala se generan?

Se crea una progresión estándar de 10 niveles, desde el 50 (más claro) hasta el 900 (más oscuro), para cada color.

Elysia Tools

Navegación

Design

Generador de cascada de color tokens

Convierte un hex principal en escalas de color, tokens semanticos, variables CSS y JSON de Style Dictionary

Detalles

Qué te ayuda a hacer esta herramienta

Introduce un hex principal y la herramienta derivara escalas de color de marca, acento y neutros opcionales, listas para un sistema de diseno.

Incluye:

escalas primary-50 a primary-900
escalas accent-50 a accent-900
neutrales opcionales
tokens semanticos como text-muted y bg-canvas
variables CSS y JSON de Style Dictionary

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Generador de cascada de color tokens

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Sistema de diseño para plataforma SaaS

2. Paleta armónica para portafolio creativo

Preguntas frecuentes

Ejemplos de Códigos de Color

Muestras Avanzadas de Grafana

Ejemplos de Códigos QR

Ejemplos de Procesamiento de Imágenes Web Python

De paleta de imagen a design tokens

Generador de Organigrama

Convertidor de Escala de Grises

Generador de Data URI

Generadores de efectos CSS, paletas y tokens de diseno

Herramientas de intercambio JSON y traduccion de formatos

Herramientas de inspeccion, diff y transformacion JSON

Generadores de esquemas JSON, datos mock y fixtures de API