Sass – Color Functions

What is  Sass? Sass is an abbreviation of Syntactically Awesome Stylesheet is a CSS pre-processor meta-language used to style a document cleanly with non-repeating code compared to flat CSS. It is an extension to CSS. What is …

Sass Color Functions

What is  Sass?

Sass is an abbreviation of Syntactically Awesome Stylesheet is a CSS pre-processor meta-language used to style a document cleanly with non-repeating code compared to flat CSS. It is an extension to CSS.

What is the Sass-color function?

It is important to understand the concept of the color component before starting the Sass color function. The color theory breaks down into three color attributes.

  • HUE: It is the range of color models which is defined by a particular wavelength. if we say, Hue, it means pure pigment or it refers to the “color” we use. 
  • Saturation: It is the color intensity that measures the amount of hue present in the color. the more the pure color, the more the color is saturated. Saturated color attracts more due to its brightness and high intensity.

Value: The degree of darkness and lightness is called color value. Each color has a different value. It ranges from tints(slightly lighter) to shades(darkness), defined as the intensity of light present in color.

                                                  Fig 1:  Hue, Saturation, Value

What is a Color Model?

A color model is a mathematical representation of the color that defines the manners colors are represented as tuples of numbers. There are different color models such as RGB, CMKY, HSL, etc., but only RGB and HSL models relate to Sass development.

RGB is the measure for Red, Green Blue in fundamental colors. Component value measure among 0 to 255. RGB expressed in hexadecimal numbers as #ff0000 or #FF8C00.

HSL stands for Hue, Saturated, and lightness or HSV, where V is value. It is defined as a function.

HSL($hue, $saturation, $value)

In the HSL model, hue is expressed in degrees as pure red at 0 degrees, pure green at 120 degrees, and pure blue at 240 degrees. saturation and value are expressed in percentage

Fig: 2 HSL Color Wheel

Opacity: opacity is an additional feature of color that is not present in the traditional color model. It defines the transparency of color. It is defined by alpha in both RGB and HSL models. It contains 0 to 100% percentages were 0 for completely transparent and 100% for complete opaque color. The opacity value is always between 0 to 1.

What is the Sass-color function?

Sass color Functions are a function that allows working with color digitally. RGB() and HSL() are used to make concise CSS. Sass color Function is divided into three parts.

  • Set color Functions
  • Get color Functions
  • Manipulate color Functions

Set color Functions:

It sets color by using the RGB model. RGB is defined with RGB(red, green, blue). The integer value between 0 to 255 or percentage between 0 to 100% defines the intensity of defined color.  This is also called the color creation function.

FunctionDescriptionExample
rgb($red, $green, $blue)It creates opaque color based on a given integer or percentage value. Set the color by using the RGB color model. The integer value between 0 to 255 or percentage between 0 to 100% defines the intensity of defined color. RGB(255, 140, 0);  //  rendered as orange color
output
#FF8C00
rgb(50%, 50%, 100%)
output:
#8080ff
rgba($red, $green, $blue, $alpha)It creates color based on a given integer or percentage value at specified opacity. rgba(172, 65, 56, 0.5 )
output:
rgba(172, 65, 56, 0.5 )
HSL($hue, $saturation, $lightness)Set an opaque  color based on given hue (degree), saturation, and lightness(percentage)HSL(341, 26%, 59%)
output
#B27D8E
hsla($hue, $saturation, $lightness, $alpha)It creates color based on a given integer or percentage value at specified opacity.hsl(120, 100%, 50%, 0.5); // green with opacity
grayscale($color)It returns a gray value that has the same lightness as “color.”
grayscale(#7fffd4);
output:
 #c6c6c6
complement($color)Sets a color that is the complementary color of color.complement(#7fffd4);
output: 
#ff7faa
invert($color)It creates a color that is the inverse color of the specified “color.” The weight parameter is optional. It should be a number between 0% and 100%. The default value is 100%.invert(#ad4038)
output
#52bfc7

Sass Get/Extraction color Functions:

Returns the hue of color as a number between 0 degrees and 255 degrees. Returns the HSL saturation of color as a number between 0% and 100%. Returns the HSL lightness of color as a number between 0% and 100%. It is also called  Sass Extraction Function.

FunctionsDescriptionExamples
red($color)Returns as a number which is red value color between 0 and 255.red(#ad4038)
Result:
173
green($color)Returns as a number which is green value color between 0 and 255.green(#ad4038)
Result:
64
blue($)colorReturns as a number which is blue value color between 0 and 255.blue(#ad4038);
output:56
blue(green);
output: 0
hue(($color)Returns the hue of color in numbers between 0 degrees and 255 degrees.hue(#ad4038)
output: 4.10246deg
saturation($color)Output the saturation of color in numbers between 0% and 100%.saturation(#d747d2)
output:64%
lightness($color)Returns the lightness element of color in  numbers between 0% and 100%.lightness(#d747d2)
output:56%
alpha($color)Return value always between 0 and 1alpha(#ad4038)
output:1
opacity($color)Return value always between 0 and 1opacity(rgba(215, 71, 210, 0.7);
output: 0.7

Manipulate color Functions:

Sass Manipulate Color Functions adjust the color’s hue with a degree from -360deg to 360deg. This function allows manipulating colors in various ways.

FunctionDescriptionExamples
mix($color1, $color2, $weight)It creates a mixture of color1 and color2 with optional attribute weight. weight decide the usage of color1.mix(#ad4038, #0000ff, 80)
output:#8a3360
adjust-hue($color, $degree)This function adjusts the hue of color with a degree from -360 degrees to 360 degrees.adjust-hue(#ad4038, 20)
output:
#ad6738
lighten($color, $amount)This function creates a lighter shade of color with a value between 0% and 100%. The amount parameter increases the lightness by percent.lighten(#ad4038, 20)
output:
#d37e78
darken($color, $amount)This function creates a darker shade color with a value between 0% and 100%. The amount parameter decreases the lightness by percent.darken(#ad4038, 20)

output:
#60231f
saturate($color, $amount)With the given amount percentage, enhance the saturation of the specified color.desaturate(#ad4038, 20)

output:
#96544f
rgba($color, $alpha)This function creates new color with the given alpha channelrgba(#ad4038, 50)

output:
rgba(172, 65, 56, 0.5)
transparentize($color, $amount)Creates transparency in the color with the value between 0 and 1.transparentize(#ad4038, 50)
output:
rgba(172, 65, 56, 0.5)

Conclusion

In this article, we discussed one of the Sass functions, which is the color function. Sass color Functions are a function that allows working with color digitally. Two-color models RGB and HSL, are related to Sass color development. This function works on Hue, Saturation, and value of a color model. Sass Function divided into three fundamental parts; Set color Functions, Get color Functions, Manipulate color Functions.

Leave a Comment