Sass has functions that you can use to change and manipulate base colors. It saves you the hassle of picking a shade of the color you need and having multiple shades of a color, mix 2 colors with ease, adjust hue or saturation and so much more.

Create variables

First, let's assign a color to a variable:

$neptune:     #73AAAC;
$star:        #E5F139;

This saves me the trouble of typing hex over and over again which can result to some errors. It's my personal preference to name my variables uniquely other than just $blue or $red but that's up to you. I use Sip color picker to pick the colors from the mockup. It can give unique names for it too!

Mixing

Mix mixes two colors together.

/* mix($color1, $color2, $weight) */
/* Weight should be in percent */
mix($neptune, $star, 70%);

Output:

$neptune

$star

mix($neptune, $star, 70%);

Opacity

rgba

Changes the alpha component of a color. There are more ways to adjust a color's transparency but I usually stick to rgba .

/* rgba($neptune, $amount); */
/* Amount of 1 gives a solid color */
rgba($neptune, 0.5);

Output:

$neptune

rgba($neptune, 0.5)

opacify/fade-in

Makes color more opaque. $neptune is already opaque, so we don't see any changes.

/* opacify($color, $amount) || fade-in($color, $amount) */
opacify($neptune, 0.5);

Output:

$neptune

opacify($neptune, 0.5);

transparentize/fade-out

Makes a color more transparent.

/* transparentize($color, $amount) || fade-out($color, $amount) */
transparentize($neptune, 0.5);

Output:

$neptune

transparentize($neptune, 0.5);

HSL Functions

Getting HSL components

hue($color)
saturation($color)
lightness($color)
alpha($color)

darken

Makes a color darker. Adjust amount by percent.

/* darken($color, $amount) */ 
darken($neptune, 20%);

Output:

$neptune

darken($neptune, 20%);

lighten

Makes a color lighter. Adjust amount by percent.

/* lighten($color, $amount) */ 
lighten($neptune, 20%);

Output:

$neptune

lighten($neptune, 20%);

desaturate

Makes a color less saturated. Adjust amount by percent.

/* desaturate($color, $amount) */ 
desaturate($neptune, 10%);

Output:

$neptune

desaturate($neptune, 10%);

saturate

Makes a color more saturated. Adjust amount by percent.

/* saturate($color, $amount) */ 
saturate($neptune, 10%);

Output:

$neptune

saturate($neptune, 10%);

grayscale

Converts color into grayscale

/* grayscale($color) */ 
grayscale($neptune);

Output:

$neptune

grayscale($neptune);

complement

Returns the complement of a color.

/* complement($color) */
complement($neptune);

Output:

$neptune

complement($neptune);

invert

Returns the inverse of a color.

/* invert($color) */
invert($neptune);

Output:

$neptune

invert($neptune);

adjust-hue

Changes the hue of a color.

/* adjust-hue($color, $degrees) */
adjust-hue($neptune, 20deg);

Output:

$neptune

adjust-hue($neptune, 40deg);

Other Color Functions

adjust-color

Increases or decreases one or more components of a color.

/* adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) */
adjust-color($neptune, $red: 10, $green: -60);

output:

$neptune

adjust-color($neptune, $red: 10, $green: 60);

scale-color

Fluidly scales one or more properties of a color.

/* scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) */
scale-color($neptune, $red: 10%, $green: 70%, $blue: 8%);

output:

$neptune

scale-color($neptune, $red: 60%, $green: 10%, $blue: 8%);

change-color

Changes one or more properties of a color.

/* change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) */
change-color($neptune, $red: 10%, $green: 70%, $blue: 8%);

output:

$neptune

change-color($neptune, $red: 225, $green: 157, $blue: 123);

Full Documentation

http://sass-lang.com/documentation/Sass/Script/Functions.html