How can I obtain a color with a specific lightness from the interpolator?

[rptfrg]

Let's say I've got myself a nice white yellow orange red black interpolator in okhsl space.

Is there any way I can obtain a color from it with a condition that, for example, l = 0.3? Or h=50? (only one condition at a time)

Thank you!

[danburzo]

Depending on the kinds of constrains you are able to impose, there might be a couple of different solutions, none of them immediately using the culori API. Assuming you're using the (default) linear interpolation, it can be solved mathematically.

import { okhsl } from 'culori';
const colors = ['white', 'yellow', 'orange', 'red', black'].map(okhsl);
const condition_L = 0.3;

First, find the two colors between which your desired color resides. If you're looking for Lightness = 0.3, find two adjacent colors in your array whose Lightness interval contains 0.3.

const interval_index = colors.findIndex(function(color, i) {
  return (
    i < colors.length - 1 && 
    Math.min(color.l, colors[i+1].l) <= condition_L && 
    Math.max(color.l, colors[i+1].l) >= condition_L
  );
});
if (interval_index > -1) {
  const colorA = colors[interval_index];
  const colorB = colors[interval_index + 1];
}

Then, having found your colorA and colorB between which your desired color resides, find where exactly between colorA and colorB your color resides (t ∈ [0, 1]), and derive the remaining channels based on that t.

import { lerp } from 'culori';
const t = colorA.l === colorB.l ? 0 : (condition_L - colorA.l) / (colorB.l - colorA.l);
const desired_color = {
  mode: 'okhsl', 
  h: lerp(colorA.h, colorB.h, t),
  s: lerp(colorA.s, colorB.s, t),
  l: condition_L
}

This code, which I've written here on GitHub for illustrative purposes (without testing) just scratches the surface, but hopefully gets you on the right track to solve the problem!

[rptfrg]

Thank you a lot, you've made me realize I've been a bit over-complicating things in my head.

And thank you for developing Culori!

[rptfrg]

@danburzo

I'm sorry for pestering, but I have realized now that what I really need in my project is an ability to find a specific interpolator value based on l condition, not a color.

(condition_L - colorA.l) / (colorB.l - colorA.l) formula works for that, but only when an interpolator has just two points total.

So, to paraphrase, given a condition l = number and an interpolator like this interpolation = interpolate(['white', 'gray', ..., 'black'], 'okhsl') I want to find a value, with which I can call interpolation(value) and get a color where l = number

May I ask for your help again?

[danburzo]

If you use the code described above, this part finds between which two colors your desired colors exists:

const interval_index = colors.findIndex(function(color, i) {
  return (
    i < colors.length - 1 && 
    Math.min(color.l, colors[i+1].l) <= condition_L && 
    Math.max(color.l, colors[i+1].l) >= condition_L
  );
});

after you find t between the two colors, you can transform this into a global_t by using the formula:

const global_t = (t + interval_index) / (colors.length - 1);
const color = interpolate(colors, 'okhsl')(global_t);

[rptfrg]

Thank you once again!