如何增加从图像生成的颜色之间的对比度？

Question

一些细节：

我正在 Framer 中制作一个小型原型，某种壁纸应用程序。我使用 vibrant.js 自动从图像中挑选颜色，为我的界面添加一点色彩。我使用两种鲜艳的颜色配置文件：“DarkMuted” - 用于背景和“Vibrant” - 用于活动控件/重音等。

不幸的是，颜色组合有时看起来暗淡且不饱和，活跃的元素并没有像我想要的那样突出。 所以我的第一个决定是

盲目编辑颜色。

我将它们转换为hsl 并明确设置s 和l 值。

s: .2, l: .2  #  DarkMuted

s: .6, l: .8  #  Vibrant

这在两者之间创造了足够的对比度，但也有一个缺点：有时颜色看起来有点过度饱和和失真（与输入相比）。

By this link你可以找到成对的屏幕截图来向你展示“vibrant.js”返回的“原始”颜色对与调整 s 和 l 值的颜色之间的区别。

我已经在另一个论坛上asked，如果可以对颜色应用自动调整，以对某些颜色范围的感知偏差进行标准化。答案是“几乎不可能”。

我会说主观上可接受的色彩率约为 65%，但结果太不可预测。由于它是一种自动解决方案，我不能过分依赖。

所以我决定用另一种方式来处理它：

生成一堆颜色并过滤一个

这里的问题是：

我还没有找到如何使用充满活力的js 生成每个配置文件不止一种颜色

另外，我尝试使用 color-thief.js 库来生成主色调色板，然后过滤，我称之为“充满活力”的颜色。

# Threshold values I used 
thr = {minL: .4, maxL: .8, minS: .6, maxS: .8}

但是这里出现了另一个问题 - 并非每个图像都有一组颜色低于我的阈值。有些图像具有柔和的 gamma 或 b/w，并且不返回任何内容。

所以，

• 我能否克服充满活力的.js 限制 每个配置文件 1 种颜色 拥有一堆“充满活力”的颜色，然后选择一个适合我的要求?

• 或者，也许有另一种/更好的解决方案可以做到这一点？

Answer 1

有一个关于颜色之间最小对比度 (WCAG) 的规范，您可以在 here 找到它。因此，一种可能的策略是使用充满活力的 js 提取颜色，然后您可以使用函数检查对比度。你可以找到一个指南来构建一个检查颜色对比度的函数here。最后一步可能是根据颜色对比度函数的结果生成具有良好对比度的颜色变化。您可以使用this lib 生成变体。