Open In App

SASS | Color Functions

Improve
Improve
Like Article
Like
Save
Share
Report

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:




      rgb(252, 186, 3)

      
      

    • Output:
      #fcba03




      rgb(50%, 50%, 100%)

      
      

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




      rgba(71, 214, 75, 0.5 )

      
      

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




      hsl(122, 64, 56)

      
      

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




      hsla(122, 64, 56, 50)

      
      

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




      grayscale(#ad4038)

      
      

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




      complement(#47d74c)

      
      

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




      invert(#ad4038)

      
      

    • Output:
      #52bfc7

SASS Component Extraction Functions:

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




      red(#d747d2)

      
      

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




      green(#d747d2)

      
      

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




      blue(#d747d2)

      
      

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




      hue(#d747d2)

      
      

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




      saturation(#d747d2)

      
      

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




      lightness(#d747d2)

      
      

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




      alpha(#d747d2)

      
      

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




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

      
      

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




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

      
      

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




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

      
      

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




      rgba(#7fffd4, 30%)

      
      

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


Last Updated : 19 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads