Add or subtract 50% to Lightness value in HSL format in a Sass mixin

Question

I have several colors in HSL format, this one of them: 284, 3, 30.

I need to create a Sass mixin for the developers where all they need to do is add or subtract 50% of the Lightness value (30) in order to achieve the desired color as per our brand guidelines.

What I currently have works to a certain extent:

@mixin smoke($l:30) {
    color: hsl(284, 3, $l);
}

So if the developer wants to add 50% to the Lightness (+15), they could do this:

@include smoke(45);

And for the lighter color (-15), they would do this:

@include smoke(15);

The problem with this approach is that the developers HAVE to remember the Lightness values of all the colors (or go back to the guidelines over and over) in order to determine what is the 50% of a particular color that they need to use and then manually add that value to the argument. Makes sense?

What I'm looking for is a way to create a mixin that allows the developers to just reference the color name in the @include directive and then just type (+50%) or (-50%) in the argument, then when the CSS is compiled it would look like this:

• Darker color: 284, 3, 15 (Lightness has been reduced by 50% of 30).
• Lighter color: 284, 3, 45 (Lightness has been increased by 50% of 30).

If I do @include smoke(+50%); or @include smoke(-50%); I get totally different colors.

Here's my initial Sass I've been working with:

//Color
@mixin smoke($l:30) {
    color: hsl(284, 3, $l);
}

body {
    /*DOES WORK BUT NOT IDEAL METHOD*/
    /*Light = #746f77*/
    @include smoke(45);
    /*Dark = #272527*/
    @include smoke(15);
    /*===========*/
    /*DOESN'T WORK BUT IDEAL METHOD*/
    /*Light = #746f77*/
    @include smoke(-50%);
    /*Dark = #272527*/
    @include smoke(+50%);
}

https://codepen.io/ricardozea/pen/VgRVbG?editors=0100

Thank you.

Answer 1

you gave the wrong value because in HSL values are in %(percentage)

hsl(284%, 3%, 45%)

you don't need to use

 @include smoke(-50%);
 /*Dark = #272527*/
 @include smoke(+50%);

because when you give these argument to mixin smoke(+50%); or smoke(-50%); and sass compiles it and convert these values into

hsl(284%, 3%, +50%) or hsl(284%, 3%, -50%) 

thats why you get different colors and in negative value you get no color

Answer 2

Here's the solution I came up with.

Since I posted the question things have changed. Now I not only need to modify the Lightness by 50% but actually by quarters, like 25%, 50%, and 75%, for each color.

So in a comment block in my SCSS file, I have a list of the Lightness values I need for all my colors, in this case we're only addressing my "Smoke" color which has a Lightness value of 30.

Taking my initial color mixin:

//Color
@mixin smoke($l:30) {
    color: hsl(284, 3, $l);
}

…if I want to add 25% Lightness to 30, I do this:

.selector {
    @include smoke(30*1.25);
}

Sounds very stupid once you understand it, I know, so bear with my explanation:

What this does is that it multiplies 30 by itself (by 1) and then adds 25% of itself (.25). It's basically the same as doing 30 + 7.5.

Which turns out to be hsl(284, 3, 37.5) which is exactly what I needed. Keep in mind though that Sass renders HSL and HSLA color modes in HEX values. ¬¬ I know right?

All examples together

Here's how to use this approach to add and subtract 25%, 50%, and 75% Lightness from a color.

Lighter color (increase Lightness):

+25% Lightness

.selector {
    @include smoke(30*1.25);
}

+50% Lightness

.selector {
    @include smoke(30*1.5);
}

+75% Lightness

.selector {
    @include smoke(30*1.75);
}

---

Darker color (reduce Lightness):

-25% Lightness

.selector {
    @include smoke(30/1.25);
}

-50% Lightness

.selector {
    @include smoke(30/1.5);
}

-75% Lightness

.selector {
    @include smoke(30/1.75);
}

The beauty of this method is that if I need to add more color ranges, say, every 10%, all I need to do is change the decimal values to multiples of 10, like this for example:

.selector {
    @include smoke(30*1.20);
}

or

.selector {
    @include smoke(30/1.60);
}

The only downside to this method is that the developer has to know the specific Lightness value of a color because it has to be hardcoded into the argument. But that's why I have a list of the Lightness values I need for all my colors in a comment block at the bottom my SCSS file ¯_(ツ)_/¯.

If you have a better way to accomplish this, please post your answer.

Thanks.

Answer 3

The scale-color built-in function in sass already makes provision for this. this is a solution using the scale-color function in the color module

@mixin smoke($color, $l){
  background: scale-color($color, $lightness: $l)
}

then to increase the lightness by 50%

body{
  @include smoke(hsl(284%, 3%, 30%), +50%);
}