Color collection
Material Design Colors
Google's Material Design color system — 19 palettes, each with 10 standard shades and up to 4 vibrant accent shades.
About Material Design colors
The Material Design color palette was introduced by Google in 2014 as part of the Material Design specification. It provides a systematic approach to color in UI design, with each palette running from 50 (lightest) to 900 (darkest) in evenly distributed steps.
Sixteen of the nineteen palettes also include accent shades — A100, A200, A400, and A700 — which are more saturated and vibrant variants intended for interactive elements like buttons, highlights, and focus indicators. The remaining three (Brown, Grey, Blue Grey) are neutral palettes without accents.
Using Material Design colors
In a Material Design or Material UI project, colors are typically referenced by palette name and shade weight:
import { blue, red } from '@mui/material/colors';
/* or in CSS */
color: #2196f3; /* Blue 500 */
color: #448aff; /* Blue A200 */