如何生成不相似的调色板？答案

【问题标题】：How to generate un-similar color palettes?如何生成不相似的调色板？
【发布时间】：2020-02-01 22:12:12
【问题描述】：

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

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

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

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

【问题讨论】：

如何在色调光谱上拍摄均匀分布的颜色？在 css 中，可以使用 hsl() 定义颜色，其中 h 是以度为单位的色调。
伪代码：h=0; color="hsl("+h+", 70%, 70%)"; h+=56; h%=360;
@Sheraff 这对我的小问题来说确实很棒。还有——你的名字是从长颈动物那里继承来的吗？听起来很……
2@RokoC.Buljan Yupp，太好了。现在，我需要弄清楚如何在 TypeScript 中生成它以创建一个阴影数组。你和 Sheraff 的都很有帮助。

【解决方案1】：

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

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

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

结果：

【讨论】：

这是一个很好的提示。我上床睡觉，打算在早上深入研究细节。然后——多田！你的答案随之而来。这是完全令人满意的，并且符合我的需要。不过，我注意到的一件事是，当我提供基于 HSL 的值时，地图被不透明的颜色覆盖（而以前在我发送 hexa-RGB 时它具有一定程度的透明度）。我从来没有为 RGB 指定任何透明度，也没有假设地图在每种情况下都会为我转换它。但是，似乎当我使用 HSL 进行样式设置时，透明度被消除了。提示？
@KonradViltersten 如果你想要透明度，你可以使用hsla，其中 a 是 alpha。所以hsla(${360 / length * i}, 50%, 50%, 0.5) 让它半透明。关于 hexa-rgb。如果你有 6 个字符（#F0F0F0），则没有透明度，如果你有 8 个字符（#F0F0F0F0），最后两个定义透明度
这不是打字稿。
@Sheraff 不是吗？该死，那我应该重新考虑我的职业生涯了:)
我只是说，这是香草JS。没有理由专门说它是打字稿。我已经习惯了看到新开发人员不了解 jquery 和 js 之间的关系。我认为我们现在不应该对 typescript 造成同样的混淆。