SASS | Color Functions

Last Updated : 19 May, 2020

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.

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
```
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 )
```
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
```
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)
```
grayscale($color): This method returns a gray value that has the same intensity as "color".
- Example:
  CSS
  grayscale(#ad4038)
- Output:
```
#737373
```
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
```
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:

red($color): This method returns the red component of "color".
- Example:
  CSS
  red(#d747d2)
- Output:
```
215
```
green($color): This method returns the green component of "color".
- Example:
  CSS
  green(#d747d2)
- Output:
```
71
```
blue($color): This method returns the blue component of "color".
- Example:
  CSS
  blue(#d747d2)
- Output:
```
210
```
hue($color): This method returns the hue component of "color".
- Example:
  CSS
  hue(#d747d2)
- Output:
```
 302°
```
saturation($color): This method returns the saturation component of "color".
- Example:
  CSS
  saturation(#d747d2)
- Output:
```
64%
```
lightness($color): This method returns the lightness component of "color".
- Example:
  CSS
  lightness(#d747d2)
- Output:
```
56%
```
alpha($color): This method returns the alpha channel of color as a number between 0 and 1.
- Example:
  CSS
  alpha(#d747d2)
- Output:
```
1
```
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

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%.
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
```
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.
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
```
scale-color($color, $red, $green, $blue, $saturation, $lightness, $alpha): This method scales one or more parameters of color.
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)
```
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.
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.
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.
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.
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.
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.
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.
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.

SASS | Color Functions

Slash_IT

Improve

Article Tags :

SASS | Color Functions

Similar Reads