SASS | Funciones de color

Componentes de color: antes de pasar a las funciones de color de SASS, asegurémonos de conocer los elementos de color que cambian. La teoría del color simple divide cualquier color en tres componentes básicos: matiz, saturación y valor.

• HUE (también llamado “color local”) es generalmente el color del que hablamos. Me gusta: cielo azul, sol amarillo.
• La saturación es la medida que indica la cantidad de matiz existente en el color, es decir, la intensidad del color. Por ejemplo, el color de las nubes cambia de blanco a azul y luego a negro.
• El valor es la medida de la claridad u oscuridad del color. Por ejemplo, un fondo marrón liso con una parte a la luz del sol y la otra a la sombra.

Modelos de color: en un mundo tecnológico, los colores se representan como RGB o HSL. (Hay varios otros modelos como CMYK y LAB, pero solo RGB y HSL son los relevantes para el desarrollo de SASS).

Los valores RGB son la medida de la cantidad de «rojo», «verde» y «azul» en el color básico. Cada componente es un valor entre 0 (color no presente) a 255 (color completo). Los colores RGB se expresan básicamente en hexadecimales como #0000ff o #2abd35.

HSL significa «tono, saturación y luminosidad». También se pueden obtener modelos HSV (aquí la V significa «valor») o HSB (aquí la B significa «brillo»). Por ejemplo, Photoshop usa HSB.

hsl($tono, $saturación, $valor): el tono se indica como un grado en la rueda de colores (el rojo puro está en 0, el verde puro en 120 y el azul puro en 240), mientras que la saturación y el valor se indican como porcentajes .

Este es un ejemplo bastante simple. Al cambiar entre RGB y HSL, el componente de matiz del color a veces puede volverse bastante feo. Por ejemplo, el matiz de #ac4138 es 4,65517 grados.

opacidad: en los modelos de color RGB y HSL, la opacidad se proporciona a través de un valor alfa entre 0 y 100 %, siendo 0 completamente transparente y 100 % completamente opaco.

Funciones de color SASS: rgb() y hsl() se utilizan para hacer CSS más breve. Todos los navegadores modernos admiten las funciones CSS rgba() y hsla(), por lo que el transpilador SASS mantendrá las mismas funciones en el CSS.

Las tres funciones restantes, “escala de grises(), invertir() y complementar()” crean un nuevo color basado en el actual. La función Invert(), invierte cada valor rojo, verde y azul y complementa(), rota el color 180 grados, da resultados bastante similares pero no idénticos.

1. rgb($rojo, $verde, $azul): este método crea un color opaco basado en los valores o porcentajes decimales dados.
   • Ejemplo:

     rgb(252, 186, 3)

   • Producción:

     #fcba03

     rgb(50%, 50%, 100%)

   • Producción:

     #8080ff

2. rgba($rojo, $verde, $azul, $alfa): este método crea un color basado en los valores decimales o porcentuales dados en la opacidad dada.
   • Ejemplo:

     rgba(71, 214, 75, 0.5 )

   • Producción:

     rgba(71, 214, 75, 0.5 )

3. hsl($tono, $saturación, $luminosidad): este método crea un color opaco basado en el tono dado (en grados), la saturación y la luminosidad (en porcentajes).
   • Ejemplo:

     hsl(122, 64, 56)

   • Producción:

     #47d74c

4. hsla($tono, $saturación, $luminosidad, $alfa): este método crea un color basado en el tono, la saturación y la luminosidad especificados en la opacidad especificada.
   • Ejemplo:

     hsla(122, 64, 56, 50)

   • Producción:

      hsla(122, 64, 56, 50)

