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.

Elysia Tools

Navegação

Design

Gerador de cascata de tokens de cor

Transforma um hex principal em uma cascata completa de tokens, variaveis CSS e JSON de Style Dictionary

Detalhes

O que esta ferramenta ajuda você a fazer

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

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Gerador de cascata de tokens de cor

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Sistema de Cores para SaaS Corporativo

2. Configuração de Tokens para Desenvolvedor Frontend

Perguntas frequentes

Exemplos de códigos de cor

Exemplos Avançados de Aplicação Grafana

Exemplos de Códigos QR

Exemplos de Processamento de Imagem Web Python

De paleta de imagem para design tokens

Gerador de Organograma

Conversor de Escala de Cinza

Gerador de Data URI

Geradores de efeitos CSS, paletas e tokens de design

Ferramentas de intercambio JSON e traducao de formatos

Ferramentas de inspecao, diff e transformacao JSON

Geradores de schema JSON, dados mock e fixtures de API