Applying screendesigns with transparent layers correctly

[soelen-hella]

Hey, trying to figure out how to get the correct values correctly based on a figma design:

The background color is #f0f3f1, primary40 is #007d40. As we can see from the screenshot we have 5 different layers with different opacity levels, 5, 8, 11, 12 and 14%.

So what I try to do e.g. with the 14% layer is following:

const elevationLevel5 = colord( '#f0f3f1' ).mix( '#007d40', 0.14 ).toHex()

According to a color picker it should result to #cee2d8 but what I get is #d3e2d6, which looks like this:

So my question is: Am I doing something wrong with my way of calculating it? Is the mix algorithm is a different one than what we see in figma/on a browser?

Thanks in advance

Edit: Looking at HSL values it seems like the color is off by hue, saturation and lightness as well.

Should: hsl(150, 26%, 85%), calculation: hsl(134, 21%, 86%)