Generated by SassMeister.com.

Color-Functions.css

.color {
  font-weight: bold;
  font-size: 20px;
}

.light-blue {
  color: #259de4;
}

/*BABY BLUE  */
.baby-blue {
  color: #45baff;
}

.baby-blue-math {
  color: #45baff;
}

/*NAVIGATION BLUE  */
.nav-blue-dk {
  color: #228cdd;
}

.nav-blue-dk-math {
  color: #228cdd;
}

Color-Functions.haml

.light-blue.color Primary Color
<hr>
.nav-blue-dk.color nav blue dark
.baby-blue.color baby blue
.royal-blue.color royal blue
.blue-md.color blue md
.pale-blue.color pale blue
<hr>
.nav-blue-dk-math.color nav blue math function
.baby-blue-math.color baby blue math function
.royal-blue-math.color royal blue math function
.blue-md-math.color blue md math function
.pale-blue-math.color pale blue math function

Color-Functions.html

<div class='nav-blue-dk color'>nav blue dark</div>
<div class='nav-blue-dk-math color'>nav blue math</div>
<div class='light-blue color'>Light blue</div>
<div class='baby-blue color'>baby blue</div>
<div class='baby-blue-math color'>baby blue math function</div>

Color-Functions.sass

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// http://thesassway.com/advanced/how-to-programtically-go-from-one-color-to-another-in-sass

$light-blue: #259de4 // example: main header 

$baby-blue: #45BAFF //  example: main header hover state
$baby-blue-math: saturate(lighten($light-blue, 11.5%), 50%)

$nav-blue-dk: #228cdd // example: main header shade darker, perhaps for a border?
$nav-blue-dk-math: desaturate(adjust-hue(darken($light-blue, 1.9607%), 3.68564deg), 4.62588%)

////////////////////////////
.color
  font-weight: bold
  font-size: 20px
  
.light-blue
  color: $light-blue

/** BABY BLUE  **/  
.baby-blue
  color: $baby-blue
  
.baby-blue-math
  color: $baby-blue-math

/** NAVIGATION BLUE  **/
.nav-blue-dk
  color: $nav-blue-dk

.nav-blue-dk-math
  color: $nav-blue-dk-math

$blue-md: #007ada 
$blue-md-math: saturate(adjust-hue(darken($light-blue, 9.2%), 4.1deg), 22%)

.blue-md
  color: $blue-md
  
.blue-md-math
  color: $blue-md-math

.blue-md-values
  color: hue($blue-md)
  color: saturation($blue-md)
  color: lightness($blue-md)


/** royal BLUE  **/
$royal-blue: #1f5ad0  // used in local suite navigation hover and active
$royal-blue-math: desaturate(adjust-hue(darken($light-blue, 5.1%), 17.7deg), 3.9%)

.royal-blue
  color: $royal-blue
  
.royal-blue-math
  color: $royal-blue-math

.royal-blue
  color: hue($royal-blue)
  color: saturation($royal-blue)
  color: lightness($royal-blue)


.light-blue-values
  color: hue($light-blue)
  color: saturation($light-blue)
  color: lightness($light-blue)//

/** PALE BLUE **/
$pale-blue: #e3eff9
$pale-blue-math: desaturate(adjust-hue(lighten($light-blue, 41.3%), 5deg), 13%)

.pale-blue
  color: $pale-blue
  
  
.pale-blue-math
  color: $pale-blue-math
  
.pale-blue-values
  color: hue($pale-blue)
  color: saturation($pale-blue)
  color: lightness($pale-blue)

.light-blue-values
  color: hue($light-blue)
  color: saturation($light-blue)
  color: lightness($light-blue)

SassMeister-output.css

.color {
  font-weight: bold;
  font-size: 20px;
}

.light-blue {
  color: #259de4;
}

/*BABY BLUE  */
.baby-blue {
  color: #45baff;
}

.baby-blue-math {
  color: #45baff;
}

/*NAVIGATION BLUE  */
.nav-blue-dk {
  color: #228cdd;
}

.nav-blue-dk-math {
  color: #228cdd;
}

.blue-md {
  color: #007ada;
}

.blue-md-math {
  color: #007ada;
}

.blue-md-values {
  color: 206.42202deg;
  color: 100%;
  color: 42.7451%;
}

/*royal BLUE  */
.royal-blue {
  color: #1f5ad0;
}

.royal-blue-math {
  color: #1f5ad0;
}

.royal-blue {
  color: 220deg;
  color: 74.05858%;
  color: 46.86275%;
}

.light-blue-values {
  color: 202.30366deg;
  color: 77.95918%;
  color: 51.96078%;
}

/*PALE BLUE */
.pale-blue {
  color: #e3eff9;
}

.pale-blue-math {
  color: #e3eff9;
}

.pale-blue-values {
  color: 207.27273deg;
  color: 64.70588%;
  color: 93.33333%;
}

.light-blue-values {
  color: 202.30366deg;
  color: 77.95918%;
  color: 51.96078%;
}

SassMeister-rendered.html

<div class='light-blue color'>Primary Color</div>
<hr>
<div class='nav-blue-dk color'>nav blue dark</div>
<div class='baby-blue color'>baby blue</div>
<div class='royal-blue color'>royal blue</div>
<div class='blue-md color'>blue md</div>
<div class='pale-blue color'>pale blue</div>
<hr>
<div class='nav-blue-dk-math color'>nav blue math function</div>
<div class='baby-blue-math color'>baby blue math function</div>
<div class='royal-blue-math color'>royal blue math function</div>
<div class='blue-md-math color'>blue md math function</div>
<div class='pale-blue-math color'>pale blue math function</div>