Sass & CompassColor Functions

Sass and Compass provide a number of useful functions you can use to alter and manipulate colors with ease. Most color functions operate on a single color, but some can be used to combine two colors in different ways. Our "base color" and "alternate color" will be used throughout the examples. You can click on the swatch for either of those two colors to change their values and see how the calculated colors adjust accordingly.

Example Colors

Base Color

— The color for which all color operations are based on.

$color

Alternate Color

— The alternate color used in functions that operate on more than one color.