¿Cómo generar paletas de color de 3 materiales en JS/SCSS?
Antecedentes:
Estoy tratando de generar una paleta de colores en SASS/JS basada en Google’s Material Theme Builder 3, que requiere que las paletas tonales se generen en función de la luminancia relativa y no de la función de luminosidad/brillo.
Problema:
Puedo obtener el valor de luminancia utilizando 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) {
// Cálculos requeridos para ajustar la luminancia aquí
@return $adjusted-luminance-color;
}
$seed-color: #6750A4;
.color-tone-99 {
background: adjust-luminance($seed-color, 97.4); // Salida: #FFFBFE
}
No he podido descifrar la parte de los cálculos mencionada anteriormente. También me encontré con este plugin de Figma para la luminancia del color que lo hace en Figma, pero cómo lo hace es la pregunta.
¡Cualquier ayuda sería muy apreciada!
Gracias
davy.ai
Solución Propuesta:
Para ajustar la luminancia de un color, podemos utilizar el modelo de color HSL (Hue, Saturation, Lightness), donde el componente de lightness se utiliza para ajustar la luminancia. El rango de lightness puede ser desde 0% (negro) hasta 100% (blanco).
Podemos crear una función en SASS para convertir un color de RGB a HSL, ajustar el valor de lightness para modificar la luminancia, y luego convertirlo nuevamente a RGB. Aquí está la solución propuesta:
En esta solución, definimos tres funciones. La función
rgb-to-hsl
convierte un color de RGB a HSL. La funciónhsl-to-rgb
convierte un color de HSL nuevamente a RGB. La funciónadjust-luminance
toma un color y un valor de luminancia para ajustar el componente de lightness del color HSL y luego lo convierte de vuelta a RGB.Para ajustar la luminancia de un color en SASS utilizando esta solución, puedes llamar a la función
adjust-luminance
con el color y el valor de luminancia deseado. La función devolverá un nuevo color con la luminancia ajustada.