CSS Variable Calculation of Hsl Values

CSS variable calculation of HSL values

You are missing percentages. the syntax should be hsl(h, s%, l%) (https://www.w3.org/TR/css-color-3/)

:root {
    --hue: 201;
    --saturation: 31%; /* here */
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20;

    --lightnessPlus: calc((var(--lightness) + var(--difference))*1%); /* here */
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc((var(--lightness) - var(--difference))*1%);  /* here */
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

body {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

How to Use calc() to switch between color values?

You cannot multiply hex values like You are doing. A trick is to use gradient and control the percentage of colors. This will work with any color format:

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(
     var(--enable-color)    calc(100% * var(--enable)),
     var(--disable-color) 0 calc(100% * (1 - var(--enable))) 
   );
     
 }

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

Using a Sass variable mapped to an hsl value doesn't work when trying to use it with hsla

It's not an issue with SASS, the functionality simply doesn't exist. If you look at the documentation, there are two versions of rgba(), one that accepts all of the parameters separately and one that accepts a Color object.

rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

If you look at the documentation for hsla(), it only accepts the values separately.

hsla($hue, $saturation, $lightness, $alpha)

To achieve your goal, you could do this:

$white:hsl(100, 100%, 100%);

.thing{
 color: hsla(hue($white), saturation($white), lightness($white), .9);
}

Or... if you want to pass the Color object, you can create your own function since you can't overload functions; e.g. hslac($color, $alpha)

@function hslac($color, $alpha) {
  @if(type-of($color) == "color") {
    @return hsla(hue($color), saturation($color), lightness($color), $alpha);
  }
  @else {
    @error "You didn't pass a color object";
  }
}

How do I use hsla as background-color in CSS?

The second and third values should have %.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla()#values

<h1 style="background-color: hsla(302, 59%, 65%, 0.6);">
foobar
</h1>

Sass color transform calculation

You can measure the differences between colors in different ways, depending on the color model/space you're using. Hex colors use RGB, but the HSL model will be more useful here. It records a color as 3 values: Hue, Saturation and Lightness.

We can use SASS's HSL functions to work out how each value of the color differs, and then selectively apply that difference to other colors:

$start-color: #1E95EF
$end-color: #1988DD

//We won't need the hue-difference in practice
$hue-difference: hue($start-color) - hue($end-color)

//These express the difference as a percentage
$saturation-difference: saturation($start-color) - saturation($end-color)
$lightness-difference: lightness($start-color) - lightness($end-color)

@function color-adjust($base-color)
  //Apply the lightness and saturation changes but keep the original Hue
  @return hsl(hue($base-color), saturation($base-color) + $saturation-difference, lightness($base-color) + $lightness-difference)

//To find the adjusted color, just pass whatever base color you like to the color-adjust function:
background: color-adjust(red)

Here's a demo with a few colors: http://codepen.io/anon/pen/bqOaZZ

Obviously that code can be compacted a lot - I'm thinking that what you really want is to define your variants as a set of Saturation/Lightness changes, and then apply them to your whole palette (rather than trying to 'reverse-engineer' it from one example pair). If you want help with something to do that, let me know!

---

Related Topics