Saltar para o conteúdo

Cores do Material Design: paleta completa com acentos

A paleta clássica do Material Design do Google: 19 cores com tons do 50 ao 900 e os acentos A100 a A700. Copie cada cor em HEX, RGB, HSL, OKLCH ou com o nome no MUI.

Ver cores UI
Copiar como

Valores de cada cor

Escolha uma cor para ver todos os tons com o nome no MUI, HEX, RGB, OKLCH e a cor de texto que melhor contrasta.

Blue

TomMUIHEXRGBOKLCHTexto
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

O que é o Material Design e como sua paleta se organiza

Material Design é o sistema de design que o Google apresentou em 2014 para unificar seus produtos e o Android. Sua paleta reúne 19 cores, cada uma com dez tons numerados do 50 (o mais claro) ao 900 (o mais escuro).

A diferença em relação a outras escalas são os acentos: A100, A200, A400 e A700, versões mais saturadas de cada cor pensadas para botões, interruptores e outros elementos que devem se destacar. Brown, Grey e Blue Grey não têm acentos.

Como combinar uma cor principal e um acento

As diretrizes originais do Material propõem escolher uma cor principal e usar seu tom 500 nas superfícies mais visíveis, como a barra superior, e o 700 na barra de status. Os tons claros (50–200) servem para fundos e elementos secundários.

Para o acento, escolhe-se outra família e um de seus tons A, normalmente o A200: assim o botão de ação principal se destaca do resto. A combinação clássica é Indigo com um acento Pink.

Material Design 2 e Material 3: dois sistemas de cor

Esta tabela reúne a paleta clássica do Material Design (versões 1 e 2). O Material 3, também chamado Material You, usa um sistema diferente.

Material Design 2 (esta paleta)

  • 19 cores fixas com tons 50–900 e acentos A100–A700.
  • Os valores são sempre os mesmos, por isso podem ser copiados de uma tabela.
  • É a paleta incluída no MUI (@mui/material/colors) e em muitos templates.

Material 3 (Material You)

  • As paletas são geradas a partir de uma cor base, com 13 tons do 0 (preto) ao 100 (branco).
  • No Android 12 e posteriores, a cor base pode vir do papel de parede (cor dinâmica).
  • Organiza o tema em papéis: primary, secondary, tertiary, neutral e neutral variant.

Como usar as cores do Material no seu projeto

Se você trabalha com MUI (React), as cores já vêm incluídas e são importadas por família. Em qualquer outro projeto, copie o HEX da tabela e guarde-o como variável CSS.

MUI (React)

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

Perguntas frequentes

São variantes mais saturadas de cada cor, pensadas para elementos que precisam se destacar, como botões, links ou ícones ativos, ao contrário dos tons principais (50 a 900), pensados para fundos e superfícies.

As diretrizes originais propõem o tom 500 para as superfícies principais, como a barra superior, o 700 para a barra de status e um acento de outra família (normalmente A200) para o botão de ação principal.

Ambas usam uma escala numerada do claro ao escuro, mas o Material Design adiciona os tons de acento (A100 a A700), que o Tailwind não tem. Além disso, os nomes e valores exatos de cada família de cor são diferentes entre os dois sistemas.

Esta é a paleta clássica do Material Design. As versões mais recentes do sistema (Material You) introduzem paletas dinâmicas geradas a partir de uma cor base, mas esta escala continua amplamente usada e é compatível com projetos que a referenciam diretamente.

O MUI inclui esta mesma paleta. Importe a família de @mui/material/colors e use o tom como índice: indigo[500] ou pink.A200. Escolha «MUI» em «Copiar como» para copiar esse nome diretamente.

A paleta oficial não os define. São cores neutras ou apagadas pensadas para fundos, texto e elementos secundários, não para destacar. Se precisar de um acento, combine-as com outra família.

Sim. Em «Copiar como» você pode escolher HEX, RGB, HSL, OKLCH ou o nome no MUI, e a tabela de cada cor mostra todos os formatos ao mesmo tempo.