Funciones de colores
Función para incrementar /decrementar uno o más canales de un color Función para establecer uno o más canales a un nuevo valor Función que devuelve el valor de un canal en el espacio definido Función para obtener el complemento de un color Función que mezcla varios colores Función que devuelve si son los mismos colores Funciones de colores (deprecated)

Función para incrementar /decrementar uno o más canales de un color

color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null);

  // Ejemplo

color.adjust(#6b717f, $red: 15); // #7a717f
color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20); // lab(50% 10 40)
color.adjust(#d2e1dd, $hue: 45deg, $space: oklch);
// rgb(209.7987626149, 223.8632000471, 229.3988769575)

Función para establecer uno o más canales a un nuevo valor

color.change($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null);

  // Ejemplo
color.change(#6b717f, $red: 100); // #64717f
color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1);
// color(srgb 0.8 0.1 0.4)
color.change(#998099, $lightness: 30%, $space: oklch);
// rgb(58.0719961509, 37.2631531594, 58.4201613409)

Función que devuelve el valor de un canal en el espacio definido

color.channel($color, $channel, $space: null);
// Ejemplo

@use 'sass:color';

color.channel(hsl(80deg 30% 50%), "hue"); // 80deg
color.channel(hsl(80deg 30% 50%), "hue", $space: oklch); // 124.279238779deg
color.channel(hsl(80deg 30% 50%), "red", $space: rgb); // 140.25

Función para obtener el complemento de un color

color.complement($color, $space: null);

// Ejemplo:
// HSL hue 222deg becomes 42deg.
color.complement(#6b717f); // #7f796b

Función para obtener el gray color con la misma luminosidad

color.grayscale($color);
@use 'sass:color';

color.grayscale(#6b717f); // #757575

Devuelve el inverso o negativo de un color

color.invert($color, $weight: 100%, $space: null);
// EJemplo
@use 'sass:color';

color.invert(#b37399, $space: rgb); // #4c8c66

Función que mezcla varios colores

color.mix($color1, $color2, $weight: 50%, $method: null);
// Ejemplo
@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb); // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch); // rgb(87.864037264, 140.601918773, 154.2876826946)

Función que devuelve si son los mismos colores

color.same($color1, $color2) //=> boolean
// Ejemplo
@use 'sass:color';

color.same(#036, #036); // true
color.same(#036, #037); // false
color.same(#036, color.to-space(#036, oklch)); // true
color.same(hsl(none 50% 50%), hsl(0deg 50% 50%)); // true

Funciones de colores (deprecated)

Dentro de este rango de funciones podemos encontrar:

lighten($color, $amount): Genera un color más claro
darken($color, $amount): Genera un color más oscuro → la documentación oficial nos dice que mejor usar scale($color, $lightness)
saturate($color, $amount): Modifica la intensidad del color (añadiéndole)
desaturate($color, $amount): Modifica la intensidad del color (quitándole)
mix($color1, $color2, [$weight]): Mezcla dos colores, el tercer parámetro es opcional y lo que hace es indicar el % del primer color que usamos
grayscale($color): Convierte un color en escala de grises
invert($color): Devuelve el inverso de un color
complement($color): Devuelve el complementario.

@use “sass:color”;

$color-base: #333;
$color-escala: #87bf64;
.lighten{
    color: lighten($color-base, 20%);
}
.darken{
    color: darken($color-base, 20%);
}
.saturate{
    color: saturate($color-base, 20%);
}
.desaturate{
    color: desaturate($color-base, 20%);
}
.mix-a{
    color: mix(#036, #036);
}
.mix-b{
    color: mix(#036, #d2e1dd, 75%);
}
.grayscale{
    color: grayscale($color-escala);
}
.invert{
    color: invert($color-escala);
}
.complement{    
    color: complement($color-escala);
}

<< Op. Aritméticas Responsive >>