Understanding the Angular Material Color Palette

Scenario

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.

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 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation