如何在 JS/SCSS 中生成 Material 3 调色板？

Question

背景：

我正在尝试基于 Google 的 Material Theme Builder 3在 SASS/JS 中生成调色板，它要求根据相对亮度而不是亮度/亮度函数生成色调调色板。

问题：

我可以使用 SCSS 中的以下函数获取亮度值：

@function get-luminance($color) {
    $colors: (
        'red': red($color),
        'green': green($color),
        'blue': blue($color),
    );

    @each $name, $value in $colors {
        $adjusted: 0;
        $value: $value / 255;

        @if $value < 0.03928 {
            $value: $value / 12.92;
        } @else {
            $value: ($value + 0.055) / 1.055;
            $value: math.pow($value, 2.4);
        }

        $colors: map-merge($colors, ($name: $value));
    }

    @return (map-get($colors, 'red') * 0.2126) + (map-get($colors, 'green') * 0.7152) + (map-get($colors, 'blue') * 0.0722);
}

但我正在寻找的是创建一个可以调整某种颜色的亮度的函数，例如

@function adjust-luminance($color, $luminance-value) {
    // Calculations required to adjust luminance here
    @return $adjusted-luminance-color;
}

$seed-color: #6750A4;

.color-tone-99 {
    background: adjust-luminance($seed-color, 97.4); // Output: #FFFBFE
}

我一直无法弄清楚上面的计算部分。我还遇到过这个Color Luminance Figma 插件，它可以在 Figma 中实现此功能，但问题是它是如何实现的。

任何帮助将不胜感激！

谢谢

Answer 1

材料 3 使用称为 HCT 的新系统：

事实证明，谷歌平台与生态系统颜色科学家 James O'Leary 开发了一种全新的、感知准确的颜色系统，称为 HCT，代表色调、彩度、色调。

他写了一篇很棒的文章，解释了为什么以及如何在这里创建它： 色彩与设计的科学。

Material Foundation 还在这里发布了他们的 TypeScript 代码库： Material Color Utilities GitHub Repo。

如何在 JavaScript 中生成 Material 3 调色板：

1.通过NPM安装Material Color Utilities：

npm i @material/material-color-utilities

2. 导入实用程序：

import { argbFromHex, hexFromArgb, themeFromSourceColor, TonalPalette } from '@material/material-color-utilities';

3. 获取主题JSON：

const m3ThemeColorsJSON = themeFromSourceColor(argbFromHex('#6750A4'), []);

4. 这将返回 ARGB 颜色的 JSON 映射，要将其转换为十六进制颜色，请使用 hexFromArgb() 函数。例子：

const primary = hexFromArgb(theme.schemes.light.primary);

5. 如果您想从色调调色板中获取颜色，请使用以下命令：

const primary98 = TonalPalette.fromInt(primary).tone(98);

SCSS 中的支持：

Material Foundation 打算在未来发布 SCSS 版本，但任何人都可以在 JavaScript 中使用它来生成 SCSS 文件。