Question

我想对一组颜色进行排序，以便能够以最愉悦的方式显示它们。我知道这是一个广泛的主题，被视为视觉上令人愉悦的内容是有争议的，因此我选择使用Delta-E算法。我正在使用名为Delta-E的JS library。

我可以使用这种算法一次比较两种颜色并找到它们之间的感知差异，并且贯穿所有颜色组合并为每种组合存储这种差异是微不足道的。

但我不确定如何超越这一点。一旦我有每对颜色的增量，我如何使用这些值来排序颜色？

我需要使用哪种类型？

Answer 1

我现在实际上正在处理相同的问题。我要解决的一种解决方案是设置锚点颜色。我的意思是，您将使用相同的锚点颜色调用deltaE函数，然后调用要比较的颜色，这将返回相同颜色的差值。然后，您可以在Array.sort()调用中使用该差值：


const colors = ['#333333', '#f1f1f1', '#00aacc', '#ff6666', '#000000'];
const anchorColor = '#fff'; // White or black might be a decent choice of anchor color

colors.sort((colorA, colorB) => {
  // For each color, determine the color difference FROM the anchor color (not each other)
  const colorADelta = deltaE(anchorColor, colorA);
  const colorBDelta = deltaE(anchorColor, colorB);
  if (colorADelta > colorBDelta) {
    return 1;
  }
  if (colorADelta < colorBDelta) {
    return -1;
  }
  return 0;
});

但是，在我的个人测试中，我发现deltaE差值并不完全适合此锚定技术，而是使用Euclidean distance作为值{{3 }}（还具有Delta-E功能）。

使用Delta-E对颜色进行排序

1 个答案: