Colors 如何平衡颜色，使文本在任何给定的色调和亮度下都能根据颜色进行阅读？

任何经常使用UI的人都可能知道，对于给定的颜色

hsl（H，100%，50%）

（语法为CSS），并非所有的H值都会产生适合放置在任意黑白文本下的颜色。我注意到的具体事实是，某些颜色（绿色）显得特别明亮，而其他颜色（蓝色）显得特别暗

好吧，假设我希望用户能够输入颜色色调，并使颜色始终以一致的亮度显示，以便保证白色或黑色文本中的一个始终在其顶部可读。我希望所有的颜色也能保持最生动的饱和度水平，他们可以给亮度的限制

这里有一个我到目前为止尝试过的快速示例。我首先使用一组html

div

元素呈现一个这样的正方形网格。基本上，这些是沿水平轴大致从0到360的色调值，以及沿垂直轴大致从0%到100%的明度值。所有饱和值均设置为100%

现在，我使用一个名为的JS库，使用

color.luminance

函数处理所有颜色，该函数的定义似乎就是我想要的。我刚刚将hsl值的亮度作为参数传递给函数。我不确定这是否是实现我目标的最佳方式，因为我不熟悉这里的所有术语。请注意，我选择使用这个库并不是限制我如何使用它。它只是代表我试图解决这个问题

当然，这些颜色现在有了更一致的亮度，但光谱现在似乎在橙色到青色区域特别生动，在其他地方特别暗淡。此外，顶部的颜色似乎很快就从黑色消失了

---

希望这个例子有助于表达我在这里要实现的目标。有人知道他们最好的解决办法是什么吗？

我找到了解决办法！退房它平衡了光谱中的所有色调，以便在任何给定的饱和度和亮度下，所有色调对人眼都具有完全相同的感知亮度

---

这就解决了我的问题，因为现在我可以将我的文本颜色设置为白色（例如），然后只要文本在特定HSLuv亮度下可读，就可以保证它在与该亮度组合使用的任何色调和饱和度下都可读。魔法。

你能展示一下你用来生成这两幅图像的代码吗？您的目标是为给定色调（以及HSL中的最大“S”）找到一种颜色，使颜色既不“太亮”也不“太暗”，但在白色文本或黑色文本或两者上都可读吗？这涉及到两个分数：颜色的“L”（HSL）接近0.5，颜色为白色或黑色，以较高者为准。然后，解决方案可能是找到使这两个分数最大化的“L”。