Sass根据指定颜色获取Material Design色调值问题咨询

云原生阿岚

2026-8-25

解决Sass与Material Design 3色调系统不匹配的问题

核心原因

Material Design 3（M3）的色调系统基于CAM16色彩空间的感知亮度（L*值），而Sass的color.lightness()、color.scale()等函数用的是HSL色彩模型的亮度通道，两者计算逻辑完全不同，直接用Sass的HSL相关函数自然匹配不上M3的色调刻度。

解决方案

1. 直接映射M3官方色值（最简单可靠）

M3每个主色都有一套固定的0-100色调色板，你可以先获取#3a691e对应的完整色调值，然后在Sass里直接定义变量使用：

// 对应M3 40色调的目标色
$primary-40: #3a691e;
// 对应M3 90色调的色值（示例，需以官方工具输出为准）
$primary-90: #e8f5e0;

2. 自定义CAM16亮度转换函数（动态计算）

如果需要动态生成色调，Sass本身没有内置CAM16相关函数，你需要自己实现转换逻辑：

先把目标RGB颜色转成CAM16色彩空间，拿到当前的L*值（对应M3的40色调）
调整L值到目标色调对应的数值（比如90色调对应的L约为90，具体参考M3色调定义）
把调整后的CAM16值转回RGB，得到对应色调的颜色

简化示例逻辑（需完善色彩转换细节）：

@function cam16-to-rgb($l, $a, $b) {
  // 实现CAM16到RGB的转换逻辑
}

@function get-m3-tone($color, $target-tone) {
  // 1. 将$color转为CAM16的L*、a*、b*值
  $cam16: rgb-to-cam16($color);
  $current-l: nth($cam16, 1);
  $a: nth($cam16, 2);
  $b: nth($cam16, 3);
  
  // 2. 调整L*到目标色调对应的数值
  $new-l: $target-tone; // M3色调刻度基本对应CAM16的L*值
  
  // 3. 转回RGB
  @return cam16-to-rgb($new-l, $a, $b);
}

// 使用示例
$primary-color: #3a691e;
$primary-90: get-m3-tone($primary-color, 90);