In Theming Angular Material 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.

Approach

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 Theme Creation and Material Design Guidance 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.

Understanding the Angular Material Color Palette | Task

Scenario

Approach