# Variáveis CSS

Explore 8 ferramentas de Variáveis CSS online para trabalhar com variáveis CSS no navegador, com processamento nos servidores e exclusão de arquivos após 6 horas.

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

## Visão geral

Use as ferramentas desta categoria para trabalhar com variáveis CSS em diferentes fluxos de desenvolvimento e manutenção de estilos. São 8 ferramentas acessíveis pelo navegador, sem necessidade de instalar software.

## Perguntas frequentes

### O que posso fazer com as ferramentas de Variáveis CSS?

Você pode usar as 8 ferramentas disponíveis para trabalhar com variáveis CSS em tarefas relacionadas ao desenvolvimento e à manutenção de folhas de estilo.

### Preciso instalar algum software para usar essas ferramentas?

Não. As ferramentas são acessadas pela interface do navegador, enquanto o processamento ocorre nos servidores da Elysia Tools.

### Como meus dados são tratados?

Os textos inseridos não são armazenados. Arquivos enviados são excluídos automaticamente após 6 horas; o processamento ocorre nos servidores da Elysia Tools.

## Ferramentas

- [Extrator de paleta por URL da imagem](https://elysiatools.com/pt/tools/color-palette-extractor-from-image-url): Busca uma URL de imagem remota, extrai cores dominantes, exporta arquivos de paleta prontos para codigo e mostra os contrastes
- [Gerador de cascata de tokens de cor](https://elysiatools.com/pt/tools/color-token-cascade-generator): Transforma um hex principal em uma cascata completa de tokens, variaveis CSS e JSON de Style Dictionary
- [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.
- [Exportador de Tokens Figma](https://elysiatools.com/pt/tools/figma-tokens-export): Cole um JSON de variáveis Figma / Tokens Studio e exporte para Tailwind, variáveis CSS shadcn, Style Dictionary ou SCSS. Preserva tokens de cor, espaçamento e fonte com inferência de tipo.
- [Extrator de paleta de cores da imagem](https://elysiatools.com/pt/tools/image-color-palette-extractor): Envia uma imagem, extrai cores dominantes e exporta tokens prontos para codigo com checagem de contraste
- [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons
- [Playground de valores arbitrários do Tailwind](https://elysiatools.com/pt/tools/tailwind-arbitrary-value-playground): Cole classes do Tailwind que usam valores arbitrários (w-\[137px\], text-\[#bada55\], grid-cols-\[1fr_2fr\], \[mask-type:luminance\]) e inspecione o CSS gerado, com pré-visualização visual ao vivo, detecção de dicas de tipo de dado e uma explicação de cada tradução. Útil para depurar calc(), variáveis CSS e valores avulsos fora da escala de tokens.
- [Sincronizador de paleta Tailwind](https://elysiatools.com/pt/tools/tailwind-color-palette-sync): Insira HEX, escolha o esquema de nomes (escala 50–950 / nome único / aninhamento) e gere o fragmento theme.extend.colors do tailwind.config.ts com níveis WCAG AA/AAA. Dark mode opcional.

## Conteúdo relacionado

- [CSS](https://elysiatools.com/pt/tags/css): Explore 48 ferramentas de CSS online para trabalhar com arquivos e código CSS no navegador, com processamento em servidores e exclusão de arquivos após 6 horas.
- [HTML/CSS](https://elysiatools.com/pt/tags/html): Explore 86 ferramentas de HTML/CSS e DOM para processar, converter e validar dados no navegador. Textos não são armazenados e arquivos enviados são apagados após 6 horas.
- [Cor](https://elysiatools.com/pt/tags/color): Explore 214 ferramentas de cor para trabalhar com valores HEX, RGB, HSL e paletas diretamente no navegador.
- [Paleta de cores](https://elysiatools.com/pt/tags/color-palette): Explore 10 ferramentas de paleta de cores online para trabalhar com combinações e dados de cores no navegador.
- [Design System](https://elysiatools.com/pt/tags/design-system): Explore 7 ferramentas de Design System online para apoiar seus fluxos de trabalho diretamente no navegador, com processamento em servidores Elysia Tools.
- [Design Tokens](https://elysiatools.com/pt/tags/design-tokens): Explore 5 ferramentas de Design Tokens para processar, converter, validar e gerenciar dados de design tokens no navegador.