O que é Seletor de cores Material Design?

O Material Design Color Picker disponibiliza a paleta de cores Material Design completa, com todas as cores primárias e as suas variantes de tonalidade (50 a 900). Clique em qualquer amostra para copiar o valor em HEX, RGB ou HSL e verifique a acessibilidade com a ferramenta de contraste WCAG integrada.

A paleta cobre os 19 tons principais (Red a Brown) com as variações 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e os acentos A100, A200, A400, A700 quando o Google os define. Cada amostra mostra o HEX exato e o painel de cores selecionadas permite montar a paleta do projeto e copiar ou baixar como lista.

Como usar

1. Navegue pela grelha de cores com todas as cores primárias do Material Design — Vermelho, Rosa, Roxo, Roxo Escuro, Índigo, Azul e mais.
2. Clique numa cor primária para expandir as variantes de tonalidade, da mais clara (50) à mais escura (900), incluindo tons de destaque (A100–A700).
3. Clique em qualquer tonalidade para copiar o valor no formato escolhido (HEX, RGB ou HSL), adicione tonalidades ao painel Cores Selecionadas e exporte a paleta como CSS, SCSS, configuração do Tailwind ou JSON para o seu projeto.

Quando usar

• Escolher um tom principal, um contêiner mais claro e um hover mais escuro dentro da mesma cor.
• Combinar uma interface Android ou Flutter com a paleta oficial do Google sem chutar HEX.
• Montar uma paleta coerente para uma apresentação ou material de marketing.

Resultado

Está a construir um dashboard e precisa do 'Indigo 500' (#3F51B5) exato do Material Design para o botão principal e do 'Indigo 50' (#E8EAF6) para o fundo de hover.

Perguntas frequentes

Qual a diferença entre tons principais e acentos (A)?

Os tons 50–900 são variações de luminosidade da mesma cor e servem para fundos, superfícies e texto. Os A100–A700 têm saturação maior e o Google reserva para elementos de ação, como botões e selos.

Por que algumas cores não têm acentos?

Brown e Grey são cores intencionalmente dessaturadas, então o Google nunca publicou as variantes A. A ferramenta segue a especificação original e não inventa valores que nunca fizeram parte do sistema.

Qual tom usar no texto do corpo?

O Material recomenda Grey 900 sobre fundos claros e Grey 50 ou branco sobre fundos escuros. Os tons médios (500–600) funcionam para texto secundário ou ícones que precisam de menos contraste.

Essas cores são as mesmas do Material 3 (Material You)?

Não. Esta paleta é a do sistema original do Google, de 2014. O Material 3 introduziu paletas tonais dinâmicas geradas a partir de uma cor-semente, que é um algoritmo separado.

Como verificar o contraste entre dois tons?

Adicione ambos os tons ao painel Cores Selecionadas e role até ao Verificador de Contraste. Escolha um como primeiro plano e outro como fundo: o painel mostra o rácio WCAG com selos de Passa/Falha para os níveis AA e AAA, em texto normal e grande.

Ferramentas relacionadas