Paleta de cores Material Design

Todas as 19 famílias de cores com códigos HEX, variáveis CSS e verificação de contraste. Clique em qualquer cor para copiar.

Baixar CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Texto branco {{ whiteContrast.toFixed(1) }}:1
Texto preto {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

O que é o sistema de cores Material Design?

O sistema de cores Material Design do Google inclui 19 famílias de cores, cada uma com 10 tons principais (50, 100–900) e até 4 tons de destaque (A100–A700). Ele fornece uma linguagem de cores consistente para sites e aplicativos.

Como usar as cores Material Design em CSS?

Baixe o arquivo CSS com todas as variáveis e inclua-o no seu projeto. Em seguida, use as cores através de Custom Properties CSS como var(--color-md-teal-500). Você também pode usar os códigos HEX diretamente.

Dicas para escolha de cores

  • Escolha uma cor primária (ex. Teal 500) e uma cor de destaque de outra família.
  • Use tons mais claros (50–200) para fundos e mais escuros (700–900) para texto.
  • Garanta contraste suficiente (pelo menos 4.5:1) entre texto e fundo para acessibilidade.
  • O tom 500 é a representação padrão de cada família de cores e ideal como cor primária.