使用ng generate生成Angular Material主题时，如何让输入色贴近50号主色？

当你使用ng generate @angular/material:theme-color生成主题调色板时，输入#a9c93b后发现默认50号色（#678000）和目标色偏差大，最接近的是80号色（#b3d344），这是因为Angular Material的调色工具会根据输入颜色的亮度、饱和度自动将其映射到对应色阶——你的目标色亮度较高，所以被分配到了更亮的80号位置。要让#a9c93b成为50号主色，可通过以下方法实现：

方法1：手动修改调色板色阶 #

找到生成的主题文件（通常是src/styles.scss或单独的主题SCSS文件），直接替换50号色的值为#a9c93b，同时调整其他色阶保持渐变自然：

$custom-primary: (
  0: #000000,
  10: #1e2705,
  20: #37420a,
  25: #42500d,
  30: #4d5f10,
  35: #586d13,
  40: #637c16,
  50: #a9c93b, // 替换为目标颜色
  60: #b7d356,
  70: #c4dd71,
  80: #d2e78c,
  90: #e0f1a7,
  95: #e9f6b9,
  98: #f4fbdf,
  99: #f8fde7,
  100: #ffffff,
);

// 应用到主题
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
  )
));

@include mat.all-component-themes($custom-theme);

方法2：用Material Color Tool生成匹配调色板 #

使用Material官方的颜色工具，输入#a9c93b作为主色，生成以该颜色为50号的完整调色板，再将生成的色阶复制到Angular主题定义中。这种方式能保证色阶过渡更自然，符合Material Design的色彩规范。

方法3：调整调色板基准色阶 #

通过mat.define-palette自定义调色板时，指定基准色阶为50，同时定义暗/亮对比色：

// 先定义包含目标50号色的基础色阶
$base-palette: (
  50: #a9c93b,
  100: #b7d356,
  200: #c4dd71,
  300: #d2e78c,
  400: #e0f1a7,
  500: #edfbb2,
  600: #f5fec0,
  700: #f9ffd0,
  800: #fcffe0,
  900: #ffffff,
);

// 定义调色板，将50设为基准色
$custom-primary: mat.define-palette($base-palette, 50, 400, 100);

// 应用主题
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
  )
));

@include mat.all-component-themes($custom-theme);

内容的提问来源于stack exchange，提问作者Zachu