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:
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.
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%)