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

Question

背景:

我正在尝试根据 Google's 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 plugin在 Figma 中可以做到，但问题是它是如何做到的。

非常感谢任何帮助!

谢谢

Answer 1

Material 3 使用称为 HCT 的新系统:

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

他写了一篇很棒的文章，解释了为什么以及如何在此处创建它: The Science of Color & Design .

Material Foundation 也在这里发布了他们的 TypeScript 代码库: Material Color Utilities GitHub Repo .

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

<强>1。通过 NPM 安装 Material Color Utilities:

npm i @material/material-color-utilities

<强>2。导入实用程序:

从“@material/material-color-utilities”导入 { argbFromHex, hexFromArgb, themeFromSourceColor, TonalPalette };

<强>3。获取主题 JSON:

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

<强>4。这将返回 ARGB 颜色的 JSON 映射，要将它们转换为 HEX 颜色，请使用 hexFromArgb() 函数。示例:

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

<强>5。如果您想从 Tonal Palette 中获取颜色，请使用以下命令:

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

SCSS 支持:

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