Descubra uma ferramenta gratuita e instantânea que cria paletas completas do Material 3 com apenas um clique. Exporte diretamente para Figma via SVG e acelere seu fluxo de design.
Introdução
Olá, designers! Se você usa Material Design 3 (M3), sabe como é importante — e trabalhoso — criar uma paleta de cores completa com acessibilidade, contraste e harmonia. Mas agora existe uma solução: uma ferramenta online, gratuita e instantânea que gera toda a paleta M3 a partir de uma única cor.
Conheça o Material 3 Palette Generator
Como Funciona?
- Escolha uma cor primária (ex:
#6750A4). - A ferramenta gera automaticamente:
- Cores secundárias e terciárias
- Containers, fixed, on-colors
- Superfícies, outlines, error, shadow
- 100% compatível com Material 3
- Exporte com 1 clique:
- Variáveis CSS
- SVG otimizado para Figma (arraste e use!)
Exemplo: Paleta com #6750A4
| Primary | Primary Container | On Primary Container |
| Secondary | Tertiary Container | On Surface |
Todas as cores seguem WCAG AA/AAA em light e dark mode.
Exporte Direto para o Figma!
Clique em “Export SVG (Figma)” e receba um arquivo com:
- Retângulos nomeados (ex:
Primary,On Primary Container) - Cores aplicadas como preenchimento
- Camadas organizadas
Dica de ouro: Cole no Figma → Selecione tudo → “Create Component Set” → Você tem um Design Token System pronto!
Por Que Usar?
- Velocidade: 40+ tokens em 3 segundos
- Precisão: 100% fiel ao Material 3
- Acessibilidade: Contraste garantido
- Gratuito: Sem login, funciona no navegador
Acessar o Material 3 Palette Generator
Por Moisés Rabelo – UI/UX Designer & Entusiasta de Design Systems
Figma: @figmy
Gostou? Compartilhe com seu time!
Tem uma ferramenta favorita de M3? Deixe seu comentário abaixo!