es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo generar paletas de color de 3 materiales en JS/SCSS?

18 Jul, 2023 Programación

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.

enter image description here

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

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    // Convertir de RGB a HSL
@function rgb-to-hsl($r, $g, $b) {
  // Convertir cada componente a decimal entre 0 y 1
  $r: $r / 255;
  $g: $g / 255;
  $b: $b / 255;

  // Encontrar los valores mínimos y máximos de los componentes
  $min: min($r, $g, $b);
  $max: max($r, $g, $b);

  // Calcular el tono (hue)
  $delta: $max - $min;
  @if $delta == 0 {
    $hue: 0;
  } @else if $max == $r {
    $hue: 60 * (($g - $b) / $delta % 6);
  } @else if $max == $g {
    $hue: 60 * (($b - $r) / $delta + 2);
  } @else if $max == $b {
    $hue: 60 * (($r - $g) / $delta + 4);
  }

  // Calcular la luminosidad (lightness)
  $lightness: ($max + $min) / 2;

  // Calcular la saturación
  @if $delta == 0 {
    $saturation: 0;
  } @else {
    $saturation: $delta / (1 - abs(2 * $lightness - 1));
  }

  @return (round($hue), round($saturation * 100%), round($lightness * 100%));
}

// Convertir de HSL a RGB
@function hsl-to-rgb($hue, $saturation, $lightness) {
  // Convertir los valores de saturación y luminosidad a decimales
  $saturation: $saturation / 100;
  $lightness: $lightness / 100;

  // Calcular la croma y los valores intermedios
  $chroma: (1 - abs(2 * $lightness - 1)) * $saturation;
  $intermediate: $chroma * (1 - abs(($hue / 60) % 2 - 1));

  // Calcular los componentes RGB y agregar el valor de luminosidad
  $r: $lightness - $chroma / 2 + $intermediate;
  $g: $lightness - $chroma / 2 - $intermediate * abs((($hue / 60) % 3) - 1);
  $b: $lightness - $chroma / 2 - $intermediate * abs((($hue / 60) % 3) - 2);

  // Convertir cada componente a un valor entre 0 y 255
  $r: round($r * 255);
  $g: round($g * 255);
  $b: round($b * 255);

  @return rgb($r, $g, $b);
}

// Ajustar la luminancia de un color
@function adjust-luminance($color, $luminance-value) {
  // Obtener los componentes rojo, verde y azul del color
  $red: red($color);
  $green: green($color);
  $blue: blue($color);

  // Convertir el color a HSL
  $hsl: rgb-to-hsl($red, $green, $blue);

  // Ajustar la luminosidad para modificar la luminancia
  $lightness: $hsl[3] + $luminance-value;
  // Asegurar que el valor de luminosidad esté entre 0% y 100%
  $lightness: max(min($lightness, 100), 0);

  // Convertir el color ajustado nuevamente a RGB
  $new-color: hsl-to-rgb($hsl[1], $hsl[2], $lightness);

  @return $new-color;
}

// Ejemplo de uso
$seed-color: #6750A4;

.color-tone-99 {
  background: adjust-luminance($seed-color, 97.4); // Salida: #FFFBFE
}

    En esta solución, definimos tres funciones. La función rgb-to-hsl convierte un color de RGB a HSL. La función hsl-to-rgb convierte un color de HSL nuevamente a RGB. La función adjust-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.

Comments are closed.