Gerador de paletas de cores Material Design
Crie paletas de cores bonitas com base nas diretrizes do Material Design da Google. Escolha as cores primária e de destaque para gerar um tema completo.
Gerador de paletas
Paleta gerada
Paleta completa de cores Material Design
Explore o conjunto completo de cores do Material Design. Clique numa cor para copiar o código hexadecimal.
Vermelho
Rosa
Roxo
Azul
Verde
Laranja
Verde-azulado
Âmbar
Dicas de utilização
- Use o tom 500 como cor primária
- Use o tom 700 para variantes mais escuras (como barras de aplicações)
- Use as cores de destaque (A200, A400) em botões de ação flutuantes e realces
- Garanta um contraste adequado para acessibilidade
Gerador profissional de cores Material Design
Aceda ao sistema completo de cores Material Design 3 da Google, com paletas Material You, tokens de cor oficiais e opções de exportação profissionais para desenvolvimento de interfaces modernas e design de aplicações Android.
Porquê escolher o nosso gerador Material Design?
A nossa ferramenta completa dá acesso a todo o sistema de cores Material Design 3, com temas dinâmicos Material You, tokens de cor oficiais da Google e formatos de exportação profissionais.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
Sistema Material Design 3 completo
Aceda a todo o sistema de cores do Material Design 3, incluindo cores primárias, secundárias e terciárias, variantes de superfície e paletas tonais completas com funções de cor semânticas.
Temas dinâmicos Material You
Gere esquemas de cores Material You a partir de cores-semente, com variantes automáticas para tema claro e escuro e extração de cores personalizada para aplicações Android modernas.
Opções de exportação para programadores
Exporte em propriedades personalizadas CSS, variáveis SCSS, tokens JSON, recursos XML para Android, tokens Figma e temas Flutter, com convenções de nomenclatura adequadas.
Ideal para:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
Como funciona:
Escolha o sistema de cores
Escolha entre as cores clássicas do Material Design 3 ou gere paletas Material You a partir da sua cor-semente.
Personalize e pré-visualize
Ajuste os valores tonais, pré-visualize os temas claro e escuro e veja como as cores funcionam nos componentes do Material Design.
Exporte e implemente
Transfira os tokens de cor no formato que preferir e integre-os diretamente no seu fluxo de trabalho.
Perguntas frequentes
O Material Design 3 é o sistema de design mais recente da Google, com funções de cor melhoradas e tokens semânticos. O Material You é a camada de personalização que gera esquemas de cores a partir do papel de parede do utilizador ou de cores-semente, criando temas dinâmicos que se adaptam ao gosto de cada pessoa, mantendo os princípios do MD3.
Introduza a cor da sua marca ou o tom que preferir como cor-semente. O nosso algoritmo gera uma paleta tonal completa com as famílias de cor primária, secundária, terciária, neutra e neutra variante, cada uma com 13 variações tonais de 0 (preto) a 100 (branco), segundo as especificações Material You da Google.
Exporte em propriedades personalizadas CSS, variáveis SCSS/Sass, tokens de design JSON, recursos XML para Android, objetos JavaScript/TypeScript, tokens de design Figma, temas ColorScheme do Flutter e recursos de cor Swift para iOS. Todas as exportações incluem convenções de nomenclatura semântica adequadas.
Sim! O sistema de cores do Material Design 3 foi criado a pensar na acessibilidade. O sistema de paletas tonais garante o contraste adequado entre as cores de superfície e o texto sobre elas. A nossa ferramenta mostra os níveis de conformidade com as WCAG e sugere automaticamente combinações de cores acessíveis.
Claro! As cores do Material Design são de código aberto e podem ser usadas em qualquer projeto. Embora o sistema tenha sido criado para os produtos Google, a ciência da cor e os princípios de acessibilidade tornam-no excelente para qualquer interface moderna, seja web, móvel ou de computador.
O Material Design 3 usa funções de cor semânticas que se associam automaticamente aos valores tonais adequados aos temas claro e escuro. Por exemplo, "primary" usa o tom 40 no tema claro e o tom 80 no tema escuro. O nosso gerador fornece as duas variantes, mantendo o contraste e a acessibilidade.