Material Design Colors
19 color families, 254 shades. Click any color to copy.
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Grey
Blue Grey
About Material Design Colors
Material Design's color system was created by Google to help designers and developers build visually cohesive products. The palette spans 19 primary color families — from Red and Pink to Blue Grey — each with 10 numbered shades (50 through 900) plus accent variants, giving you 254 hand-tuned colors that work harmoniously together.
Every shade is engineered for accessible contrast on light and dark surfaces. The 500 shade typically serves as the primary brand color, while lighter shades (50–200) work well for backgrounds and darker shades (700–900) suit text and icon tints. Accent shades (A100–A700) provide high-saturation options for call-to-action elements.
Click any swatch above to copy its hex, RGB, or HSL value. Use the Export button to download the entire set — or a single family — as CSS custom properties, Tailwind config, SCSS variables, or raw JSON for direct integration into your design system.
Frequently Asked Questions
Quantas cores há no Material Design?▾
O Material Design inclui 19 famílias de cores com 254 tons no total, cada uma indo de 50 (mais claro) a 900 (mais escuro), além de variantes de destaque para algumas famílias.
Como uso as cores do Material Design no meu projeto?▾
Clique em qualquer amostra de cor para copiar seu valor hex, RGB ou HSL. Você também pode usar o botão Exportar para baixar a paleta inteira como propriedades personalizadas CSS, config do Tailwind, variáveis SCSS ou JSON.
Qual é a diferença entre cores primárias e de destaque no Material Design?▾
As cores primárias (tons 50–900) são usadas nos elementos principais da UI, como barras de app e botões. As cores de destaque (A100–A700) são alternativas vívidas usadas em botões de ação flutuantes, interruptores e realces.