# Variables CSS

Explora 8 herramientas para trabajar con Variables CSS desde el navegador. El texto no se guarda y los archivos subidos se eliminan tras 6 horas.

> Página canónica: https://elysiatools.com/es/tags/css-variables

## Descripción general

Esta colección reúne 8 herramientas para trabajar con Variables CSS en distintos flujos de desarrollo y edición de estilos, sin necesidad de instalar software.

## Preguntas frecuentes

### ¿Qué puedo hacer con las herramientas de Variables CSS?

Puedes trabajar con Variables CSS mediante las herramientas disponibles en esta categoría, directamente desde la interfaz del navegador.

### ¿Necesito instalar algún programa?

No. Puedes usar estas herramientas desde el navegador sin instalar software adicional.

### ¿Cómo se procesan mis datos?

Operas las herramientas desde el navegador, pero el procesamiento se realiza en los servidores de Elysia Tools. El texto no se guarda y los archivos subidos se eliminan automáticamente después de 6 horas.

## Herramientas

- [Extractor de paleta desde URL de imagen](https://elysiatools.com/es/tools/color-palette-extractor-from-image-url): Obtiene una URL de imagen remota, extrae colores dominantes, exporta archivos de paleta listos para codigo y revisa el contraste
- [Generador de cascada de color tokens](https://elysiatools.com/es/tools/color-token-cascade-generator): Convierte un hex principal en escalas de color, tokens semanticos, variables CSS y JSON de Style Dictionary
- [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.
- [Extractor de paleta de color desde imagen](https://elysiatools.com/es/tools/image-color-palette-extractor): Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste
- [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
- [Playground de valores arbitrarios de Tailwind](https://elysiatools.com/es/tools/tailwind-arbitrary-value-playground): Pega clases de Tailwind que usan valores arbitrarios (w-\[137px\], text-\[#bada55\], grid-cols-\[1fr_2fr\], \[mask-type:luminance\]) e inspecciona el CSS generado, con una vista previa visual en vivo, detección de pistas de tipo de dato y una explicación de cada traducción. Útil para depurar calc(), variables CSS y valores puntuales fuera de la escala de tokens.
- [Sincronizador de paleta Tailwind](https://elysiatools.com/es/tools/tailwind-color-palette-sync): Introduce HEX, elige esquema de nombres (escala 50–950 / nombre único / anidamiento) y genera el fragmento theme.extend.colors de tailwind.config.ts con niveles WCAG AA/AAA por color. Modo oscuro opcional.

## Contenido relacionado

- [CSS](https://elysiatools.com/es/tags/css): Explore 48 herramientas de CSS desde el navegador. Procese texto y archivos en nuestros servidores; el texto no se guarda y los archivos se eliminan tras 6 horas.
- [HTML/CSS](https://elysiatools.com/es/tags/html): Explore 86 herramientas de HTML, CSS y DOM desde el navegador. El procesamiento se realiza en servidores; el texto no se guarda y los archivos se eliminan tras 6 horas.
- [Color](https://elysiatools.com/es/tags/color): Explore 214 herramientas de color para trabajar con valores HEX, RGB, HSL y paletas desde el navegador, sin instalar software.
- [Paleta de colores](https://elysiatools.com/es/tags/color-palette): Explora 10 herramientas para trabajar con paletas de colores desde el navegador. El texto no se guarda y los archivos subidos se eliminan tras 6 horas.
- [Design System](https://elysiatools.com/es/tags/design-system): Explora 7 herramientas de Design System desde el navegador. El procesamiento se realiza en servidores de Elysia Tools; el texto no se guarda y los archivos subidos se eliminan tras 6 horas.
- [Design Tokens](https://elysiatools.com/es/tags/design-tokens): Explore 5 herramientas de Design Tokens desde el navegador. El procesamiento se realiza en servidores de Elysia Tools; el texto no se guarda y los archivos se eliminan tras 6 horas.