Dec 17, 2020

Sass converts hsla to hex incorrectly

I ran into an issue where Sass was converting hsla() values to hex incorrectly. It would take an input like this:

/* input.scss */
.subtle-blue {
  background-color: hsla(212, 50%, 50%, 10%);
}

And convert it into:

/* output.css */
.subtle-blue {
  background-color: #407bbf;
}

That is not the same color. When processing the input styles, Sass ignores the alpha (opacity) value and converts it into a standard hex.

You can see the different between the two values here:

If you search around for an answer, you will find a few suggestions to use strings for hsl values or recreating the hsl and hsla functions in Sass. Neither of those seemed an idea solution.

Instead of changing how you declare hsl value or recreating the function, you can fix this issue by using decimal alpha values instead of percent. Going back to the original example, change 10% to 0.1:

/* Input Sass */
.subtle-blue {
  background-color: hsla(212, 50%, 50%, 0.1);
}

And Sass will convert it to alpha-supporting rgba:

/* Output css */
.subtle-blue {
  background-color: rgba(64, 123, 191, 0.1);
}

These values aren’t identical because math is required, but they’re infinitely closer than the non-alpha hex value:

You can see this behavior for yourself in this Sass playground but not in Sassmeister. So it may depend on the flavor and version of Sass that you are using.

But for a quick fix that doesn’t involve wading into the release notes of your dependencies, opt for decimal alpha values in hsla.

Happy styling!

---