material-color-utilities icon indicating copy to clipboard operation
material-color-utilities copied to clipboard

How do I create complete Material color palette with shades 90-900, with accent shades?

Open micobarac opened this issue 2 years ago • 3 comments

How do I create complete Material color palette with shades 90-900, with accent shades, from a single color?

I need color shades 90-900 with A100, A200, A400, A700 accent shades, to define Angular Material Theme.

Other than that, how to include the original color in the palette? Most of the time, generated color palette doesn't include the original color.

micobarac avatar Dec 15 '23 07:12 micobarac

Use like HCT(hue=sourceColor.hue, chroma=48.0, tone=t).toArgb(), where t={0,10, 20,...} corresponding to {A1000, A900, A800,...}

Kyant0 avatar Jun 12 '24 02:06 Kyant0

Another question of interest is how the original Material Design color palette was generated; was a similar approach as HCT taken there?

peteroupc avatar Jun 21 '24 21:06 peteroupc

The method I say is the original generation method. But in the current palette we don't have the concept of A1000,... We only have "color roles", such as primary, primary container, they can't be accurately mapped from the legacy A400,... If you have read the source code, you will find it's relation to background color, contrast curve, and so many things, which can't be represented by A1000,...

Kyant0 avatar Jun 22 '24 02:06 Kyant0