Design

Sistema de Cores do Material Design

O abrangente sistema de design do Google que define uma abordagem estruturada para seleção de cores, temas e aplicação em componentes de interface.

Material Design's color system is built around primary and secondary color roles, each with multiple tonal variants. Material Design 3 (Material You) introduced dynamic color, which generates an entire UI palette from a single seed color using the HCT (Hue-Chroma-Tone) color space. The system defines 13 tonal palettes and maps them to specific UI roles like surface, on-surface, primary-container, and on-primary. This systematic approach ensures consistent contrast ratios and visual hierarchy. The Material color utilities provide tools for generating accessible color schemes from any starting color.

Experimente

Gerador de paletas

Gere paletas de cores harmoniosas usando esquemas complementares, análogos, triádicos e complementares divididos.

Verificador de contraste

Verifique as proporções de contraste de cores de acordo com as diretrizes WCAG 2.1. Teste a conformidade AA e AAA para texto normal e grande.

Artigos relacionados

As Quatro Cores do Google: O Significado por Trás da Paleta Primária

Explore a história por trás do logotipo de quatro cores do Google: o design de Ruth Kedar, por que foram escolhidas as cores primárias, o verde que quebra a regra e como o Material Design evoluiu a paleta.

Sistema de Cores do Material Design: A Abordagem do Google

Explore o sistema de cores do Material Design do Google: paletas tonais, papéis primário/secundário, Cor Dinâmica (Material You) e exemplos de implementação com hex.

Teoria das Cores da Bauhaus: Kandinsky, Klee e Itten

Explore a teoria das cores da Bauhaus por Itten, Kandinsky e Klee. Aprenda sobre as associacoes forma-cor primarias, a esfera de cores e o legado da Bauhaus no design moderno.