1

背景：

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

在此处输入图像描述

问题：

我可以使用 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
}

我无法弄清楚上面的计算部分。我也遇到过这个在 Figma 中实现的Color Luminance Figma 插件，但它是如何实现的却是个问题。

任何帮助将不胜感激！

谢谢

4

0 回答 0