SassMe: Visualize SASS color functions in real-time without compiling

I usually use three color variables ($background, $foreground, $highlight) every time I start a website and expand sparingly from there. If I wanted my headers to have an indented appearance, I can use a text shadow 1px above the text with `darken($background, 10%)` to choose an appropriate color for the imprint without having to manually keep them in sync. Similarly, if I'm ever working with gradients, say on an alert bar that spans the top of the screen, I can simply use `linear-gradient(top, lighten($highlight, 5%), darken($highlight, 5%))`.

If you'd like an example of a website built this way, we completed enyojs.com in about two weeks thanks entirely to SASS and in part to color variables and functions.

As ever, your mileage may vary and what works wonders for me may not fit your style of design.

Of course, once I've settled on final colors, I may go in and tweak all of the shades with exact values.

Saturate/Desaturation does the same for the S (saturation) value in the HSL representation of the color.

Adjust_Hue moves the hue of the color (H in HSL) around a 360 degree color wheel. (from 0 - 360)

https://en.wikipedia.org/wiki/HSL_and_HSV

If you look at how SASS handles colors under the hood, then yeah, that's how it does it.

1. darken(#deadbe, 20) => #c16484

2. saturate(#deadbe, 57) => #ff8cb4

3. adjust_hue(#deadbe, 302) => #cfadde

All of these are much more reasonable results for these functions.

[1]: http://sass-lang.com/try.html