SASS | Color Functions

Color Components: Before we move to the SASS color functions, let’s make sure we know the elements of color that they change. The simple color theory divides any color into three basic components: hue, saturation, and value.

  • HUE (also called “local color”) is generally the color that we talk about. Like: Blue Sky, Yellow sun.
  • Saturation is the measure that tells the amount of hue existing in the color i.e. color intensity. For example, the color of clouds changes from white to blue to black.
  • The value is the measure of the lightness or darkness of the color. For example, a plain brown ground with some part in sunlight and the other in shadow.

Color Models: In a technological world, colors are represented as either RGB or HSL. (There are various other models like CMYK and LAB, but only RGB and HSL are the ones relevant to SASS development.)

RGB values are the measure of the amount of “red” “green” and “blue” in the basic color. Every component is a value between 0 (color not present) to 255 (complete color). RGB colors are basically expressed in hexadecimal like #0000ff or #2abd35.

HSL stands for “Hue, Saturation, and Lightness”. One might also get HSV (here the V stands for “value”), or HSB (here the B stands for “brightness”) models. For example, Photoshop uses HSB.

hsl($hue, $saturation, $value): Hue is indicated as a degree on the wheel of colors (pure red is at 0, pure green at 120, and pure blue at 240), whereas saturation and value are indicated as percentages.



This is a quite simple example. While changing between RGB and HSL, the hue component of color can sometimes get quite ugly. For example, the hue of #ac4138 is 4.65517 degrees.

opacity: In both the RGB and HSL color models, opacity is given via an alpha value between 0 to 100%, with 0 being fully transparent and 100% being fully opaque.

SASS Color Functions: The rgb() and hsl() are used for making more brief CSS. All the modern browsers support rgba() and hsla() CSS functions, so the SASS transpiler will keep the functions the same in the CSS.

The rest three functions, “grayscale(), invert() and complement()” make a new color based on the current one. Invert() function, inverts each red, green and blue value and complement(), rotates the color 180 degrees, gives quite similar but not identical results.

  1. rgb($red, $green, $blue): This method creates an opaque color based on the given decimal values or percentages.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      rgb(252, 186, 3)

      chevron_right

      
      

    • Output:
      #fcba03
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      rgb(50%, 50%, 100%)

      chevron_right

      
      

    • Output:
      #8080ff
  2. rgba($red, $green, $blue, $alpha): This method creates a color based on the given decimal or percentage values at the given opacity.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      rgba(71, 214, 75, 0.5 )

      chevron_right

      
      

    • Output:
      rgba(71, 214, 75, 0.5 )
  3. hsl($hue, $saturation, $lightness): This method creates an opaque color based on the given hue (in degrees), saturation and lightness (in percentages).
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      hsl(122, 64, 56)

      chevron_right

      
      

    • Output:
      #47d74c
  4. hsla($hue, $saturation, $lightness, $alpha): This method create a color based on the specified hue, saturation and lightness at the specified opacity.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      hsla(122, 64, 56, 50)

      chevron_right

      
      

    • Output:
       hsla(122, 64, 56, 50)
  5. grayscale($color): This method returns a gray value that has the same intensity as “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      grayscale(#ad4038)

      chevron_right

      
      

    • Output:
      #737373
  6. complement($color): This method returns a color that has the same saturation and value, but has a hue 180 degrees different from the hue of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      complement(#47d74c)

      chevron_right

      
      

    • Output:
      #d747d2
  7. invert($color): This method returns the inverse of the individual red, green and blue components of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      invert(#ad4038)

      chevron_right

      
      

    • Output:
      #52bfc7

SASS Component Extraction Functions:

  1. red($color): This method returns the red component of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      red(#d747d2)

      chevron_right

      
      

    • Output:
      215
  2. green($color): This method returns the green component of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      green(#d747d2)

      chevron_right

      
      

    • Output:
      71
  3. blue($color): This method returns the blue component of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      blue(#d747d2)

      chevron_right

      
      

    • Output:
      210
  4. hue($color): This method returns the hue component of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      hue(#d747d2)

      chevron_right

      
      

    • Output:
       302°
  5. saturation($color): This method returns the saturation component of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      saturation(#d747d2)

      chevron_right

      
      

    • Output:
      64%
  6. lightness($color): This method returns the lightness component of “color”.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      lightness(#d747d2)

      chevron_right

      
      

    • Output:
      56%
  7. alpha($color): This method returns the alpha channel of color as a number between 0 and 1.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      alpha(#d747d2)

      chevron_right

      
      

    • Output:
      1
  8. opacity($color): This method returns the opacity of color as a number between 0 and 1.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      opacity(rgba(215, 71, 210, 0.7);

      chevron_right

      
      

    • Output:
      0.7

SASS Manipulate Color Functions

  1. mix($color1, $color2, $weight): This method creates a color that is the combination of color1 and color2. The weight parameter must be between 0% and 100%. A larger weight means that more of color1 should be used. A smaller weight means that more of color2 should be used. The default value is 50%.
  2. adjust-hue($color, $degrees): This method adjusts the color’s hue with a degree from -360deg to 360deg.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Output:
      #8080ff
  3. adjust-color($color, $red, $green, $blue, $hue, $saturation, $lightness, $alpha): This method adjusts one or more parameters by the given amount. This function adds or subtracts the given amount to/from the existing color value.
  4. change-color($color, $red, $green, $blue, $hue, $saturation, $lightness, $alpha): This method sets one or more parameters of a color to new values.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • Output:
       #ffffd4
  5. scale-color($color, $red, $green, $blue, $saturation, $lightness, $alpha): This method scales one or more parameters of color.
  6. rgba($color, $alpha): This method creates a new color with the given alpha channel.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      rgba(#7fffd4, 30%)

      chevron_right

      
      

    • Output:
      rgba(127, 255, 212, 0.3)
  7. lighten($color, $amount): This method creates a lighter color with the amount between 0% and 100%. The amount parameter increases the HSL lightness by that percent.
  8. darken($color, $amount): This method creates a darker color with the amount between 0% and 100%. The amount parameter decreases the HSL lightness by that percent.
  9. saturate($color, $amount): This method creates a more saturated color with the amount between 0% and 100%. The amount parameter increases the HSL saturation by that percent.
  10. desaturate($color, $amount): This method creates a less saturated color with the amount between 0% and 100%. The amount parameter decreases the HSL saturation by that percent.
  11. opacify($color, $amount): This method creates a more opaque color with the amount between 0 and 1. The amount parameter increases the alpha channel by that amount.
  12. V: This method creates a more opaque color with the amount between 0 and 1. The amount parameter increases the alpha channel by that amount.
  13. transparentize($color, $amount): This method creates a more transparent color with the amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.
  14. fade-out($color, $amount): This method creates a more transparent color with the amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.



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.