Sass sass:color Module

SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:color module. This module is used in order to create new colors from the existing ones. This module has a list of functions that can be used directly while coding with sass:

• color.adjust(): This function increases or decreases different properties of the color by some fixed amount.

  Syntax:

  
  
  

  color.adjust($color,
    $red: null, $green: null, $blue: null,
    $hue: null, $saturation: null, $lightness: null,
    $alpha: null)
  adjust-color(...)

  The function adds values passed for every keyword argument to the corresponding property of the color, and returns the adjusted color. It throws an error when an RGB property and the HSL property are specified at the same time. Every optional argument must be a number. The RGB arguments must be unitless and between -255 and 255 (both inclusive). The hue argument must either have deg as unit or no unit. The saturation and lightness arguments must always be between -100% and 100% (both inclusive), and can be unitless. The alpha argument must be unitless and between -1 and 1 (both inclusive).

  Example:

  
  
  

  @debug color.adjust(#2cb890, $green: 20);
  @debug color.adjust(#35785f, $red: -20, $blue: 30);
  @debug color.adjust(#21787d,
          $lightness: -20%, $alpha: -0.5);

  Output:

  #2ccc91
  #21787d
  rgba(12, 43, 44, 0.5)
  

• adjust-hue(): This function increases or decreases the color’s hue value.

  Syntax:

  adjust-hue($color, $degrees)

  The hue value must always be a number between -360deg and 360deg (both inclusive) to add it to the color’s hue. It may be unitless.

  Example:

  @debug adjust-hue(#0c2b2c, -50deg);

  Output:

  #0c2c12
  

• color.alpha(): This function returns the alpha channel of a color as a number between 0 and 1.

  Syntax:

  color.alpha($color)
  alpha($color)
  opacity($color)

  Example:

  @debug color.alpha(#e1d7d2);
  @debug color.opacity(rgb(210, 225, 221, 0.4));
  @debug alpha(opacity=20);

  Output:

  1
  0.4
  alpha(opacity=20)
  

• color.change(): This function sets one or more properties of a color to new color values.

  Syntax:

  color.change($color,
    $red: null, $green: null, $blue: null,
    $hue: null, $saturation: null, $lightness: null,
    $alpha: null)
  change-color(...)

  The function uses value passed for every keyword argument to the corresponding property of the color, and then returns the changed color. It throws an error when an RGB property and the HSL property are specified at the same time. Every optional argument must be a number. The RGB arguments must be unitless and between -255 and 255 (both inclusive). The hue argument must either have deg as unit or no unit. The saturation and lightness arguments must always be between -100% and 100% (both inclusive), and can be unitless. The alpha argument must be unitless and between -1 and 1 (both inclusive).

  Example:

  @debug color.change(#6b717f, $red: 100);
  @debug color.change(#d2e1dd, $red: 100, $blue: 50);
  @debug color.change(#998099, $lightness: 30%, $alpha: 0.5);

  Output:

  #64717f
  #64e132
  rgba(85, 68, 85, 0.5)
  

• color.complement(): This function returns the RGB complement of the color. It is identical to color.adjust($color, $hue: 180deg).

  Syntax:

  color.complement($color)
  complement($color)

  Example:

  @debug color.complement(#6b717f);
  @debug color.complement(#d2e1dd);
  @debug color.complement(#036);

  Output:

  #7f796b
  #e1d2d6
  #663300  
  

• desaturate(): This function makes the color less saturated by the given amount.

  Syntax:

  desaturate($color, $amount)

  The amount must always be a number between 0% and 100% (both inclusive). The function decreases the HSL saturation of the color by that amount.

  Example:

  @debug desaturate(#036, 20%);
  @debug desaturate(#f2ece4, 20%);

  Output:

  #0a335c
  #eeebe8