Material Color Utilities 中的颜色匹配功能实现解析

Material Design 3 的色彩系统提供了强大的动态主题功能，其中颜色匹配(Color Match)是一个重要特性。本文将深入分析如何在 material-color-utilities 库中实现与 Material Theme Builder 网站相同的颜色匹配效果。

颜色匹配的核心概念

颜色匹配功能允许开发者指定一个主色调后，系统会自动生成一组协调的色彩方案。在 Material Theme Builder 网站上，当启用"Color match"选项时，主容器颜色会直接使用原始主色调值，而不是自动生成的衍生色。

问题现象分析

开发者在使用 material-color-utilities 库时发现，无论使用哪种方法创建色彩方案，都无法直接复现网站上的颜色匹配效果。尝试了以下方法均未成功：

1. 直接使用 themeFromSourceColor
2. 使用 blend 参数设置为 true/false
3. 使用 Scheme.light 和 Scheme.lightContent
4. 使用 CorePalette.of 和 CorePalette.contentOf

所有这些方法生成的 primaryContainer 颜色都是 #ffdf96，而期望的是原始主色调 #ffc600。

解决方案：使用 SchemeFidelity

正确的实现方式是使用 SchemeFidelity 类，这是 Material Design 3 中专门为保持颜色保真度设计的方案类型。以下是实现代码示例：

import {
  argbFromHex,
  Hct,
  SchemeFidelity,
} from '@material/material-color-utilities';

function getSchemeAccent(accentHex: string) {
  const argb = argbFromHex(accentHex);
  const hct = Hct.fromInt(argb);
  const scheme = new SchemeFidelity(hct, false, 0);
  return scheme;
}

实现原理

1. HCT 色彩空间转换：首先将十六进制颜色值转换为 ARGB 格式，再转换为 HCT（色调-色度-明度）色彩空间，这是 Material Design 3 使用的色彩模型。

2. SchemeFidelity 方案：这种方案类型会尽可能保持原始颜色的保真度，不会对主色调进行过多的调整和混合，因此 primaryContainer 会直接使用或非常接近原始颜色。

3. 参数说明：

   • 第二个参数 false 表示不使用深色模式
   • 第三个参数 0 表示不使用色彩对比度调整

实际应用建议

在实际项目中，可以根据需要选择不同的方案类型：

1. SchemeFidelity：保持颜色保真度，适合需要精确控制颜色的场景
2. SchemeContent：基于内容的重要程度调整颜色
3. SchemeTonalSpot：使用色调点创建协调的色彩方案

理解这些方案类型的区别对于创建符合设计意图的主题至关重要。Material Design 3 的色彩系统提供了丰富的定制选项，开发者可以根据具体需求选择最合适的实现方式。