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

[dkryaklin]

Hey @soelen-hella you're not doing anything wrong. Your approach is correct: .mix(overlayColor, opacity) is mathematically equivalent to alpha compositing when both colors are fully opaque, and it should give #cee2d8.

The issue is that colord's mix plugin interpolates in CIE Lab color space, not RGB. Lab mixing is perceptually uniform but produces a different result than what a browser renders when compositing a rgba(0, 125, 64, 0.14) layer which is why you're seeing #d3e2d6 instead of the expected #cee2d8.

If you switch to @colordx/core, .mix() uses linear RGB interpolation and gives the correct result:

import { colordx } from '@colordx/core';

colordx('#f0f3f1').mix('#007d40', 0.14).toHex()  // '#cee2d8'