Fondo:

Estoy tratando de generar una paleta de colores en SASS basada en Material Theme Builder 3 de Google, que requiere que la paleta tonal se genere en función de la luminancia relativa y no de la función de luminosidad/brillo.

Problema:

Puedo obtener el valor de luminancia usando la siguiente función en 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); }

Pero lo que estoy buscando es crear una función que pueda ajustar la luminancia de un determinado color, por ejemplo.

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

No he podido descifrar la parte de cálculos anterior. También me encontré con este complemento Color Luminance Figma que lo hace en Figma, pero la pregunta es cómo lo hace.

¡Cualquier ayuda sería muy apreciada!

Gracias