用途:从品牌色或任意十六进制源色程序化生成完整的 Material Design 3 配色主题,使用 @material/material-color-utilities——与 Google Material Theme Builder 相同的色彩算法库。
主要能力:基于 HCT 色彩空间(色相、色度、明度)从单一源色生成 Primary、Secondary、Tertiary、Neutral、Neutral Variant 五组色调调色板,每组包含 0–100 色阶,再映射为语义色角色(如浅色下 primary 取色调 40,深色下取 80)。支持生成浅色与深色方案、surface container 色阶、fixed 强调色,并可添加品牌自定义扩展色(可选择与源色协调)。
使用方式:先安装 npm install @material/material-color-utilities。技能目录提供 generate-theme.mjs,可运行 node generate-theme.mjs "#FF9800"(默认 tonal-spot 输出 CSS)、加 --json 输出 JSON、加 --scheme expressive 选择方案。也可在代码中调用 themeFromSourceColor(argbFromHex("#FF9800")) 获取方案,用 toJSON 与 hexFromArgb 导出 CSS 自定义属性或 JSON。
方案变体:--scheme 支持 9 种动态配色策略:tonal-spot(默认)、content、expressive、fidelity、fruit-salad、monochrome、neutral、rainbow、vibrant。
适用场景:新建 M3 项目需要完整色令牌、把十六进制品牌色转成 M3 调色板、程序化生成明暗主题、导出 CSS/JSON/框架配置,以及需要可变派生色的网页或应用界面。
限制:生成的令牌仍需人工验证明暗主题的 WCAG 对比度合规;具体支持的平台库、定价或价格资料暂未提供。