html - 如何生成不相似的调色板？

Question

我要在地图上画出一堆区域。每个区域应该有不同的颜色，最好是与其他区域明显不同。当然，随着地区数量的增加，我被吓到了。但在那之前，我想知道我在哪里可以找到或者我如何生成一组，比如 15 种“大相径庭”的颜色。

前几个很简单，因为我使用了 Bootstrap 的默认设置：

• 蓝色的
• 黄色的
• 红色的
• 绿色
• 粉色的

但我不禁想知道是否有一种技巧、工具或算法可以生成下一个偏离的颜色。

谷歌搜索为我提供了生成相似模式或颜色的方法，这些模式或颜色可以很好地结合在一起。不过，这不是我要找的。另外，我发现颜色比混合 RGB 更多，所以我觉得自己是一个完全松散的菜鸟。

标签： htmlcsscolors

Answer 1

您确实应该使用hsl360 度来生成分布良好的色谱。要在 typescript/js 中有类似的东西，你可以这样做：

const length = 15;
const colors = Array.from({ length }, (_, i) => `hsl(${360 / length * i}, 50%, 50%)`);  

在这里您可以看到一个工作示例：

堆

结果：