Background:

I'm trying to generate a color palette in SASS based on Google's Material Theme Builder 3 which requires tonal palette's to be generated based on relative luminance and not lightness/brightness function.

Problem:

I can get the luminance value using the following function in 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);
}

But what I'm looking for is to create a function that can adjust a certain color's luminance e.g.

@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
}

I haven't been able to figure out the calculations part above. I've also come across this Color Luminance Figma plugin that does it in Figma but how does it do it is the question.

Any help would be highly appreciated!

Thanks