Understanding the Angular Material Color Palette

Ole Ersoy
2 min readMay 8, 2022
Image by Kiều Trường from Pixabay


In this article we implemented theming for Angular Material.

And we used the Angular Material color palette selecting the colors mat-indigo, mat-cyan, and mat-deep-orange.

Now we wish to know where to locate the other color palette hues (colors) and what the structure of the Angular Material Sass color palette is.


The Angular Material Theming Documentation shows us how the Sass color palette map is structured.

$indigo-palette: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
// ... continues to 900
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: white,
// ... continues to 900

And so we see that that each number for each color (hue) maps the color to a specific shade of that color.

We also have a nested contrast map that is used to map the text color to the corresponding weight of a particular background color.

The documentation also contains a link to the color palettes such that we get an overview of what colors come with Angular Material.

For guidance on theme creation see this URL.

And for a tool that shows application of color to a UI see this URL.

Also Material Design 3 has just been release and the site has lots of great resources in it.