javascript - 生成 N 种颜色的调色板 - 尽可能独特且相距较远，以便在图表中使用

Question

我正在构建一个包含数十个数据集的折线图。当它们很多时，越来越难以区分它们。

我需要一种方法来生成任何给定颜色数量的调色板，以便颜色尽可能独特。这意味着人眼应该很容易区分它们。

我希望明亮的颜色，例如 f00、0f0、00f、ff0、f0f、0ff——首先出现，因为它们在视觉上是最容易区分的（它们不必完全是 f00、0f0...）。

黑色和白色不应出现在调色板中，因为它们是最常见的背景颜色。或者，应该可以定义例外（以颜色列表的形式，或最小/最大亮度）。

这是我尝试过的：

• 这个 SO 问题的大多数答案- 有些在小调色板（9-12 色）上看起来非常好，但在 30 多种颜色上出现了非常接近的颜色，而许多明显的颜色仍未使用。

  例如，黄金角的答案是天才，但它只使用三个维度之一，大大限制了颜色的多样性。

  我已经尝试将这种方法应用于三维（HSL），但由于三个自旋在逻辑上没有联系，结果相当平庸。

• 谷歌的palette.js——只生成包含单通道颜色的双色渐变和彩虹。随后的每两个颜色都非常接近。

• distinct-colors library - 生成一个暗淡的调色板，主观上颜色彼此太接近并且缺少常见的明亮颜色。
• https://mokole.com/palette.html — 完美的结果，但速度极慢。在速度非常快的 PC 上生成 30 种颜色需要几分钟时间。

接受片段和库推荐。理想情况下，输出应该是十六进制颜色字符串或 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 是的，我知道在大调色板上，颜色不可避免地会重复。我想通过算法确保调色板尽可能多样、对比鲜明。

标签： javascriptcolors