SASS-only Material Angular Palette generator

SASS Material Angular Palette Generator

With my job, I often need to replicate projects from a template based on Angular Material. When I do that, one of the first things that I usually need to change is the color scheme.

Angular Material’s color scheme is defined by two palettes: primary and accent. These two palettes define a range of colors used by all components.

There are many tools available online to generate such palettes. My personal favourite is Material Design Color Generator (also available on GitHub). This tool includes a code generator that automatically creates a SASS list in Angular Material’s accepted format.

I based my SASS color palette generator on Mikel Bitson‘s code. This is a simple SASS translation that makes it easier to adjust colors directly from your code. 

Read more