我怎样才能使颜色均匀，以便在任何给定的色调和亮度下都可以阅读文本？
How can I even out colors so text is readable against them at any given hue and lightness?
任何经常使用 UI 的人都可能知道，对于给定的颜色 hsl(H, 100%, 50%)（语法为 CSS），并非所有 H 值都会产生适合任意放置的颜色黑色或白色文本。我注意到的具体事实是某些颜色（绿色）显得特别亮，而其他颜色（蓝色）显得特别暗。
好吧，假设我希望用户能够输入一种色调，并使该颜色始终以一致的亮度显示，以便保证其上方的白色或黑色文本之一始终可读。我希望所有颜色也能在亮度受限的情况下保持最鲜艳的饱和度。
这是我迄今为止所尝试过的一个简单示例。我从像这样使用一堆 html div 元素渲染的正方形网格开始。基本上，这些是沿水平轴大约从 0 到 360 的色调值和沿垂直轴大约从 0% 到 100% 的亮度值。所有饱和度值都设置为100%。
使用名为 chroma.js 的 JS 库库，我现在使用 color.luminance 函数处理所有颜色，其定义似乎是做我正在寻找的。我只是将 hsl 值的亮度作为参数传递给函数。我不确定这是实现我的目标的最佳方式，因为我不熟悉这里使用的所有术语。请注意，我选择使用这个库绝不是我想如何去做的限制。它只是代表我尝试解决问题。
颜色现在当然具有更一致的亮度，但现在光谱在橙色到青色区域周围看起来特别鲜艳，而其他地方特别暗淡。此外，颜色似乎很快就会从顶部的黑色中消失。
希望这个例子有助于表达我在这里想要完成的事情。有谁知道解决此问题的最佳方法是什么？
我找到了解决办法！查看 HSLuv。它平衡了光谱中的所有色调，因此在任何给定的饱和度和亮度下，所有色调都将具有完全相同的人眼感知亮度。
这解决了我的问题，因为现在我可以将文本颜色设置为白色（例如），然后只要文本在一定的 HSLuv 亮度下可读，就可以保证它在任何色调下都可读，并且饱和度与亮度结合使用。魔法.
任何经常使用 UI 的人都可能知道，对于给定的颜色 hsl(H, 100%, 50%)（语法为 CSS），并非所有 H 值都会产生适合任意放置的颜色黑色或白色文本。我注意到的具体事实是某些颜色（绿色）显得特别亮，而其他颜色（蓝色）显得特别暗。
好吧，假设我希望用户能够输入一种色调，并使该颜色始终以一致的亮度显示，以便保证其上方的白色或黑色文本之一始终可读。我希望所有颜色也能在亮度受限的情况下保持最鲜艳的饱和度。
这是我迄今为止所尝试过的一个简单示例。我从像这样使用一堆 html div 元素渲染的正方形网格开始。基本上，这些是沿水平轴大约从 0 到 360 的色调值和沿垂直轴大约从 0% 到 100% 的亮度值。所有饱和度值都设置为100%。
使用名为 chroma.js 的 JS 库库，我现在使用 color.luminance 函数处理所有颜色，其定义似乎是做我正在寻找的。我只是将 hsl 值的亮度作为参数传递给函数。我不确定这是实现我的目标的最佳方式，因为我不熟悉这里使用的所有术语。请注意，我选择使用这个库绝不是我想如何去做的限制。它只是代表我尝试解决问题。
颜色现在当然具有更一致的亮度，但现在光谱在橙色到青色区域周围看起来特别鲜艳，而其他地方特别暗淡。此外，颜色似乎很快就会从顶部的黑色中消失。
希望这个例子有助于表达我在这里想要完成的事情。有谁知道解决此问题的最佳方法是什么？
我找到了解决办法！查看 HSLuv。它平衡了光谱中的所有色调，因此在任何给定的饱和度和亮度下，所有色调都将具有完全相同的人眼感知亮度。
这解决了我的问题，因为现在我可以将文本颜色设置为白色（例如），然后只要文本在一定的 HSLuv 亮度下可读，就可以保证它在任何色调下都可读，并且饱和度与亮度结合使用。魔法.