我怎样才能使颜色均匀，使文本在任何给定的色彩和明暗度下都能清晰地看到它们？

Question

经常使用UI的任何人都可能知道，对于给定的颜色hsl(H, 100%, 50%)（语法为CSS），并非所有H值都会产生适合放置在任意黑色或白色文本下的颜色。我要注意的具体事实是，某些颜色（绿色）显得特别亮，而其他颜色（蓝色）显得特别暗。

好吧，我希望用户能够输入一种色相并且使颜色始终以一致的亮度显示，因此可以保证白色或黑色文本之一始终在其顶部可读。我希望所有颜色都能保持最鲜艳的饱和度，因为它们可以限制亮度。

这是到目前为止我尝试过的简单示例。我从使用一堆html div元素呈现的像这样的正方形网格开始。本质上，这些是沿水平轴大约从0到360的色相值，以及沿垂直轴大约从0％到100％的明度值。所有饱和度值均设置为100％。

我使用一个名为chroma.js的JS库库，现在使用color.luminance函数处理所有颜色，该函数的定义似乎是在执行我要寻找的事情。我只是将hsl值的亮度作为参数传递给函数。我不确定这是否是实现我的目标的最佳方法，因为我不熟悉这里使用的所有术语。请注意，我选择使用此库绝不限制我要如何进行此操作。这只是我解决问题的尝试。

现在肯定可以使颜色具有更一致的亮度，但是在橙色到青色区域周围的光谱现在看起来特别生动，在其他地方则特别暗淡。同样，颜色似乎从顶部的黑色迅速下降。

希望这个例子可以帮助表达我在这里想要完成的工作。有谁知道他们最好的解决方法是什么？

Answer 1

我找到了解决方案！签出HSLuv。它平衡了光谱中的所有色相，因此在任何给定的饱和度和亮度下，所有色相都将具有与人眼完全相同的感知亮度。

这解决了我的问题，因为现在我可以将文本颜色设置为白色（例如），然后只要可以在特定的HSLuv亮度下读取文本，就可以保证在使用任何色相和饱和度时都可以读取文本结合轻盈。魔术。