# Generador de cascada de color tokens Convierte un hex principal en escalas de color, tokens semanticos, variables CSS y JSON de Style Dictionary > Página canónica: https://elysiatools.com/es/tools/color-token-cascade-generator - **Categoría:** Design - **Palabras clave:** design token, color, css variables, style dictionary ## Descripción general 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 ## Entradas - **Hex principal** (text): #3b82f6 - **Estrategia de acento** (select) - **Incluir escala neutra** (checkbox) ## Cuándo usarlo - Al iniciar un nuevo proyecto de diseño que requiere una paleta de colores coherente, accesible y escalable. - Para estandarizar los colores de una interfaz mediante tokens semánticos y variables CSS que faciliten el mantenimiento. - Cuando se necesita exportar definiciones de color compatibles con Style Dictionary para flujos de trabajo multiplataforma. ## Cómo funciona - Introduce el código hexadecimal del color principal que definirá la identidad de tu marca o interfaz. - Selecciona una estrategia de acento (complementaria, análoga o dividida) para generar colores secundarios armoniosos automáticamente. - Activa la escala neutra para obtener tonos de gris equilibrados, ideales para textos, bordes y superficies. - Exporta el resultado como variables CSS para desarrollo web o en formato JSON para integraciones con Style Dictionary. ## Casos de uso - Creación de una guía de estilos desde cero para una startup que busca consistencia visual en sus productos. - Migración de colores estáticos a un sistema de tokens dinámico en aplicaciones modernas de React, Vue o Angular. - Configuración de temas visuales complejos utilizando tokens semánticos como text-muted o bg-canvas para mejorar la legibilidad. ## Preguntas frecuentes ### ¿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. ## Herramientas relacionadas - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Generador de Organigrama](https://elysiatools.com/es/tools/org-chart-maker): Genera un organigrama vertical con nombres y cargos a partir de datos jerárquicos JSON - [Convertidor de Escala de Grises](https://elysiatools.com/es/tools/color-grayscale-converter): Convertir colores a escala de grises con múltiples métodos de conversión y control de intensidad - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano. - [Exportador de Tokens de Figma](https://elysiatools.com/es/tools/figma-tokens-export): Pega un JSON de variables de Figma / Tokens Studio y exporta a Tailwind, variables CSS shadcn, Style Dictionary o SCSS. Conserva tokens de color, espaciado y fuente con inferencia de tipos. - [Generador PDF de entrenamiento fitness](https://elysiatools.com/es/tools/fitness-workout-pdf-generator): Genera un PDF imprimible de entrenamiento desde JSON o CSV con tablas, casillas de progreso y QR opcionales - [Generador de JSON-LD desde CSV](https://elysiatools.com/es/tools/json-ld-generator-from-csv): Convierte filas de CSV o Excel en JSON-LD de Schema.org para articulos, productos o eventos con salida lista para validacion SEO ## Ejemplos - [Ejemplos de Códigos de Color](https://elysiatools.com/es/samples/color-code): Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación - [Muestras Avanzadas de Grafana](https://elysiatools.com/es/samples/grafana-samples): Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins - [Ejemplos de Códigos QR](https://elysiatools.com/es/samples/qrcode-samples): Imágenes de códigos QR de muestra para probar herramientas de lectura y generación de códigos QR - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato ## Contenido relacionado - [Flujo de sistema de color y efectos CSS](https://elysiatools.com/es/hubs/design-generate): Extrae una paleta, construye relaciones accesibles, genera tokens y aplica efectos CSS coherentes en estados reales de interfaz.