如何在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 代码库： 材质颜色实用程序 GitHub 存储库。

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

1。通过 NPM 安装 Material Color 实用程序：

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 文件。

Answer 2

Material 3 设计工具使用 HCT 色彩空间。我认为，您想根据自己的目的修改该颜色空间中的内容。

以下代码将使用 npm（可安装nodejs）库

@material/material-color-utilities

，进行从 sRGB 十六进制颜色代码到 HCT 颜色空间的往返转换，以及修改生成的 HCT 值并转换回 sRGB 十六进制代码。我这样做的角度是通过 CLI 调用的脚本进行演示。我希望它适合您的目的。

依赖项：安装了nodejs和material-color-utilities包，可以在本地（从终端运行）：

npm install -g @material/material-color-utilities

——或者在本地创建的项目文件夹中：

npm install @material/material-color-utilities

对于这个用例，我必须覆盖

package.json

（安装位置）的

package/@material/material-color-utilities

，如下所示：

{
  "dependencies": {
    "@material/material-color-utilities": "^0.2.7",
    "type": "module"
  }
}

--添加

"type": "module"

行 -- 然后将以下代码保存到名为（例如）

sRGB_to_HCT_to_sRGB.mjs

的文件中

注意：文件必须具有

.mjs

扩展名才能正常工作。*

文件/代码：

sRGB_to_HCT_to_sRGB.mjs

：

import { Hct } from "@material/material-color-utilities"

// Hct.fromInt will accept a hex value in format a r g b (eg 0xff4285f4) OR just rgb (e.g. 4285f4) :
// TO TEST/DEBUG, compare the final printed value to the following variable with the 0x chopped off. Note that this initial print may chop off any leading zeros, but the value is still correct in that case:
var originalValue = 0x8fe5b9
// console.log(originalValue)
console.log("original sRGB values, hex format:\t", originalValue.toString(16))

var color = Hct.fromInt(originalValue)

console.log("HCT values:")
console.log("Hue:", color.hue)
console.log("Chroma:", color.chroma)
console.log("Tone:", color.tone)

var reconstructed = Hct.from(
    color.hue,
    color.chroma,
    color.tone,
).toInt().toString(16).slice(2)

console.log("Reconstructed sRGB values, hex format:\t", reconstructed)

// MODIFYING VALUES IN HCT SPACE:
color.hue +=1
color.chroma += 2
color.tone += 3

console.log("\nModded HCT values:")
console.log("Hue:", color.hue)
console.log("Chroma:", color.chroma)
console.log("Tone:", color.tone)

// becomes after convert back to sRGB: 91efc1:
reconstructed = Hct.from(
    color.hue,
    color.chroma,
    color.tone,
).toInt().toString(16).slice(2)

console.log("~Modded sRGB values, hex format:\t", reconstructed)

---

运行代码，例如终端，打开包含文件的路径的终端，然后运行：

node sRGB_to_HCT_to_sRGB.mjs

输出：

original sRGB values, hex format:        8fe5b9
HCT values:
Hue: 164.34413232095446
Chroma: 41.27889003143768
Tone: 84.67970676233278
Reconstructed sRGB values, hex format:   8fe5b9

Modded HCT values:
Hue: 165.11479101939187
Chroma: 43.531612419379805
Tone: 87.77714825778628
~Modded sRGB values, hex format:         91efc1

HCT 空间中值的修改可能最好在 (H)ue、(C)hroma、(T)one 允许的最小/最大范围内完成。哪里有这方面的参考。查找这个是我项目的下一步:)

拼凑并改编自：

• 软件包文档
• 某人使用该库的沙盒演示

*对 NODEJS 项目的反馈：仅仅为了导入 CLI 使用的模块就必须破解这样的包，这是非常糟糕的。 您应该重新引入许多开发人员精心恳求的 CLI 开关出于此目的，如果您检测到用户可能希望使用该开关，则提供 CLI 反馈建议使用该开关。对于这个非常常见的用例（CLI 脚本）来说，仅仅为了让它工作（并弄清楚如何工作！）而涉及的研究和黑客工作是非常过多的。你让这件事变得太难了。