# Gerador de cascata de tokens de cor Transforma um hex principal em uma cascata completa de tokens, variaveis CSS e JSON de Style Dictionary > Página canônica: https://elysiatools.com/pt/tools/color-token-cascade-generator - **Categoria:** Design - **Palavras-chave:** design token, cor, css variables, style dictionary ## Visão geral Insira um hex principal e a ferramenta gera escalas de marca, acento e neutros opcionais para um design system utilizavel. Saida: - primary-50 ate primary-900 - accent-50 ate accent-900 - neutral-50 ate neutral-900 opcional - tokens semanticos - variaveis CSS e JSON de Style Dictionary ## Entradas - **Hex principal** (text): #3b82f6 - **Estrategia de destaque** (select) - **Incluir escala neutra** (checkbox) ## Quando usar - Ao iniciar a construção de um Design System que exige uma paleta de cores escalável e consistente. - Para converter uma cor de marca em uma escala completa de tons (50-900) para estados de componentes como hover e foco. - Quando for necessário exportar definições de cores para desenvolvedores em formatos padronizados como CSS Variables ou JSON. ## Como funciona - Insira o código hexadecimal da sua cor principal no campo de entrada. - Selecione a estratégia de harmonia cromática (complementar, análoga ou complementar dividida) para gerar a cor de destaque. - Habilite a escala neutra para criar tons de cinza equilibrados para fundos, bordas e textos. - Copie os tokens gerados nos formatos CSS ou JSON para integrar diretamente ao seu fluxo de desenvolvimento. ## Casos de uso - Criação de temas claros e escuros baseados em uma única cor de identidade visual. - Padronização de tokens de cor para bibliotecas de componentes em React, Vue ou Angular. - Geração rápida de paletas acessíveis para protótipos de alta fidelidade no Figma. ## Perguntas frequentes ### Quais escalas de cores a ferramenta gera? A ferramenta gera escalas completas de 50 a 900 para as cores primária, de destaque e neutra. ### O que são os tokens semânticos incluídos na saída? São nomes de variáveis baseados na função, como 'text-muted' ou 'bg-canvas', que facilitam a aplicação consistente da interface. ### O JSON gerado é compatível com o Style Dictionary? Sim, o formato de saída JSON é estruturado para ser utilizado diretamente em fluxos de trabalho com Style Dictionary. ### Como funciona a estratégia de destaque complementar? Ela calcula automaticamente a cor oposta à sua cor principal no círculo cromático para garantir o máximo contraste. ### Posso gerar apenas a escala primária? Sim, basta desativar a opção de escala neutra e focar apenas no hex principal inserido. ## Ferramentas relacionadas - [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 - [Gerador de Organograma](https://elysiatools.com/pt/tools/org-chart-maker): Gera um organograma vertical com nomes e cargos a partir de dados JSON hierárquicos - [Conversor de Escala de Cinza](https://elysiatools.com/pt/tools/color-grayscale-converter): Converter cores em escala de cinza com múltiplos métodos de conversão e controle de intensidade - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [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. - [Gerador PDF de treino fitness](https://elysiatools.com/pt/tools/fitness-workout-pdf-generator): Gera um PDF imprimivel de treino a partir de JSON ou CSV com tabelas, caixas de progresso e QR opcionais - [Gerador de JSON-LD a partir de CSV](https://elysiatools.com/pt/tools/json-ld-generator-from-csv): Transforma linhas de CSV ou Excel em JSON-LD Schema.org para artigos, produtos ou eventos com saida pronta para validacao de SEO ## Exemplos - [Exemplos de códigos de cor](https://elysiatools.com/pt/samples/color-code): Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação - [Exemplos Avançados de Aplicação Grafana](https://elysiatools.com/pt/samples/grafana-samples): Exemplos compreensivos de Grafana cobrindo design avançado de dashboards, configuração de alertas, integração de fontes de dados e desenvolvimento de plugins - [Exemplos de Códigos QR](https://elysiatools.com/pt/samples/qrcode-samples): Imagens de código QR de exemplo para testar ferramentas de leitura e geração de código QR - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato ## Conteúdo relacionado - [Fluxo de sistema de cores e efeitos CSS](https://elysiatools.com/pt/hubs/design-generate): Extrair uma paleta, construir relacoes acessiveis, gerar tokens e aplicar efeitos CSS coerentes em estados reais de interface.