Using Sass's '@for' and Compass to Exponentially Desaturate & Lighten H1 - H6 from a Single Color Value

Lets say you are designing a website that has a monochromatic color scheme and you want your headings to use some base color you've chosen but vary in the saturation and brightness from most important to least important as part of your visual indication of hierarchy. You could just as easily write some CSS that does just that for each heading. But I thought it would be neat if we let Sass and Compass do the heavy lifting.

Here is some SCSS/Compass code that essentially steps through your heading elements h1 through h6 while both desaturating and lighten a color value exponentially using Sass '@for' and the Compass header mixin.

SCSS Code:

$color: #00477f; /* a dark blue color for example*/

@for $i from 1 through 6 {
    $val: pow(1.333, $i) * (($i) - 1) * 3;
    h#{$i} { color: adjust-lightness((adjust-saturation($color, -$val)), ($val/2)); }
}

CodePen Example: http://codepen.io/anon/pen/AvkzJ