How do you get the same easing / gradient as the browser?

[NullVoxPopuli]

For example, I have:

background-image: linear-gradient(
  in oklch to right,
  var(--start),
  var(--end)
);

and then in javascript:

const interpolator = interpolate([this.start, this.end], 'lch');
const colors = samples(5).map(interpolator);

return colors;

which generates something like this:

the color bands are obvious here -- but they should be pretty invisible, even though they are a couple rem wide.

the end-colors on the very left and very right are perfect, so it's the interpolation of the middle 3 colors that seems wrong.

Is there an existing easing function that matches the browser behavior?

I've deployed this here:

• https://19f56ef0.color-perception.pages.dev/configure?end=%23a51d2d&start=%231a5fb4

And my code is here:

• https://github.com/NullVoxPopuli/color-perception/pull/1/files#diff-bd2acdc10b373e98b305fd4f971c772b180fd06f177c8174c17a10fdfeae5504R77

[danburzo]

Hi @NullVoxPopuli, the problem might be produced by the fact that the browser gradient is in Oklch and the Culori JS code uses lch = CIELCH. Switching to oklch in interpolate() should give you a more consistent result.

[NullVoxPopuli]

thanks! ya, I forgot that oklch isn't lch.

I now an barely see my lines (as expected)

thanks!

There is also a bit of an illusion, where, even though these lines are solid colors, they still look like they have gradients -- unless I turn my screen sideways.

[danburzo]

There is also a bit of an illusion, where, even though these lines are solid colors, they still look like they have gradients -- unless I turn my screen sideways.

I definitely see it!