How to generate a palette in Angular Material 3 with a specific primary color

Question

I need to generate a palette in Angular Material 3 to implement a theme with a specific primary color. The buttons and some other controls should be this specific color. E.g. #C9007E. I'm following the official guide to generate the palette:

> ng generate @angular/material:m3-theme
? What HEX color should be used to generate the M3 theme? It will represent your primary color palette. (ex. #ffffff) #C9007E
...

Unfortunately, the generated palette doesn't contain the color I need. How can I generate the palette so that the primary color (as I understand hue 40 in the palette) will be the color that I need?

// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #C9007E
$_palettes: (
  primary: (
    0: #000000,
    10: #3d0023,
    20: #63003c,
    25: #770049,
    30: #8c0056,
    35: #a10064,
    40: #b70072,
    50: #dd218d,
    60: #ff43a8,
    70: #ff82bb,
    80: #ffb0cf,
    90: #ffd8e5,
    95: #ffecf1,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  ...

Answer 1

Got the same problem and for now use the following code where #33ba60 is my primary color:

@use 'sass:color';

  primary: (
    0: #000000,
    10: color.scale(#33ba60, $lightness: -(100% / 40) * 30),
    20: color.scale(#33ba60, $lightness: -(100% / 40) * 20),
    25: color.scale(#33ba60, $lightness: -(100% / 40) * 15),
    30: color.scale(#33ba60, $lightness: -(100% / 40) * 10),
    35: color.scale(#33ba60, $lightness: -(100% / 40) * 5),
    40: #33ba60,
    50: color.scale(#33ba60, $lightness: (100% / 60) * 10),
    60: color.scale(#33ba60, $lightness: (100% / 60) * 20),
    70: color.scale(#33ba60, $lightness: (100% / 60) * 30),
    80: color.scale(#33ba60, $lightness: (100% / 60) * 40),
    90: color.scale(#33ba60, $lightness: (100% / 60) * 50),
    95: color.scale(#33ba60, $lightness: (100% / 60) * 55),
    98: color.scale(#33ba60, $lightness: (100% / 60) * 58),
    99: color.scale(#33ba60, $lightness: (100% / 60) * 59),
    100: #ffffff,
  ),

For a dark theme hue 80 is used so I use this instead of the above:

  primary-dark: (
    0: #000000,
    10: color.scale(#33ba60, $lightness: -(100% / 80) * 70),
    20: color.scale(#33ba60, $lightness: -(100% / 80) * 60),
    25: color.scale(#33ba60, $lightness: -(100% / 80) * 55),
    30: color.scale(#33ba60, $lightness: -(100% / 80) * 50),
    35: color.scale(#33ba60, $lightness: -(100% / 80) * 45),
    40: color.scale(#33ba60, $lightness: -(100% / 80) * 40),
    50: color.scale(#33ba60, $lightness: -(100% / 80) * 30),
    60: color.scale(#33ba60, $lightness: -(100% / 80) * 20),
    70: color.scale(#33ba60, $lightness: -(100% / 80) * 10),
    80: #33ba60,
    90: color.scale(#33ba60, $lightness: (100% / 20) * 10),
    95: color.scale(#33ba60, $lightness: (100% / 20) * 15),
    98: color.scale(#33ba60, $lightness: (100% / 20) * 18),
    99: color.scale(#33ba60, $lightness: (100% / 20) * 19),
    100: #ffffff,
  ),