Skip to main content
FreeToolkit .ai

Paleta de Cores do Material Design Navegue pela paleta de cores completa do Material Design com todas as sombras e acentos.

Cores do Material Design illustration
🎨

Cores do Material Design

Navegue pela paleta de cores completa do Material Design com todas as sombras e acentos.

1

Selecionar Família

Escolha uma família de cores como Vermelho, Azul ou Verde-Azulado.

2

Navegar pelas Sombras

Veja todas as sombras do 50 (mais claro) ao 900 (mais escuro), além das variantes de destaque.

3

Copiar Cores

Copie o código HEX de qualquer sombra com um clique.

Loading tool...

What Is Cores do Material Design?

Cores do Material Design é uma referência completa para o sistema de cores do Material Design do Google, apresentando 19 famílias de cores com tons que variam de 50 a 900, além de variantes de destaque (A100-A700). A paleta do Material Design foi cuidadosamente criada pelo Google para fornecer um conjunto equilibrado e abrangente de cores para design de interface do usuário. Cada família de cores oferece uma variação que vai desde tons muito claros (50) até tons muito escuros (900), com tons de destaque que proporcionam variantes vívidas e saturadas para elementos de ênfase. A paleta foi projetada com acessibilidade em mente, com contraste claro entre tons adjacentes. É amplamente utilizada no desenvolvimento de aplicativos Android, Material UI (React), Angular Material, Flutter e aplicações web que seguem as diretrizes do Material Design. A ferramenta permite navegar por família, visualizar todos os tons em uma faixa visual e copiar o código HEX de qualquer cor.

Why Use Cores do Material Design?

  • Paleta completa do Material Design com todas as 19 famílias
  • Sombras 50-900, além das variantes de destaque (A100-A700)
  • Seletor visual de família de cores com navegação rápida
  • Faixa de sombra mostrando todas as variantes de um só olhar
  • Copia com um clique para cada cor

Common Use Cases

Desenvolvimento Android

Selecione cores do Material Design para aplicativos Android seguindo as diretrizes de design do Google.

Material UI (React)

Encontre valores exatos de cor para personalização de temas MUI.

Desenvolvimento Flutter

Escolha cores do Material Design para aplicativos Flutter com confiança.

Design Web

Crie sites inspirados no Material Design com a paleta de cores oficial.

Technical Guide

O sistema de cores do Material Design utiliza uma convenção de nomenclatura estruturada: Nome da Família + Número do Tom. Cada família tem 10 tons padrão (50, 100, 200...900) e até 4 tons de destaque (A100, A200, A400, A700). Os tons padrão variam desde muito claros (50, adequados para fundos) até muito escuros (900, adequados para texto). Os tons de destaque são variantes altamente saturadas projetadas para botões de ação flutuantes, elementos interativos e ênfase. Nem todas as famílias têm tons de destaque - Brown, Grey e Blue Grey não possuem variantes de destaque porque são neutras. As cores foram projetadas usando o espaço de cor HCT (Tom, Croma, Matiz) no Material Design 3 (Material You), que fornece degradações de cor mais uniformes perceptualmente do que o HSL. A paleta garante contraste WCAG AA entre o tom 500 e texto branco, e entre tons claros e texto escuro.

Tips & Best Practices

  • 1
    A sombra 500 é a "cor primária" de cada família - use-a como base
  • 2
    As sombras 50-200 funcionam bem para fundos e superfícies
  • 3
    As sombras 600-900 funcionam bem para texto em fundos claros
  • 4
    As sombras de destaque (A100-A700) são para elementos de ênfase, como FABs e links
  • 5
    O Material Design 3 introduz cores dinâmicas a partir das imagens de fundo do usuário - verifique o Material You para atualizações

Related Tools

Conversor HEX para RGB - free online tool

Conversor HEX para RGB

Converta códigos de cor HEX em valores RGB instantaneamente com uma pré-visualização ao vivo.

🎨 Color Tools
Seletor de Cores - free online tool

Seletor de Cores

Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.

🎨 Color Tools
Paletas de Cores de Marcas - free online tool

Paletas de Cores de Marcas

Navegue pelas paletas de cores oficiais de mais de 50 marcas e empresas de tecnologia populares.

🎨 Color Tools
Encontrador de Cores Tailwind - free online tool

Encontrador de Cores Tailwind

Encontre a classe de cor CSS do Tailwind mais próxima para qualquer código HEX.

🎨 Color Tools
Cores do Sistema iOS e Android - free online tool

Cores do Sistema iOS e Android

Navegue pelas cores do sistema para a Interface Humana do iOS e o Design de Material do Android.

🎨 Color Tools

Frequently Asked Questions

Q Isso é a paleta mais recente do Material Design?
Isso inclui a paleta do Material Design 2. O Material Design 3 (Material You) introduz um tema de cores dinâmico que gera paletas a partir das imagens de fundo do usuário, mas a paleta clássica permanece como referência padrão.
Q Por que as famílias Marrom, Cinza e Azul-Cinza não têm sombras de destaque?
Essas são famílias de cores neutras. As sombras de destaque são projetadas para ser altamente saturadas e vívidas, o que contradiz a natureza das cores neutras.
Q Qual sombra devo usar para botões primários?
A sombra 500 ou 600 é típica para botões primários no modo claro. No modo escuro, use a sombra 200 ou 300 em superfícies escuras. Sempre verifique as razões de contraste.

About This Tool

Cores do Material Design is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.