Sass: $color-darken with HSL color codes

Question

I know how to use built-in functions for determining a darker color from a hex code. But how to do this with hsl? I have three colors, one primary, one darker and a lighter one. I need to write a function to calculate the difference between them and get a lighter and darker shade for them. So when I add another color code, it'll give me same percentage for lighter and darker shade.

As I understand from Sass documentation, I first need a function to get hue, saturation, and lightness of my base color, right? But what then?

These are my colors in hex:

$base: #7760BF;
$base-darker: #483584;
$base-lighter: #b5a9dc;

And here they are in hsl, just in case:

$base: hsl(255, 43%, 56%);
$base-darker: hsl(254, 43%, 36%);
$base-lighter: hsl(254, 42%, 76%);

Can someone help me out?

Here is one using jquery codepen.io/pankajparashar/pen/oFzIg — Brad
Thank you for replying, but I'm wondering about Sass solutions. — hemoglobin
@Brad Sass is a preprocessor. So in this case, and for most Sass questions, a runtime package is not needed, and should even be avoided. — ncoden

ncoden ncoden · Accepted Answer · 2017-06-26T13:49:25

In Sass, types are converted automatically. Color functions from the Sass standard library will accept any color, rgb or hsl.

At first to generate darker and lighter colors, you can use darken and lighten. I made an example here.

Then to know the lightness difference between colors to generate new colors with the same difference, you can use lightness.

@function get-lightness-diff($base, $color) {
    @return lightness($base) - lightness($color);
}

@function get-variant($color, $diff) {
    @if ($diff < 0) {
        @return darken($color, -$diff);
    } @else {
        @return lighten($color, $diff);
    }
}

@function get-variants($color, $diff) {
    $ret: ();
    $ret: map-merge($ret, ( darker: get-variant($color, -$diff) ));
    $ret: map-merge($ret, ( lighter: get-variant($color, $diff) ));
    @return $ret;
}

@function get-variants-from-set($color, $darker, $base, $lighter) {
    $darker-diff: get-lightness-diff($base, $darker);
    $lighter-diff: get-lightness-diff($base, $lighter);

    $ret: ();
    $ret: map-merge($ret, ( darker: get-variant($color, $darker-diff) ));
    $ret: map-merge($ret, ( lighter: get-variant($color, $lighter-diff) ));
    @return $ret;
}

$base: hsl(255, 43%, 56%);
$base-lighter: hsl(255, 43%, 66%);
$base-darker: hsl(255, 43%, 46%);

// Get a lightness diff, from the light color for example
$diff: get-lightness-diff($base, $base-lighter);

// Variants: contains a map with 'darker' and 'lighter' colors.
$variants: get-variants($base, $diff);
// Or create your lighter/darker variants manually:
$darker: get-variant($base, -10%);
$lighter: get-variant($base, 10%);

// Or all-in-one: create your variants from an other set of colors:
$other-base: hsl(255, 33%, 33%);
$other-variants: get-variants-from-set($other-base, $base-darker, $base, $base-lighter);

I made an other example here, but you may have to adapt it to make it fit your needs.

Edit (11/07/17): Since I written this post, I improved the utilities we can use to generate colors variants. You can see an example at: https://codepen.io/ncoden/pen/yXQqpz?editors=1100.

Sass: $color-darken with HSL color codes

1 Answers