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

           rgb(252, 186, 3)
           
     

   • Output:

     #fcba03

     CSS

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

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

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

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

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

           complement(#47d74c)
           
     

   • Output:

     #d747d2

7. invert($color): This method returns the inverse of the individual red, green and blue components of "color".
   • Example: CSS

           invert(#ad4038)
           
     

   • Output:

     #52bfc7

SASS Component Extraction Functions:

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

           red(#d747d2)
           
     

   • Output:

     215

2. green($color): This method returns the green component of "color".
   • Example: CSS

           green(#d747d2)
           
     

   • Output:

     71

3. blue($color): This method returns the blue component of "color".
   • Example: CSS

           blue(#d747d2)
           
     

   • Output:

     210

4. hue($color): This method returns the hue component of "color".
   • Example: CSS

           hue(#d747d2)
           
     

   • Output:

      302°

5. saturation($color): This method returns the saturation component of "color".
   • Example: CSS

           saturation(#d747d2)
           
     

   • Output:

     64%

6. lightness($color): This method returns the lightness component of "color".
   • Example: CSS

           lightness(#d747d2)
           
     

   • Output:

     56%

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

           alpha(#d747d2)
           
     

   • Output:

     1

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

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

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

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

           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.