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
Combien de couleurs compte Material Design ?▾
Material Design comprend 19 familles de couleurs pour un total de 254 nuances, chacune allant de 50 (la plus claire) à 900 (la plus foncée), plus des variantes d'accent pour certaines familles.
Comment utiliser les couleurs Material Design dans mon projet ?▾
Cliquez sur une pastille pour copier sa valeur hex, RGB ou HSL. Vous pouvez aussi utiliser le bouton Exporter pour télécharger toute la palette en propriétés personnalisées CSS, config Tailwind, variables SCSS ou JSON.
Quelle est la différence entre couleurs primaires et couleurs d'accent dans Material Design ?▾
Les couleurs primaires (nuances 50 à 900) servent aux éléments principaux de l'interface comme les barres d'application et les boutons. Les couleurs d'accent (A100 à A700) sont des variantes vives utilisées pour les boutons d'action flottants, les interrupteurs et les mises en évidence.