1
Envie uma imagem
Solte, escolha ou cole uma imagem. A ferramenta a reduz localmente e extrai candidatas adequadas para UI com quantização Celebi e ordenação Score.
DEVELOP.09 MATERIAL COLOR
Paleta Monet
Envie uma imagem e gere temas dinâmicos com o Material Color Utilities oficial. Compare variantes, modos claro e escuro, papéis semânticos e paletas tonais completas.
IMG
Solte uma imagem aqui
ou clique para escolher · colar imagem também funciona
JPG, PNG, WebP, GIF · processamento local Cores de origem candidatas Escolha uma cor como semente do tema
CFG
Configuração do tema
Somente local
Envie uma imagem para gerar um tema
Vamos extrair candidatos localmente e montar um sistema de cores Material completo, pronto para usar na interface.
UI
Prévia do tema em contexto
§ 01
Como gerar um tema Material a partir de uma imagem
2
Compare variantes
Escolha a especificação Material 3 ou Material 3 Expressive e compare variantes na mesma prévia, com cor de origem e nível de contraste.
3
Inspecione e exporte
Confira os temas claro e escuro juntos, examine papéis semânticos e paletas completas e exporte propriedades CSS ou JSON.
§ 02
9 estilos de cores dinâmicas Material
Monochrome / Neutral
Esquemas acromáticos e de baixa cromaticidade para interfaces tranquilas e densas em conteúdo.
Tonal Spot / Vibrant
O estilo Material 3 equilibrado por padrão e uma interpretação mais colorida e energética.
Expressive / Rainbow / Fruit Salad
Rotações fortes de tom dão personalidade a produtos de marca e experiências divertidas.
Fidelity / Content
Preservam melhor a cor de origem e suas relações de temperatura quando o conteúdo deve liderar a composição.
§ 03
Prévia de cores feita para interfaces reais
✳
Cada variante usa a mesma impressão digital de cinco cores para comparar primária, secundária, terciária, superfície e erro.
✳
Temas claro e escuro aparecem juntos para conferir superfícies, texto, botões, contêineres e navegação.
✳
Os 13 tons estão disponíveis nas paletas primary, secondary, tertiary, neutral, neutral variant e error.
✳
Usa o Google Material Color Utilities oficial e processa tudo localmente.
§ 04
Perguntas frequentes
Q1O que é Monet?
Monet é um nome comum para o sistema de cores dinâmicas do Android. Ele não copia simplesmente as cores da imagem: escolhe uma cor de origem adequada e cria um tema completo, com contraste, no espaço HCT.
Q2Qual é a diferença entre Material 3 e M3 Expressive?
Material 3 usa a especificação de cores dinâmicas de 2021 e oferece 9 variantes clássicas. M3 Expressive usa a especificação de 2025; a biblioteca oficial traz regras novas para Neutral, Tonal Spot, Vibrant e Expressive, com diferenças por dispositivo.
Q3Por que as variantes podem parecer tão diferentes com a mesma origem?
Cada variante aplica rotações de tom e metas de cromaticidade diferentes às paletas primária, secundária, terciária e neutra. Neutral é contida, Vibrant aumenta a cromaticidade, Expressive gira o tom e Fidelity preserva a aparência de origem.
Q4Minha imagem é enviada?
Não. Decodificação, redimensionamento, quantização, geração e exportação acontecem no navegador. A imagem não sai do dispositivo.