Altering a color palette is always a pain. If we want a less saturated color, we go to the hex charts, find a color that is lighter or darker, then replace our original hex code with that. Let’s say we have a background with the color #336699, and we want to make some text a little bit lighter (or a bit more saturated). We stab around in the dark until we find a suitable shade.

Sass makes this conversion a lot easier with a few neat functions. We’ve got lighten and darken, saturate and desaturate, and there’s a whole bunch more in Appendix 1, ​SassScript Function Reference​. Just put the function before the color you wish to change.

But this doesn’t just work for straightforward colors—we can also use it for color-based variables, darkening your $main_color, for example.

Using these functions and the ones in the examples opposite, it’s easy to change the whole website from blue to pink, retaining any of the differences in saturation and lightness.

• Lighten/Darken colors.

  ​	#page {
  ​	color: lighten(#336699, 20%); }

  This compiles to:

  ​	#page {
  ​	color: #6699cc; }

• Saturate/Desaturate colors.

  ​	$​main_color​: #336699;
  ​	#page {
  ​	color: saturate($main_color, 30%); }

  This compiles to:

  ​	#page {
  ​	color: #1466b8; }

• Change the hue.

  We use the adjust-hue function, followed by the number of degrees we want to rotate the hue.

  ​	$​main_color​: #336699;
  ​	#page {
  ​	color: adjust-hue($main_color, 180); }
  ​	#page {
  ​	color: adjust-hue(desaturate($main_color, 10%), 90); }

• Desaturate by 100 percent with grayscale.

  ​	grayscale(#336699);

  Using this method is the same as typing this:

  ​	desaturate(#336699, 100%);

• Mix colors.

  This function allows you to mix colors as best as we can guess.

  ​	#page {
  ​	color: mix(#336699, #993266); }

  Mixing blue and red gives a beautiful purple:

  ​	​color​: #664c7f;