如何计算具有相同一般亮度的视觉上不同的 CSS 色调

Question

我想获得具有相同感知亮度但不同色调的多种颜色。

我知道 CSS 的

hsl

颜色空间在您改变色调时没有一致的感知亮度

上图，第 0、5 和 6 行明显比第 1、2、3、4 行暗得多。

所以，我试过，

lch

颜色应该具有感知一致的亮度。

不幸的是，除非我是色盲，否则它在给定距离内没有明显的色调

这里色相之间的距离是45度

至少在我看来，第 4、5 和 6 行看起来相同，即使它们相隔 45 度

这是我用来实验的一些代码

const hsl = (h, s, l) => `hsl(${h * 360}, ${s * 100}%, ${l * 100}%)`;
const hwb = (h, w, b) => `hwb(${h * 360} ${w * 100}% ${b * 100}%)`;
const lch = (l, c, h) => `lch(${l * 100} ${c * 250 - 125} ${h * 360})`;
const range = (n, fn) => new Array(n).fill(0).map((_, i) => fn(i)); // eww

// creates 'num' div
// fn is a function that receives a number between 0 and 1
// it should return a CSS color
function addDivs(num, fn, label) {
  document.body.appendChild(el('div', { className: 'group' }, [
    el('h2', {textContent: label}),
    el('div', {className: 'colors'}, range(num, i => el('div', {
      style: {
        backgroundColor: fn(i / num),
      },
      textContent: `${i}: ${fn(i / num)}`,
    }))),
  ]));
}

//addDivs(8, l => lch(l, 1, 0), "lch(l)");
//addDivs(8, c => lch(1, c, 0), "lch(c)");
addDivs(8, h => lch(1, 1, h), "lch(1, 1, h)");
addDivs(8, h => hsl(h, 1, 0.5), "hsl(h, 1, 0.5)");
addDivs(8, h => hwb(h, 0, 0), "hwb(h, 0, 0)");

addDivs(8, h => lch(0.7, 0.8, h), "lch(0.7, 0.8, h)");


function el(tag, attrs = {}, children = []) { 
  const elem = document.createElement(tag);
  for (const [key, value] of Object.entries(attrs)) {
    if (typeof value === 'function' && key.startsWith('on')) {
      const eventName = key.substring(2).toLowerCase();
      elem.addEventListener(eventName, value, {passive: false});
    } else if (typeof value === 'object') {
      for (const [k, v] of Object.entries(value)) {
        elem[key][k] = v;
      }
    } else if (elem[key] === undefined) {
      elem.setAttribute(key, value);
    } else {
      elem[key] = value;
    }
  }
  for (const child of children) {
    elem.appendChild(child);
  }
  return elem;
}

我注意到，如果我将

c

色度值降低到 0.8 以下，那么在相同亮度下我会得到感知上不同的色调。不幸的是，色调不再饱和。

是否有其他颜色空间或计算可以为我提供相同色相之间距离的不同饱和色？