Sass: Color Functions
Color Components
Traditional color theory breaks any color down into three components: hue, saturation, and value:
- Hue is the color
- Saturation is a measure of how "much" of the hue exists in the color-it's intensity
- Value is a measure of the lightness or darkness of a color.
Color Models
Digitally, colors are represented as either RGB or HSL. (There are other models, including CMYK and LAB, but only RGB and HSL are relevant to Sass development.)
RGB
RGB values are a measure of the amount of red green and blue in the color. Each component is a value between 0 (none of that color) and 255 (all of that color).
note
RGB colors are conventionally expressed in hexadecimal.
For example: #2abd35.
HSL
HSL stands for "Hue, Saturation and Lightness". It is usually expressed as a function:
hsl($hue, $saturation, $value)
Hue is expressed as a degree on the color wheel (pure red is at 0, pure green at 120, and pure blue at 240), while saturation and value are expressed as percentages.
Opacity
An additional aspect of digital color that doesn't exist in traditional color theory is the opacity.
In both the RGB and HSL color models, opacity is expressed via an alpha value between 0 and 100%, with 0 being completely transparent and 100% being completely opaque.
Sass Color Functions
Sass Color Creation Functions
| Function | Description | Example | Result |
|---|---|---|---|
rgb($red, $green, $blue) | Creates an opaque color based on the specified decimal values or percentages | rgb(173, 64, 56) | #ad4038 |
rgb(50%, 50%, 100%) | #8080ff | ||
rgba($red, $green, $blue, $alpha) | Creates a color based on the specified decimal or percentage values at the specified opacity. | rgba(172, 65, 56, 0.5 ) | rgba(172, 65, 56, 0.5 ) |
hsl($hue, $saturation, $lightness) | Creates an opaque color based on the specified hue (in degrees), saturation and lightness (in percentages) | hsl(4, 51, 45) | #ad4038 |
hsla($hue, $saturation, $lightness, $alpha) | Creates a color based on the specified hue, saturation and lightness at the specified opacity. | hsla(4, 51, 45, 50) | hsla(4, 51, 45, 50) |
grayscale($color) | Returns a gray that has the same intensity as $color | grayscale(#ad4038) | #737373 |
complement($color) | Returns a color that has the same saturation and value, but has a hue 180 degrees different from the hue of $color. | complement(#ad4038) | #38a5ad |
invert($color) | Returns the inverse of the individual red, green and blue components of $color. | invert(#ad4038) | #52bfc7 |
Sass Component Extraction Functions
| Function | Description | Examples | Result |
|---|---|---|---|
red($color) | Returns the red component of $color. | red(#ad4038) | 173 |
green($color) | Returns the green component of $color. | green(#ad4038) | 64 |
blue($color) | Returns the blue component of $color. | blue(#ad4038) | 56 |
hue(($color) | Returns the hue of $color | hue(#ad4038) | 4.10246deg |
saturation($color) | Returns the hue of $color | saturation(#ad4038) | 51.091% |
lightness($color) | Returns the hue of $color | lightness(#ad4038) | 44.90196& |
alpha($color) opacity($color) | Always returns 1 | alpha(#ad4038) | 1 |
Sass Manipulate Colors Functions
| Function | Description | Example | Result |
|---|---|---|---|
mix($color1, $color2, [$weight]) | Combines two colors by averaging the red, green and blue components. The optional $weight parameter determines how much of the first color is included (the default is 50%). | mix(#ad4038, #0000ff, 80) | #8a3360 |
adjust-hue($color, $degrees) | Rotates the hue of $color by the specified degrees | adjust-hue(#ad4038, 20) | #ad6738 |
lighten($color, $amount) | Lightens the specified color by the percentage specified in $amount | lighten(#ad4038, 20) | #d37e78 |
darken($color, $amount) | Darkens the specified color by the percentage specified in $amount | darken(#ad4038, 20) | #60231f |
saturate($color, $amount) | Increases the saturation of the specified color by the percentage specified in $amount | saturate(#ad4038, 20) | #c42c21 |
desaturate($color, $amount) | Decreases the saturation of the specified color by the percentage specified in $amount | desaturate(#ad4038, 20) | #96544f |
rgba($color, $alpha) | Adjusts the opacity of $color by the percentage specified in $alpha | rgba(#ad4038, 50) | rgba(172, 65, 56, 0.5) |
opacify($color, $amount) fade-in($color, $amount) | Increases the opacity of $color by the percentage specified in $alpha | opacify(#ad4038, 50) | rgba(172, 65, 56, 1) |
transparentize($color, $amount) fade-out($color, $amount) | Reduces the opacity of $color by the percentage specified in $alpha | transparentize(#ad4038, 50) | rgba(172, 65, 56, 0.5) |
adjust-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) | Changes $color by one or more of the named arguments. | adjust-color(#ad4038, $red: 10) | #b74038 |
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) | Adjusts $color by the amount specified in one or more named arguments. If the argument is a positive number, the adjustment is towards the maximum value for that component. If it is negative, the adjustment is towards the minimum value | scale-color(#ad4038, $red: 50%) | #d64038 |
scale-color(#ad4038, $red: -50%) | #574038 | ||
change-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) | Replaces the component of $color with the value specified in one or more named parameters. | change-color(#ad4038, $red: 255) | #ff4038 |