Sass in the Real World: book 2 of 4

Color Functions

Scott Kellum wrote a great sass toolset named Color Schemer which is now part of Team-sass collection. According to the Color Schemer README file, the description of the toolset is as such:

Color schemer is a robust color toolset for Sass. It expands on the existing Sass color functions and adds things like RYB manipulation, set-hue, set-lightness, tint, shade and more. It also leverages these tools adding a full-featured color scheming tool that allows you to set one primary color and create whole color schemes around it.

This toolset takes full advantage of almost all the color functions that comes with Sass.

// Changes the hue of a color.
@function ryb-adjust-hue($color, $degrees) {

  // Convert precentag to degrees.
  @if unit($degrees) == "%" {
    $degrees: 360 * ($degrees / 100%);

  // Start at the current hue and loop in the adjustment.
  $hue-adjust: (ryb-hue($color) + $degrees) / 1deg;

  @return hsl(hue(cs-interpolate($hue-adjust)), saturation($color), lightness($color));

// Returns the complement of a color.
@function ryb-complement($color) {
  @return ryb-adjust-hue($color, 180deg);

// Returns the inverse of a color.
@function ryb-invert($color) {
  @return ryb-adjust-hue(hsl(hue($color), saturation(invert($color)), lightness(invert($color))), 180deg);

As you can see, the color functions used within several functions that extend the ability to adjust the color scheme not only in RGB and HSL but also in RYB color model.