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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:



    #2ccc91
    #21787d
    rgba(12, 43, 44, 0.5)
    
  • adjust-hue(): This function increases or decreases the color’s hue value.

    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    adjust-hue($color, $degrees)

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    1
    0.4
    alpha(opacity=20)
    
  • color.change(): This function sets one or more properties of a color to new color values.

    Syntax:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    #7f796b
    #e1d2d6
    #663300  
    
  • desaturate(): This function makes the color less saturated by the given amount.

    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    desaturate($color, $amount)

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    #0a335c
    #eeebe8 
    



  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.