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
¿Cuántos colores hay en Material Design?▾
Material Design incluye 19 familias de color con 254 tonos en total, cada una desde 50 (el más claro) hasta 900 (el más oscuro), además de variantes de acento para algunas familias.
¿Cómo uso los colores de Material Design en mi proyecto?▾
Haz clic en cualquier muestra para copiar su valor hex, RGB o HSL. También puedes usar el botón Exportar para descargar la paleta completa como propiedades personalizadas CSS, configuración de Tailwind, variables SCSS o JSON.
¿Cuál es la diferencia entre colores primarios y de acento en Material Design?▾
Los colores primarios (tonos 50–900) se usan para los elementos principales de la UI, como barras de app y botones. Los colores de acento (A100–A700) son alternativas vivas que se usan en botones de acción flotantes, interruptores y resaltados.