Я строю линейный график с десятками наборов данных. Когда их много, становится все труднее отличить guish один от другого.
Мне нужен способ для создания цветовой палитры любого заданного числа цветов, чтобы цвета настолько отличительным, насколько это возможно. Это означает, что человеческий глаз должен легко различать их.
Я ожидаю, что яркие цвета, например, f00, 0f0, 00f, ff0, f0f, 0ff - появятся первыми, потому что они наиболее визуально различимы (они не должно быть точно f00, 0f0 ...).
Черное и белое не должны появляться в палитре, поскольку они являются наиболее распространенными цветами фона. Кроме того, должно быть возможно определить исключения (либо в виде списка цветов, либо минимальной / максимальной яркости).
Вот что я пробовал:
Большинство ответов из этого SO вопроса - некоторые выглядят действительно хорошо на небольших палитрах (9-12 цветов), но на 30+ цветах появляются очень близкие цвета, тогда как многие очевидные цвета остаются неиспользованными.
Например, золотой угол ответ гениален, но он использует только одно из трех измерений, существенно ограничивая разнообразие цветов.
Я пытался применить этот подход к трем измерениям ( HSL), но поскольку три спина не связаны логически, результат довольно посредственный.
Палитра Google. js - генерирует только двухцветные градиенты и радуги, содержащие одно- цвета канала. Каждые два последующих цвета очень близки.
- Отдельные цвета * Библиотека 1029 * - генерирует тусклую палитру, субъективно цвета слишком близки друг к другу, а общие яркие цвета отсутствуют.
- https://mokole.com/palette.html - отличный результат, но очень медленный. Генерация 30 цветов на очень быстром P C.
занимает минуты. Принимает как фрагменты, так и рекомендации библиотеки. В идеале вывод должен быть массивом шестнадцатеричных цветных строк или объектов chroma- js.
Вот моя лучшая попытка на данный момент. Он использует подход золотого угла, упомянутый выше, но вращает и оттенок, и яркость.
import { times } from 'lodash-es';
const goldenAngle = 137.508;
// Based on https://stackoverflow.com/a/20129594/901944
function selectColor(i) {
const hue = i * goldenAngle; // use golden angle approximation
const saturation = 100;
const brightness = (((i + 50) * goldenAngle) % 30) + 20;
return `hsl(${hue},${saturation}%,${brightness}%)`;
}
export default function palette(count) {
return times(count, (i) => selectColor(i));
}
PS Да, я понимаю, что на больших палитрах цвета неизбежно будут казаться повторяющимися. Я хочу алгоритмически убедиться, что палитра настолько разнообразна, насколько она контрастна.