如何基于单一颜色计算Material调色板及Contrast Text？

核心依赖：@material/material-color-utilities #

这个包是Material Design官方提供的色彩计算工具，完全可以满足你的需求，以下是具体实现步骤：

1. 安装依赖

npm install @material/material-color-utilities

2. 完整代码实现

import { Hct, CorePalette, TonalPalette, hexFromArgb, getContrastColor } from '@material/material-color-utilities';

// 输入单一颜色（支持带#或不带#的十六进制格式）
const inputColor = '#1976d2';

// 1. 将输入颜色转换为HCT色彩空间（Material Design 3核心色彩模型）
const inputHct = Hct.fromHex(inputColor);
const inputArgb = inputHct.toInt();

// 2. 生成标准Material主色调板（50-900）
const corePalette = CorePalette.fromArgb(inputArgb);
const primaryPalette = {
  50: hexFromArgb(corePalette.primary.tone(50)),
  100: hexFromArgb(corePalette.primary.tone(100)),
  200: hexFromArgb(corePalette.primary.tone(200)),
  300: hexFromArgb(corePalette.primary.tone(300)),
  400: hexFromArgb(corePalette.primary.tone(400)),
  500: hexFromArgb(corePalette.primary.tone(500)),
  600: hexFromArgb(corePalette.primary.tone(600)),
  700: hexFromArgb(corePalette.primary.tone(700)),
  800: hexFromArgb(corePalette.primary.tone(800)),
  900: hexFromArgb(corePalette.primary.tone(900))
};

// 3. 生成A系列高饱和度强调调色板（A100/A200/A400/A700）
const highSaturationPalette = TonalPalette.fromHueAndChroma(inputHct.hue, 90);
const aSeriesPalette = {
  A100: hexFromArgb(highSaturationPalette.tone(90)),
  A200: hexFromArgb(highSaturationPalette.tone(80)),
  A400: hexFromArgb(highSaturationPalette.tone(60)),
  A700: hexFromArgb(highSaturationPalette.tone(40))
};

// 4. 计算每个颜色对应的对比文本（Contrast Text）
const getContrastText = (hexColor) => {
  const colorArgb = Hct.fromHex(hexColor).toInt();
  return hexFromArgb(getContrastColor(colorArgb));
};

// 整合调色板与对比文本
const fullPrimaryPalette = Object.fromEntries(
  Object.entries(primaryPalette).map(([tone, color]) => [
    tone, { color, contrastText: getContrastText(color) }
  ])
);

const fullASeriesPalette = Object.fromEntries(
  Object.entries(aSeriesPalette).map(([tone, color]) => [
    tone, { color, contrastText: getContrastText(color) }
  ])
);

// 输出结果
console.log('主色调板（含对比文本）:', fullPrimaryPalette);
console.log('A系列调色板（含对比文本）:', fullASeriesPalette);

关键逻辑说明 #

• HCT色彩空间：Material Design 3采用的色彩模型，将颜色分解为色相（Hue）、色度（Chroma，饱和度）、亮度（Tone），是生成调色板的基础。
• CorePalette：从输入颜色生成完整的Material调色体系，包含主色、次色、中性色等系列，我们这里只提取主色的50-900色调。
• TonalPalette：用于生成特定色相和色度的色调系列，A系列是高饱和度变体，所以设置色度为90，再对应不同亮度值生成A100/A200等色值。
• getContrastColor：官方提供的工具方法，自动根据背景色计算符合Material易读性标准的文本颜色（黑色或白色）。

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