0 as Saturation and Lightness Doesn't Work But 0% Does in Hsl/Hsla

0 as saturation and lightness doesn't work but 0% does in hsl/hsla?

A 0 <length> in CSS is unitless, not any 0, otherwise disambiguation would not be possible (e.g. in shorthands). This is a <percentage>, not a <length>.

Specification:

• http://www.w3.org/TR/css-values/#percentages
• http://www.w3.org/TR/css-values/#lengths

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";
  }
}

Mix an HSLA color with white and convert to non-alpha HSL with Chroma.js

I do not know how to do this with the library you mentioned (Chroma.js) but hopefully a vanilla JavaScript function will help.

Please note that the below function always assumes an opaque background colour to work correctly (hence background RGB and foreground RGBA).

If you need to work with 2 colours that both have alpha channels you would run the function on the background colour first (as the foreground colour) with a white background and then combine the two colours.

The function will also combine two RGB colours, simply omit the alpha channel when passing your RGB colour (convertToRGB({r,g,b}, {r,g,b}))

function convertToRGB(frontRGBA, backgroundRGB){

var rtrn = {};
//allows the function to just accept a front colour and assume the background is a plain white.
backgroundRGB = backgroundRGB || {r:255,g:255,b:255};

//allows a RGB value to be passed in assuming full alpha channel.
frontRGBA.a = frontRGBA.a || 1;

//normalise the alpha channel across the foreground and background.
rtrn.r = ((1 - frontRGBA.a) * backgroundRGB.r) + (frontRGBA.a * frontRGBA.r);
rtrn.g = ((1 - frontRGBA.a) * backgroundRGB.g) + (frontRGBA.a * frontRGBA.g);
rtrn.b = ((1 - frontRGBA.a) * backgroundRGB.b) + (frontRGBA.a * frontRGBA.b);

//just check that we don't end up with a value greater than 255 for any channel.
rtrn.r = (rtrn.r > 255) ? 255 : rtrn.r;
rtrn.g = (rtrn.g > 255) ? 255 : rtrn.g;
rtrn.b = (rtrn.b > 255) ? 255 : rtrn.b;

return rtrn;

}

var backgroundRGB = {r:165,g:193,b:211};
var frontRGBA = {r:210,g:203,b:178,a:0.25};

//used for example
var rgb = convertToRGB(frontRGBA, backgroundRGB); 
document.querySelector(".output").style.background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
document.querySelector(".output").innerHTML = "Output<br/>R:" + rgb.r + "<br/>G:" + rgb.g + "<br/>B:" + rgb.b;

.container div{
   width: 200px;
   height: 200px;
   float: left;
}
.div1{
    background: rgba(165,193,211,1);
}
.div2{
    background: rgba(210,203,178,0.25);
}

<div class="container">
<div class="div1">Background<br/>R:165<br/>G:193<br/>B:211<br/>A:1</div>
<div class="output">Output</div>
<div class="div2">Foreground<br/>R:210<br/>G:203<br/>B:178<br/>A:0.25</div>

</div>

HSL to RGB color conversion

Found the easiest way, python to the rescue :D

colorsys.hls_to_rgb(h, l, s)

Convert the color from HLS coordinates to RGB coordinates.

---

Related Topics