5. escala de grises ($color): este método devuelve un valor de gris que tiene la misma intensidad que «color».
   • Ejemplo:

     grayscale(#ad4038)

   • Producción:

     #737373

6. complement($color): este método devuelve un color que tiene la misma saturación y valor, pero tiene un tono 180 grados diferente del tono de «color».
   • Ejemplo:

     complement(#47d74c)

   • Producción:

     #d747d2

7. invertir ($color): este método devuelve el inverso de los componentes individuales rojo, verde y azul de «color».
   • Ejemplo:

     invert(#ad4038)

   • Producción:

     #52bfc7

Funciones de extracción de componentes SASS:

1. red($color): este método devuelve el componente rojo de “color”.
   • Ejemplo:

     red(#d747d2)

   • Producción:

     215

2. green($color): Este método devuelve el componente verde de “color”.
   • Ejemplo:

     green(#d747d2)

   • Producción:

     71

3. blue($color): este método devuelve el componente azul de “color”.
   • Ejemplo:

     blue(#d747d2)

   • Producción:

     210

4. hue($color): este método devuelve el componente de tono de «color».
   • Ejemplo:

     hue(#d747d2)

   • Producción:

      302°

5. saturación ($color): este método devuelve el componente de saturación de «color».
   • Ejemplo:

     saturation(#d747d2)

   • Producción:

     64%

6. lightness($color): este método devuelve el componente de luminosidad de «color».
   • Ejemplo:

     lightness(#d747d2)

   • Producción:

     56%

7. alpha($color): este método devuelve el canal alfa de color como un número entre 0 y 1.
   • Ejemplo:

     alpha(#d747d2)

   • Producción:

     1

8. opacity($color): este método devuelve la opacidad del color como un número entre 0 y 1.
   • Ejemplo:

     opacity(rgba(215, 71, 210, 0.7);

   • Producción:

     0.7

SASS manipular funciones de color

1. mix($color1, $color2, $weight): este método crea un color que es la combinación de color1 y color2. El parámetro de peso debe estar entre 0% y 100%. Un peso mayor significa que se debe usar más color1. Un peso más pequeño significa que se debe usar más de color2. El valor predeterminado es 50%.
2. ajustar-hue ($color, $grados): este método ajusta el tono del color con un grado de -360 grados a 360 grados.
   • Ejemplo:

     adjust-hue(#7fffd4, 80deg);

   • Producción:

     #8080ff

3. ajuste-color($color, $rojo, $verde, $azul, $tono, $saturación, $luminosidad, $alfa): Este método ajusta uno o más parámetros por la cantidad dada. Esta función suma o resta la cantidad dada al valor de color existente.
4. change-color($color, $red, $green, $blue, $hue, $saturation, $lightness, $alpha): este método establece uno o más parámetros de un color en nuevos valores.
   • Ejemplo:

     change-color(#7fffd4, red: 255);

   • Producción:

      #ffffd4

5. scale-color($color, $red, $green, $blue, $saturation, $lightness, $alpha): Este método escala uno o más parámetros de color.
6. rgba($color, $alpha): Este método crea un nuevo color con el canal alfa dado.
   • Ejemplo:

     rgba(#7fffd4, 30%)

   • Producción:

     rgba(127, 255, 212, 0.3)

7. lighten($color, $amount): Este método crea un color más claro con una cantidad entre 0% y 100%. El parámetro de cantidad aumenta la luminosidad de HSL en ese porcentaje.
8. darken($color, $amount): Este método crea un color más oscuro con una cantidad entre 0% y 100%. El parámetro de cantidad disminuye la luminosidad de HSL en ese porcentaje.
9. saturar ($color, $cantidad): Este método crea un color más saturado con una cantidad entre 0% y 100%. El parámetro de cantidad aumenta la saturación de HSL en ese porcentaje.
10. desaturar ($color, $cantidad): Este método crea un color menos saturado con una cantidad entre 0% y 100%. El parámetro de cantidad disminuye la saturación de HSL en ese porcentaje.
11. opacify($color, $amount): este método crea un color más opaco con una cantidad entre 0 y 1. El parámetro de cantidad aumenta el canal alfa en esa cantidad.
12. V: este método crea un color más opaco con una cantidad entre 0 y 1. El parámetro de cantidad aumenta el canal alfa en esa cantidad.
13. transparentize($color, $amount): este método crea un color más transparente con una cantidad entre 0 y 1. El parámetro de cantidad disminuye el canal alfa en esa cantidad.
14. fade-out($color, $amount): este método crea un color más transparente con una cantidad entre 0 y 1. El parámetro de cantidad disminuye el canal alfa en esa cantidad.