Funciones de color de Sass

Hemos dividido las funciones de color en Sass en tres partes:

  • Establecer funciones de color
  • Obtener funciones de color
  • Manipular funciones de color:

Sass establecer funciones de color

Function Description & Example
rgb(red, green, blue) Establece un color usando el modelo Rojo-Verde-Azul (RGB). Un valor de color RGB se especifica con: rgb (rojo, verde, azul). Cada parámetro define la intensidad de ese color y puede ser un número entero entre 0 y 255, o un valor porcentual (de 0% a 100%).

Ejemplo:
rgb(0, 0, 255); // se representa como azul porque el parámetro azul se establece en su valor más alto (255) y los demás se establecen en 0
rgba(red, green, blue, alpha) Establece un color usando el modelo Red-Green-Blue-Alpha (RGBA). Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad del color. El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).

Ejemplo:
rgba(0, 0, 255, 0.3); // renderiza como azul con opacidad
hsl(hue, saturation, lightness) Establece un color utilizando el modelo Tono-Saturación-Luminosidad (HSL) y representa una representación de colores en coordenadas cilíndricas. El tono es un grado en la rueda de colores (de 0 a 360): 0 o 360 es rojo, 120 es verde, 240 es azul. La saturación es un valor porcentual; 0% significa un tono de gris y 100% es el color completo. La ligereza también es un porcentaje; 0% es negro, 100% es blanco.

Ejemplo:
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green
hsla(hue, saturation, lightness, alpha) Establece un color utilizando el modelo Hue-Saturation-Lightness-Alpha (HSLA). Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad del color. El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).

Ejemplo:
hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity
grayscale(color) Establece un color gris con la misma luminosidad que el color.

Ejemplo:
grayscale(#7fffd4);
Result: #c6c6c6
complement(color) Establece un color que es el color complementario de color.

Ejemplo:
complement(#7fffd4);
Result: #ff7faa
invert(color, weight) Establece un color que es el color inverso o negativo de color. El parámetro de peso es opcional y debe ser un número entre 0 % y 100 %. El valor predeterminado es 100 %.

Ejemplo:
invert(white);
Result: black

Sass Obtener funciones de color

Función Descripción & Ejemplo
red(color) Devuelve el valor rojo de color como un número entre 0 y 255.

Ejemplo:
red(#7fffd4);
Result: 127
red(red);
Result: 255
green(color) Devuelve el valor verde de color como un número entre 0 y 255.

Ejemplo:
green(#7fffd4);
Result: 255
green(blue);
Result: 0
blue(color) Devuelve el valor azul de color como un número entre 0 y 255.

Ejemplo:
blue(#7fffd4);
Result: 212
blue(blue);
Result: 255
hue(color) Devuelve el matiz del color como un número entre 0 grados y 360 grados.

Ejemplo:
hue(#7fffd4);
Result: 160deg
saturation(color) Devuelve la saturación de color HSL como un número entre 0 % y 100 %.

Ejemplo:
saturation(#7fffd4);
Result: 100%
lightness(color) Devuelve la luminosidad HSL del color como un número entre 0 % y 100 %.

Ejemplo:
lightness(#7fffd4);
Result: 74.9%
alpha(color) Devuelve el canal alfa de color como un número entre 0 y 1.

Ejemplo:
alpha(#7fffd4);
Result: 1
opacity(color) Devuelve el canal alfa de color como un número entre 0 y 1.

Ejemplo:
opacity(rgba(127, 255, 212, 0.5));
Result: 0.5

Sass manipular funciones de color

Función Descripción & Ejemplo
mix(color1, color2, weight) Crea un color que es una mezcla 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 %.
adjust-hue(color, degrees) Ajusta el tono del color con un grado de -360° a 360°.

Ejemplo:
adjust-hue(#7fffd4, 80deg);
Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Ajusta uno o más parámetros en la cantidad especificada. Esta función suma o resta la cantidad especificada al valor de color existente.

Ejemplo:
adjust-color(#7fffd4, blue: 25);
Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Establece uno o más parámetros de un color a nuevos valores.

Ejemplo:
change-color(#7fffd4, red: 255);
Result: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) Escala uno o más parámetros de color.
rgba(color, alpha) Crea un nuevo color de color con el canal alfa dado.

Ejemplo:
rgba(#7fffd4, 30%);
Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) Crea un color de color más claro con una cantidad entre 0% y 100%. El parámetro de cantidad aumenta la luminosidad de HSL en ese porcentaje.
darken(color, amount) Crea un color de color más oscuro con una cantidad entre 0% y 100%. El parámetro de cantidad disminuye la luminosidad de HSL en ese porcentaje.
saturate(color, amount) Crea un color de 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.
desaturate(color, amount) Crea un color de color menos saturado con una cantidad entre 0% y 100%. El parámetro de cantidad disminuye la saturación de HSL en ese porcentaje.
opacify(color, amount) Crea un color de color más opaco con una cantidad entre 0 y 1. El parámetro de cantidad aumenta el canal alfa en esa cantidad.
fade-in(color, amount) Crea un color de color más opaco con una cantidad entre 0 y 1. El parámetro de cantidad aumenta el canal alfa en esa cantidad.
transparentize(color, amount) Crea un color de color más transparente con una cantidad entre 0 y 1. El parámetro de cantidad reduce el canal alfa en esa cantidad.
fade-out(color, amount) Crea un color de color más transparente con una cantidad entre 0 y 1. El parámetro de cantidad reduce el canal alfa en esa cantidad.