Блог

Я хотел бы отсортировать набор цветов, чтобы я мог отображать их наиболее визуально приятным способом. Я понимаю, что это широкая тема, и то, что считается визуально приятным, открыто для обсуждения, поэтому я решил использовать алгоритм Delta-E. Я использую библиотеку JS под названием Delta-E.

Я могу использовать этот алгоритм для одновременного сравнения двух цветов и нахождения воспринимаемой разницы между ними, и тривиально просмотреть все цветовые комбинации и сохранить эту разницу для каждой комбинации.

Однако я не уверен, как выйти за рамки этого пункта. Как только у меня будут дельты для каждой пары цветов, как мне использовать эти значения для упорядочивания цветов?

Какую сортировку мне нужно использовать?

На самом деле я имею дело с той же проблемой прямо сейчас. Одно из решений, с которым я работаю, — это установить цвет привязки. Я имею в виду, что вы должны вызвать свою 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 значения разницы не совсем подходят для этой техники привязки, и вместо этого я использовал евклидово расстояние в качестве значения, из этой библиотеки (которая также имеет функцию Delta-E).