Como usar o gerador de paleta de cores
Insira sua cor primária no seletor de cor ou pelo código HEX. Escolha o algoritmo de geração, defina o naming pattern e ajuste o Contrast Shift conforme o nível de acessibilidade do projeto. A escala é gerada instantaneamente com todos os tokens prontos para exportar.
Veja o guia completo sobre como criar uma paleta de cores para design system.
1. Escolha sua Key Color e o algoritmo
Insira a cor da marca no seletor. No painel Algorithm, escolha o motor que melhor se encaixa no seu projeto:
- Tailwind CSS — gera escalas compatíveis com o padrão Tailwind, ideal para projetos web modernos
- Radix UI — segue a lógica do sistema de cores da Radix, com foco em acessibilidade nativa
- Ant Design — compatível com o Design System do Ant, bastante usado em produtos SaaS e enterprise
- Lightness / Saturation / Hue Shift — controle manual para quem quer calibrar a progressão tonal com precisão
2. Defina o Naming Pattern e o Shade Count
O Naming Pattern controla como as variáveis serão nomeadas no código exportado. O padrão 50, 100...900 é o mais adotado em design systems modernos e garante compatibilidade com Tailwind e com a nomenclatura do Material Design.
O Shade Count define quantos tons a escala vai ter. 11 é o padrão (do 50 ao 950), suficiente para cobrir todos os estados de interação sem gerar variações desnecessárias.
3. Calibre o Contrast Shift para acessibilidade
O slider de Contrast Shift controla a intensidade da progressão entre os extremos claro e escuro da escala. Um valor positivo aumenta o contraste entre os tons, facilitando atingir a proporção mínima de 4.5:1 (WCAG AA) para texto normal sem ajustes manuais posteriores. Para projetos com requisito AAA (7:1), aumente o valor até os tons intermediários alcançarem o contraste necessário contra fundo branco e preto.
4. Exporte para o seu fluxo de trabalho
Após validar a escala visualmente, acesse os painéis de código na parte inferior da ferramenta:
- CSS — gera variáveis prontas no formato
:root { --nome-50: #valor; }, compatível com qualquer projeto web
- Tailwind — configuração pronta para
tailwind.config.js, com o objeto de cores mapeado
- Tailwind 4 — formato atualizado com CSS Variables nativas, padrão do Tailwind v4
- Tokens — exporta no formato W3C Design Tokens, compatível com Style Dictionary e Figma Variables
- SVG/Figma — baixe o arquivo para importar diretamente no Figma como biblioteca de cores
Por que usar uma escala algorítmica, não cores fixas
Definir cores manualmente para cada estado de interação é o erro mais comum em projetos sem design system. Quando o designer escolhe um azul para o botão e outro azul “parecido” para o hover, essas escolhas não seguem nenhuma lógica matemática. O resultado é uma paleta inconsistente que não escala.
Uma escala algorítmica resolve isso. A partir de uma única Key Color, o gerador calcula toda a progressão de luminância e saturação usando o mesmo motor matemático. Os tons 50 a 200 ficam naturalmente adequados para fundos e bordas. Os tons 400 a 600 representam a identidade da marca. Os tons 700 a 900 entregam contraste suficiente para tipografia e estados de interação.
Quando a marca mudar, você altera a Key Color. Todos os tokens se atualizam em cascata — sem precisar rever cada componente individualmente.
Design Tokens de cor: do gerador ao código
Ao exportar o código gerado, você está criando a camada de design tokens de cor do produto. Em vez de usar #5257FF diretamente no CSS, o time passa a referenciar --brand-500 ou color.primary.main.
Essa camada de abstração tem três consequências práticas:
Escalabilidade: uma alteração no token propaga automaticamente para todos os componentes que o referenciam. Nenhuma busca manual por valores HEX no código.
Consistência design-dev: designers e desenvolvedores falam a mesma língua. O nome do token no Figma é idêntico ao nome no código, eliminando a etapa de tradução no handoff.
Suporte a temas: alternar entre modo claro, escuro e temas de marca se torna uma operação de troca de conjunto de tokens — sem reescrever lógica de componente.
Cores e acessibilidade: o que você precisa garantir antes de publicar
Nenhuma paleta está pronta para produção sem validação de contraste. As diretrizes WCAG 2.1 estabelecem dois níveis de conformidade para relação texto-fundo:
Nível AA (mínimo de mercado): 4.5:1 para texto normal e 3:1 para texto grande (acima de 18pt ou 14pt em negrito). Este é o requisito base para a maioria dos produtos digitais brasileiros.
Nível AAA (conformidade avançada): 7:1 para texto normal e 4.5:1 para texto grande. Necessário em produtos financeiros, de saúde e plataformas governamentais.
Use o Contrast Shift do gerador para calibrar a escala antes de exportar. Como regra prática: para texto escuro sobre fundo claro, os tons 700 a 900 geralmente atingem conformidade AA com fundo branco. Para texto claro sobre fundo escuro, os tons 50 a 200 funcionam contra fundos 800-950.
Além do contraste, valide a paleta para daltonismo. Cerca de 8% dos homens têm alguma forma de deficiência cromática — use sempre ícone ou texto junto com cor para comunicar estados críticos (erro, alerta, sucesso).
A Regra 60-30-10 aplicada a interfaces
Depois de gerar a escala, a dúvida comum é: como distribuir essas cores nos componentes? A proporção clássica funciona bem como ponto de partida:
60% — Cores de superfície (tons 50 a 200): fundos, containers, espaços vazios. São os tons que fazem a interface “respirar” e mantêm o conteúdo no foco.
30% — Cores de suporte (tons 300 a 500): elementos secundários como cards, ícones de navegação, separadores. Complementam a identidade sem disputar atenção.
10% — Cores de ação (tons 600 a 800): CTAs, links principais, indicadores de foco, badges de status. Se tudo é destaque, nada é destaque — a concentração de saturação nesses pontos é o que cria hierarquia visual real.
Esta lógica está diretamente conectada à taxa de conversão do produto. Uma cor de acento bem posicionada reduz o tempo de decisão do usuário, porque elimina ambiguidade sobre onde clicar.
Semântica de cores em design systems
Além da escala base, um design system maduro tem uma camada de cores semânticas: valores nomeados pela função, não pelo matiz.
| Token semântico |
Função |
Exemplo de tom |
color.feedback.error |
Erros críticos, exclusão de dados |
Vermelho 600-700 |
color.feedback.success |
Confirmação, conclusão de ação |
Verde 500-600 |
color.feedback.warning |
Alertas não-bloqueantes |
Amarelo/Laranja 500 |
color.feedback.info |
Informação contextual |
Azul 400-500 |
color.surface.base |
Fundo principal da aplicação |
Neutro 50-100 |
color.surface.elevated |
Cards, modais, drawers |
Neutro 100-200 |
Ao gerar sua paleta, crie uma escala primária, uma escala de feedback (vermelho, verde, amarelo) e uma escala neutra. Esses três conjuntos cobrem 90% das necessidades de um design system de produto digital.
Perguntas frequentes
O que é uma escala de cores 50 a 900 em design system?
É uma progressão de 11 tons de uma cor base, variando do mais claro (50) ao mais escuro (900 ou 950). Cada número representa um nível de luminância padronizado. Os tons claros (50-200) são usados em fundos e superfícies. Os tons médios (400-600) representam a cor da marca. Os tons escuros (700-950) servem para tipografia e estados de interação com alto contraste.
Qual algoritmo devo escolher: Tailwind, Radix ou Ant Design?
Depende do seu stack de desenvolvimento. Escolha Tailwind se o projeto usa Tailwind CSS como framework de estilo — os tokens gerados são diretamente compatíveis. Use Radix se o projeto é baseado em componentes Radix UI, pois a lógica de contraste é otimizada para acessibilidade nativa. Escolha Ant Design para projetos enterprise com componentes Ant. Se não houver dependência, Tailwind CSS é o padrão mais adotado e interoperável.
Como garantir que a paleta gerada atende ao WCAG AA?
Após gerar a escala, teste o par de cores que você vai usar em texto e fundo. Para texto escuro sobre fundo claro, o tom 700 da escala geralmente atinge contraste de 4.5:1 contra branco puro. Para texto claro sobre fundo escuro, o tom 100 costuma funcionar contra fundos 800+. Use o slider de Contrast Shift para aumentar a separação entre os tons quando necessário, e valide os pares com um validador de contraste WCAG antes de publicar.
O que são design tokens e como usá-los com esta ferramenta?
Design tokens são variáveis nomeadas que armazenam decisões de design — como cores, espaçamentos e tipografia — em um formato que tanto designers quanto desenvolvedores usam. No contexto de cores, um token substitui o valor HEX bruto (#5257FF) por uma referência semântica (--brand-500 ou color.primary.main). Esta ferramenta exporta os tokens no formato W3C, compatível com Style Dictionary, Figma Variables e os principais frameworks de design system.
Posso usar as cores geradas em projetos comerciais?
Sim. A ferramenta é gratuita e as paletas geradas são de uso livre, sem nenhuma restrição de licença. Você cria, exporta e usa nos seus projetos comerciais sem necessidade de atribuição.
Esta ferramenta funciona para dark mode?
Sim. A lógica de escala 50-950 foi projetada para suportar modo escuro. No dark mode, você inverte a hierarquia de superfícies — o fundo passa a usar os tons 800-950 e os textos usam os tons 50-100. Os tokens de cor semânticos (surface.base, surface.elevated) permitem fazer essa inversão programaticamente sem reescrever os componentes.
Outras ferramentas para design system
Esta é a primeira ferramenta da CamaraUX. Em breve, você também vai encontrar aqui:
- Gerador de Escala Tipográfica — crie progressões de tamanho de fonte com razão matemática e exporte tokens de tipografia prontos para o código
- Gerador de Espaçamentos e Tokens — defina sua escala de espaçamento base e exporte as variáveis de padding, margin e gap
- Gerador de Sombras e Border Radius — calibre a profundidade e os arredondamentos do seu sistema com tokens exportáveis
Desenvolvido por Lucas Camara — UX Designer e consultor especializado em design systems e experiência de produto.
Precisa estruturar o sistema de design do seu produto? Fale com a CamaraUX.
