--- title: Gerador de Paleta de Cores para Design System date: 2026-05-03T03:18:54Z modified: 2026-07-31T15:33:17Z permalink: "https://camaraux.com.br/ferramentas/gerador-paleta-cores/" type: page status: publish excerpt: Crie escalas de 50 a 950 com algoritmo Tailwind, exporte CSS Variables, Design Tokens e arquivos para Figma. Desenvolvido para UI/UX designers que precisam de consistência, acessibilidade e handoff sem atrito. wpid: 5880 rank_math_title: "Gerador de Paleta de Cores para Design System | CamaraUX" rank_math_description: "Gere escalas de cor 50-950 com algoritmo Tailwind, Radix ou Ant Design. Exporte CSS Variables, Design Tokens e SVG para Figma. Grátis, para UI/UX designers.\\n" rank_math_focus_keyword: paleta de cores,gerador,gerador de paleta de cores,gerador de paleta de cores para design system featured_image: /wp-content/uploads/2026/05/Gerador-de-Paleta-de-Cores-—-CamaraUX.webp featured_image_alt: Gerador de paleta de cores para design system com escala 50 a 950, algoritmo Tailwind CSS e ajuste de contraste — CamaraUX parent: 5900 ancestors: - 5900 children: [] author: Lucas Camara timestamp: 2026-07-31T15:33:17Z tags: [] --- Ferramenta Cores Crie escalas de 50 a 950 com algoritmo Tailwind, exporte CSS Variables, Design Tokens e arquivos para Figma. Desenvolvido para UI/UX designers que precisam de consistência, acessibilidade e handoff sem atrito. Inicio Configurações RGB R G B Algoritmo Tailwind CSS Radix UI Ant Design Escala de luminosidade Escala de saturação Escala de matiz Monocromático Análogas Complementares Ajuste de contraste 0.00 Padrão de nomes 50,100...900 1,2,3...20 10,20,30...200 Controles Resultado Tons - 11 + Copiar nome SVG/Figma Baixar SVG VisualizaçõesPasse o mouse nos exemplos para ver os tokens usados. Aplicações Contrast grid CSS Tailwind Tailwind 4 Tokens HEX RGBA HSL OKLCH Copiar Use os controles ao lado para gerar uma nova escala de cor. ## 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/como-criar-paleta-cores-design-system.md)._ ### 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-system-guia-escalabilidade-roi.md) 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-systems-figma.md). 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-tokens-arquitetura-w3c.md) 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/figma-ferramenta-ux-design.md) é idêntico ao nome no código, eliminando a etapa de tradução no [handoff](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/documentacao-de-design-handoff-para-desenvolvedores.md). **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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/acessibilidade-design-systems-inclusao-wcag.md) 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/ux-conversao-design-resultados-negocio.md) 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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-system-brasileiros-estrategia-negocio-guia.md) 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](https://camaraux.com.br/autor/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](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/contato.md)._ ## Escolhendo uma paleta de cores com intenção: o que diz o NNGroup O [Nielsen Norman Group](https://www.nngroup.com/videos/choosing-color-palette/) sintetizou os princípios de escolha cromática para interfaces. Vale 3 minutos antes de começar a gerar sua escala: https://youtu.be/qIB9\_gOZySU?si=TNGlaQbKmFFKd1-W ### Categorias ## Ter uma pergunta ou dica de assunto? [ Entrar em contato ](/contato)