Referência de Cores Material Design

• Referência completa dos tokens do Material Design 3: todas as funções de cor do Material Design 3 - primary, secondary, tertiary, error, surface, background, outline, shadow e scrim - com valores de tema claro e escuro. Inclui as 6 paletas tonais com 13 passos de tom cada.
• Busca instantânea e filtragem por função: pesquise por nome de token, nome de variável CSS, valor HEX ou descrição. Filtre por função de cor para focar nos tokens que você precisa. Os resultados são atualizados instantaneamente a cada tecla digitada.
• Valores de tema claro e escuro: alterne entre os valores de tema claro e escuro com um clique. Cada função de cor mostra o valor de token correto para ambos os temas - essencial para criar interfaces Material You adaptáveis.
• 100 % grátis - sem cadastro: totalmente grátis, sem conta, sem nível premium, sem limites de uso e sem anúncios bloqueando a interface. Consulte as cores do Material Design 3 quantas vezes precisar.

• Desenvolvimento de apps Android: desenvolvedores Android usam a referência de cores do Material Design para implementar as funções de cor corretas no Jetpack Compose e em layouts XML. A referência mostra valores de tema claro e escuro para cada token, eliminando a necessidade de consultá-los na documentação oficial.
• Desenvolvimento Flutter e multiplataforma: desenvolvedores Flutter usam a referência de cores do Material Design para configurar ColorScheme no ThemeData. Os valores da paleta tonal correspondem diretamente ao sistema de cores Material 3 do Flutter, facilitando a implementação de cores de marca personalizadas.
• Implementação web do Material Design: desenvolvedores web que implementam Material Design 3 com Material Web Components usam os nomes de variáveis CSS desta referência para substituir os tokens de tema padrão e aplicar cores de marca personalizadas.
• Configuração de sistema de design no Figma: designers que configuram o Material Design 3 no Figma usam a referência de cores para preencher seus estilos e variáveis de cor. Os valores da paleta tonal oferecem o conjunto completo de amostras necessário para um sistema de design Material You.
• Cor dinâmica Material You: desenvolvedores que implementam a cor dinâmica Material You usam os valores de token de referência como fallback quando a paleta gerada a partir do papel de parede do usuário não está disponível. Esta referência fornece todos os valores de referência para temas claros e escuros.
• Verificação de acessibilidade e contraste: engenheiros de acessibilidade usam a referência de cores do Material Design para verificar se os pares de funções de cor (por exemplo, Primary + On Primary) atendem aos requisitos de contraste WCAG. As funções on-color são projetadas especificamente para garantir contraste legível.

Material Design 3 (também chamado de Material You) é o sistema de design mais recente do Google, introduzido em 2021 com o Android 12. Seu sistema de cores é construído em torno da cor dinâmica - a capacidade de gerar uma paleta de cores completa a partir do papel de parede do usuário em tempo de execução. O sistema define um conjunto de funções de cor (tokens semânticos como «Primary», «On Primary», «Surface») que mapeiam para tons específicos de uma paleta tonal. Essa separação de funções e valores permite que toda a interface se adapte a qualquer marca ou cor gerada pelo usuário, mantendo contraste e acessibilidade consistentes. Nossa referência de cores do Material Design fornece todos os valores de token de referência para temas claros e escuros.

1. Paletas tonais: o Material Design 3 gera seis paletas tonais a partir de uma cor semente - Primary, Secondary, Tertiary, Error, Neutral e Neutral Variant. Cada paleta contém 13 tons de 0 (preto) a 100 (branco), oferecendo uma gama completa de valores de luminosidade.
2. Funções de cor: as funções de cor são tokens semânticos que mapeiam para tons específicos das paletas tonais. Por exemplo, «Primary» mapeia para o tom 40 no tema claro e o tom 80 no tema escuro. «On Primary» mapeia para o tom 100 no claro e o tom 20 no escuro.
3. Cor dinâmica: no Android 12 ou superior, o Material You gera paletas tonais personalizadas a partir do papel de parede do usuário. As funções de cor então mapeiam para as mesmas posições de tom na paleta personalizada, produzindo uma interface totalmente personalizada. Os valores de referência nesta página são o fallback quando a cor dinâmica não está disponível.

• Primary / On Primary / Primary Container: a cor de marca principal e suas variantes. Primary é usada para ações principais e elementos de alta ênfase. Primary Container é usada para botões tonais preenchidos e estados selecionados.
• Secondary e Tertiary: cores de apoio para componentes menos proeminentes e acentos contrastantes. Secondary é usada para chips e ações alternativas; Tertiary fornece um terceiro acento para equilíbrio visual.
• Surface e Background: as cores neutras usadas para fundos de cartões, folhas, diálogos e o fundo do app. O Material Design 3 introduz vários níveis de contêiner de superfície (lowest, low, default, high, highest) para tingimento baseado em elevação.
• Outline e Outline Variant: cores de borda para campos de texto, divisores e anéis de foco. Outline é usada para bordas proeminentes; Outline Variant para divisores decorativos sutis.

O Material Web Components (a implementação web oficial do Material Design 3) usa propriedades personalizadas CSS com o prefixo --md-sys-color- para todos os tokens de cor. Você pode sobrescrever qualquer token definindo a variável CSS na sua folha de estilos: :root { --md-sys-color-primary: #sua-cor; }. Esta referência fornece o nome exato da variável CSS de cada token, facilitando copiar e colar na sua implementação.