Funciones de color Sass

Se establece el color utilizando el modelo Red-Green-Blue (RGB)
Se especifica el valor del color RGB mediante rgb(red, green, blue)
Cada parámetro define la intensidad del color, puede ser un entero entre 0 y 255, o un porcentaje (desde 0% hasta 100%)

Ejemplo:

rgb(0, 0, 255);
// Se presenta en azul, porque el parámetro blue se establece en su valor máximo (255), mientras que los otros parámetros se establecen en 0

Establece el color utilizando el modelo de Red-Green-Blue-Alpha (RGBA).
El valor de color RGBA es una extensión del valor de color RGB con un canal alpha - este canal especifica la opacidad del color.
alpha El parámetro es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

Ejemplo:

rgba(0, 0, 255, 0.3); // Presentado como azul con transparencia

Establece el color utilizando el modelo de Hue-Saturation-Lightness - y representa la representación cilíndrica del color.
El tono (hue) es el ángulo en el círculo cromático (de 0 a 360) - 0 o 360 es rojo, 120 es verde, 240 es azul
La saturación (saturación) es un valor porcentual; 0% representa sombras grises, 100% representa colores completos.
La luminosidad (brillo) también es un porcentaje; 0% es negro, 100% es blanco.

Ejemplo:

hsl(120, 100%, 50%); // Verde
hsl(120, 100%, 75%); // Verde claro
hsl(120, 100%, 25%); // Verde oscuro
hsl(120, 60%, 70%); // Verde claro

Establece el color utilizando el modelo de Hue-Saturation-Lightness-Alpha (HSLA).
El valor de color HSLA es una extensión del valor de color HSL, con un canal alpha - especifica la opacidad del color.
alpha El parámetro es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

Ejemplo:

hsl(120, 100%, 50%, 0.3); // Verde con opacidad
hsl(120, 100%, 75%, 0.3); // Verde claro con opacidad

Establece un gris con la misma luminosidad que el color.

Ejemplo:

grayscale(#7fffd4);

Resultado: #c6c6c6

Establece el color complementario del color.

Ejemplo:

complement(#7fffd4);

Resultado: #ff7faa

Establece el color inverso o negativo del color.
Crea un color mixto de color 1 y color 2.El parámetro es opcional y debe ser un número entre 0% y 100%. El valor predeterminado es 100%.

Ejemplo:

invert(white);

Resultado: negro

Devuelve el valor rojo del color con un número entre 0 y 255.

Ejemplo:

red(#7fffd4);

Resultado: 127

red(red);

blue(blue);

Devuelve el valor verde del color con un número entre 0 y 255.

Ejemplo:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);

blue(

Ejemplo:

Devuelve un número entre 0 y 255 que representa el valor azul del color.

blue(#7fffd4);

resultados: 212

blue(blue);

tono(

Ejemplo:

Devuelve un número entre 0deg y 360deg que representa el tono del color.

tono(#7fffd4);

saturación(

Ejemplo:

Devuelve un número entre 0% y 100% que representa la saturación HSL del color.

saturación(#7fffd4);

luminosidad(

Ejemplo:

Devuelve un número entre 0% y 100% que representa la luminosidad HSL del color.

luminosidad(#7fffd4);

opacity(

Ejemplo:

alpha(

alpha(#7fffd4);

opacity(

Ejemplo:

Devuelve un número entre 0 y 1 que representa el canal alpha del color.

opacity(rgba(127, 255, 212, 0.5));

mix(
Crea un color mixto de color 1 y color 2. peso
Los parámetros deben estar entre 0% y 100%. El valor predeterminado es 50%. Una mayor ponderación significa que debe usarse más。
Una menor ponderación significa que debe usarse más color2。

Ajusta el tono del color en grados de -360 a 360.

Ejemplo:

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

Resultado: #8080ff

Ajusta uno o varios parámetros según la cantidad especificada.
Esta función agrega o resta la cantidad especificada a los valores de color existentes.

Ejemplo:

adjust-color(#7fffd4, blue: 25);

Resultado:

Establece uno o varios parámetros de color a nuevos valores.

Ejemplo:

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

Resultado: #ffffd4

Crea un nuevo color utilizando el canal alpha proporcionado.

Ejemplo:

rgba(#7fffd4, 30%);

Resultado: rgba(127, 255, 212, 0.3)