Funciones de colores

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 >>