Guia da ferramenta de cores

Gerador de tokens de design

Crie tokens de cores a partir de uma paleta e exporte variáveis CSS, mapas SCSS, JSON e valores para Tailwind.

Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.

Exportar tokens de cores Explorar todas as ferramentas

O que você encontra nesta página

Transforme valores HEX em tokens nomeados para implementação.
Atribua manualmente funções semânticas, como fundo, texto e cor principal, após exportar a paleta.
Exporte JSON para levar tokens entre ferramentas de design e de desenvolvimento.

Indicado para

Sistemas de design
Entrega de tokens
Equipes de frontend

Como usar

Gerador de paletasGere paletas, confira o contraste WCAG, extraia cores de imagens localmente e exporte CSS, Tailwind, SCSS, JSON, SVG e PNG.Verificador WCAGConfira o contraste entre texto e fundo segundo os níveis AA e AAA das WCAG. Gratuito, imediato e sem envio de arquivos.Extrator de cores de imagensExtraia uma paleta de cores dominantes de imagens PNG, JPG ou WebP. O processamento ocorre no navegador, sem envio da imagem.

Exemplo prático

Chromoforge · #111111 / #E24B4A

Teste o texto e o fundo reais em conjunto. O nome da cor ou o número do tom não garante a legibilidade.

{
  "color": {
    "brand": { "$type": "color", "$value": "#E24B4A" },
    "onBrand": { "$type": "color", "$value": "#111111" },
    "surface": { "$type": "color", "$value": "#FAFAF8" }
  }
}

Contraste: #111111 / #E24B4A

Posso usar esta página com o gerador principal?

Sim. Comece aqui, abra a ferramenta principal do Chromoforge com a mesma cor base e exporte a paleta.

Qual a diferença entre tokens primitivos e semânticos?

Primitivos nomeiam valores, como blue-500 ou gray-900. Tokens semânticos descrevem a finalidade, como color-action-background, e apontam para um valor primitivo. Os componentes podem consumir as funções semânticas para facilitar mudanças de marca ou de tema.

Qual formato devo versionar no repositório?

Propriedades personalizadas CSS ajudam em temas que mudam no navegador. JSON é útil em processos que atendem a várias plataformas. Variáveis SCSS servem quando os valores são resolvidos na build e o projeto não precisa trocar o tema em tempo de execução.

Ferramentas e guias relacionados

Gerador de variáveis de cores CSSGere propriedades personalizadas CSS a partir de uma paleta e copie-as para sua folha de estilos ou arquivo de tokens.Guia de mapeamento de tema shadcnGere uma paleta na ferramenta principal e atribua manualmente suas cores às variáveis semânticas do seu projeto shadcn.Gerador de cores TailwindGere uma escala de onze tons, de 50 a 950, na ferramenta principal e exporte uma configuração Tailwind v3.

Todas as ferramentas