Sass - Color Functions

In this chapter, we'll explore the last set of Sass functions, those for working with color. The Sass color functions make working with digital color almost as simple as mixing paint on a palette. They won't replace your favorite color tool for choosing an initial color palette, but

Color Components

Before we talk about the Sass color functions, let's take a moment to make sure we're clear about the elements of color they manipulate. Traditional color theory breaks any color down into three components: hue, saturation, and value.

Hue (sometimes called "local color") is generally what we mean when we ask, "What color is it?"- the car is blue, the apple is red:

Saturation is a measure of how "much" of the hue exists in the color-it's intensity. Think of what happens to colors at sunset. The purer the color, the more highly saturated it is.

The last component, value, is a measure of the lightness or darkness of a color. Think of a tree with some of its leaves in bright light and some in shadow:

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 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). RGB colors are conventionally expressed in hexadecimal: #00ff00 or #2abd35, for example.

HSL stands for "Hue, Saturation and Lightness". You may also run across the HSV (where the V stands for "value"), and HSB (where the B stands for "brightness") models. Photoshop, for example, uses HSB. Pay attention. It's not the same thing.

HSL doesn't have a conventional expression. Even when you're not working in Sass, they're 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.

Any color that can be displayed on a monitor (and some that can't) can be expressed using either model:

The illustration is a trivially simple example, of course. When translating between RGB and HSL, the hue component can sometimes get a bit ugly. The hue of #ac4138, for example, is 4.65517 degrees.

There is one additional aspect of digital color that doesn't exist in traditional color theory: 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:

Color Creation Functions in Sass

Now that we know what color components we're working with, let's look at the functions Sass provides. We'll start with functions that create a color based on one of the two color models. The rgb() and hsl() are useful for producing more concise CSS. Now that all modern browsers support rgba() and hsla() CSS functions, so the Sass transpiler will keep these functions as it is in the CSS.

The remaining three functions, grayscale(), invert() and complement() create a new color based on an existing one. As you can see in the illustration invert(), which inverts each red, green and blue value and complement(), which rotates the color 180 degrees, return very similar but not identical results.

Function	Description	Examples
rgb($red, $green, $blue)	Creates an opaque color based on the specified decimal values or percentages	rgb(173, 64, 56) Result: #ad4038
rgb($red, $green, $blue)		rgb(50%, 50%, 100%) Result: #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 ) Result: 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) Result: #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) Result: hsla(4, 51, 45, 50)
grayscale($color)	Returns a gray that has the same intensity as $color	grayscale(#ad4038) Result: #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) Result: #38a5ad
invert($color)	Returns the inverse of the individual red, green and blue components of $color.	invert(#ad4038) Result: #52bfc7

Component Extraction Functions in Sass

Function	Description	Examples
red($color)	Returns the red component of $color.	red(#ad4038) Result: 173
green($color)	Returns the green component of $color.	green(#ad4038) Result: 64
blue($color)	Returns the blue component of $color.	blue(#ad4038) Result: 56
hue(($color)	Returns the hue of $color	hue(#ad4038) Result: 4.10246deg
saturation($color)	Returns the hue of $color	saturation(#ad4038) Result: 51.091%
lightness($color)	Returns the hue of $color	lightness(#ad4038) Result: 44.90196&
alpha($color) opacity($color)	Always returns 1	alpha(#ad4038) Result: 1

Manipulate Colors

All of the functions in this group allow you to change a color in various ways. The base color used in the examples is #ad4038:

Function	Description	Examples
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) Result:
adjust-hue($color, $degrees)	Rotates the hue of $color by the specified degrees	adjust-hue(#ad4038, 20) Result:
lighten($color, $amount)	Lightens the specified color by the percentage specified in $amount	lighten(#ad4038, 20) Result:
darken($color, $amount)	Darkens the specified color by the percentage specified in $amount	darken(#ad4038, 20) Result:
saturate($color, $amount)	Increases the saturation of the specified color by the percentage specified in $amount	saturate(#ad4038, 20) Result:
desaturate($color, $amount)	Decreases the saturation of the specified color by the percentage specified in $amount	desaturate(#ad4038, 20) Result:
rgba($color, $alpha)	Adjusts the opacity of $color by the percentage specified in $alpha	rgba(#ad4038, 50) Result:
opacify($color, $amount) fade-in($color, $amount)	Increases the opacity of $color by the percentage specified in $alpha	opacify(#ad4038, 50) Result:
transparentize($color, $amount) fade-out($color, $amount)	Reduces the opacity of $color by the percentage specified in $alpha	transparentize(#ad4038, 50) Result:
adjust-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])	Changes $color by one or more of the named arguments.	adjust-color(#ad4038, $red: 10) Result:
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%) Result:
		scale-color(#ad4038, $red: -50%) Result:
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) Result: