# Color Functions

### RGB Functions

Function defintion Function description
rgb($red,$green, $blue) Combines the values of red, green, and blue to create the desired color. Example: color: rgb(186, 218, 85); //#bada55 rgba($red, $green,$blue, $alpha) Same as previous function (rgb($red, $green,$blue)) with the ability to set opacity value.The opacity must be between 0 and 1 with increments of 0.1 for different opcaity value.This is very similar to existing CSS rgba() function, as matter of fact it will return the same value.
Example:
color: rgba(186, 218, 85, 0.5); //#bada55 with 50% opacity
red($color) Get the value of the red component of any color. The value retruned is betwen 0 to 255 Example: red(#bada55); //186 green($color) Get the value of the green component of any color. The value retruned is betwen 0 to 255
Example:
blue($color) Get the value of the blue component of any color. The value retruned is betwen 0 to 255 Example: blue(#bada55); //85 mix($color1, $color2,$weight: 50%) Mixes two colors. If the wieght is not given, then the default 50% weight is applied which means that equals amounts of both color is applied. However if the weight is given, in percentage, then the weight is applied to the first color and the remainder is applied to the second color. For example a weight of 15% means that 15% of the first color and 85% of the second color.
Example:

### HSL Functions

Function defintion Function description
hsl($hue,$saturation, $lightness) Given a hue value (a value between 0 to 360), saturation value (a value between 0% to 100%), and a lightness value (a value between 0% to 100%); a color is returned Example: color: hsl(0, 100%, 50%) //red or #ff0000 color: hsl(120, 75%, 75%) //pastel green or #8fef8f hsla($hue, $saturation,$lightness, $alpha) Same as previous function (hsl($hue, $saturation,$lightness)) with the ability to set opacity value.The opacity must be between 0 and 1 with increments of 0.1 for different opcaity value. This is very similar to existing CSS rgba() function, as matter of fact it will return the same value, which means the return value for this function is the equivalent 'rgba' value.
Example:
hsla(55, 24%, 30%, 0.6) //rgba(95, 92, 58, 0.6)
hue($color) This function will return the hue value of the given color which is value between 0 and 360 degrees Example: hue(#98FB98) //120deg saturation($color) This function will return the saturation value of the given color which is value between 0 to 100%
Example:
saturation(#98FB98) //95.52336%
lightness($color) This function will return the lightness value of the given color which is a value between 0 to 100% Example: lightness(#98FB98) //79.01961% adjust-hue($color, $degrees) By adding the degree to the color this function will allow the hue to adjusted accordingly. The value of the '$degree' variable should be an integer between 0 and 360 degree. You can also use negative numbers.
Example:
lighten($color,$amount) One of the most used functions are the lighten and darken functions. This function changes the lightness value by adding the given '$amount' variable to the lightness value of the color returning the resulting color. Example: lighten(#98FB98, 10%) //#C9FDC9 darken($color, $amount) This function changes the lightness value by subtracting the given '$amount' variable to the lightness value of the color returning the resulting color.
Example:
darken(#98FB98, 10%) //#67F967
saturate($color,$amount) This function allows to adjust the saturation value of the given color by increaing the saturation value. The '$amount' variable must be between 0 and 100%. Example: saturate(#98FB98, 10%) //#94FF94 desaturate($color, $amount) This function allows to adjust the saturation value of the given color by decreasing the saturation value. The '$amount' variable must be between 0 and 100%.
Example:
desaturate(#98FB98, 10%) //#9DF69D
grayscale($color) This function converts the given color to its equivalent grayscale value. You can achieve the same thing by using desaturate($color, 100%)
Example:
grayscale(#98FB98) //#CACACA
complement($color) All colors have degree value on the color wheel in degrees. This function will return the complementary color by returning the color on the opposite side of the colro wheel of the given color. This is identical to using saturate($color, 180deg).
Example:
complement(#98FB98) //#FB98FB
invert($color) This function takes the RGB value of a given color and and inverse all the values. Inverting a color follwos this formula: invert_red = 255 - red.value invert_green = 255 - green.value invert_blue = 255 - blue.value invert_color = rgb(invert_red, invert_green, invert_blue) Example: invert(#98FB98) //#670467 ### Other Color Functions Function defintion Function description adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) This function will allow the adjustment of one more aspect of a color. One can for example cchange the red value of a color or change the saturation or lightness. Keep in mind that you cannot change the RGB value and the HSL value at the same time. The value range of each parameter is as follows: •$red, $green,$blue: between -255 and 255
• $hue: between -360 and 360 degrees •$saturation, $lightness: between -100% and %100 •$alpha: between -1 and 1, in 0.1 increments
Example:
adjust-color(#98FB98, $red: -5); //#93fb98 adjust-color(#98FB98,$saturation: 45%); //#94ff94
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) sclae-color function is different from adjust-color function in the sense that the adjustment that happens to the given color is between the current value and the high end value. For example, let's look at #bada55. It has a red value of 186, green value of 218, and a blue value of 85. If we use scale-color function and scale the blue value by 50%, it will change the blue by 50% between the original value of 85 and high end value of 255. If we scale it by -50%, it will scale it between the original value of 85 and low end value of 0. All the values passed in the parameters are between -100% and 100%. Example: scale-color(#bada55,$blue: 50%); //#badaaa, which has an RGB value of rgb(186, 218, 170)
scale-color(#bada55, $blue: -50%); //#bada2a, which has an RGB value of rgb(186, 218, 42) change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) This function is similar to adjust-color function. Example: change-color(#98FB98,$lightness: 45%) //#09dd09;
ie-hex-str(\$color) Converts a color that can be understood by IE filters. In IE, there is the concept of aRGB color as opposed to RGBa color values. The 8 digit color value consists of:
• First two digits are the values for the alpha channel
• The remaining six values are the hexadecimal value of the color
This function converts a regular hexadecimal or RGBa value to aRGB value and returns it as a string value.
Example: