Sass function to set a color to an absolute hue

The adjust-hue function Show archive.org snapshot of Sass allows you to change a color's hue, but only relative to its current hue.

adjust-hue(#ffff00, 120)
// => #00ffff
adjust-hue(#444400, 120)
// => #004444

As you can see, we moved our yellow by 120° to cyan. \
But what if you want to move any color to a hue of 120° which is a nice shiny green?

Take this function:

@function set-hue($color, $target-hue)
  $current-hue: hue($color)
  $degrees: $target-hue - $current-hue
  @return adjust-color($color, $hue: $degrees)

It now works as expected:

adjust-hue(#ffff00, 120)
// => #00ff00
adjust-hue(#444400, 120)
// => #004400

Arne Hartherz

makandra.com

Say thanks

License

Source code in this card is licensed under the MIT License.

Posted by Arne Hartherz to makandra dev (2014-07-07 16:12)