| 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: green(#bada55); //218 |
|
| 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: mix(#bada55, #ababab); //#b2c280, slightly grayer color of #bada55 mix(#bada55, #ababab, 75%); //#b6ce6a, only 25% gray added to #bada55 |
|
| 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: adjust-hue(#98FB98, -90deg) //#FBCA98 adjust-hue(#98FB98, 90deg) //#09C9FB |
|
| 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 |
|
| 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:
|
| 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:
|
| Example: ie-hex-str(#bada55); //"#FFBADA55" ie.hex-str(rgba(0, 255, 0, 0.5)); //#8000FF00 |
|