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

Question

一些细节：

我正在使用Framer制作一个小型原型，类似壁纸应用。我使用vibrant.js从图像中自动选择颜色，以为界面添加一点调色效果。我使用两种vibrant颜色配置文件："DarkMuted" - 用于背景和"Vibrant" - 用于活动控件/重点等。

不幸的是，有时颜色组合看起来暗淡和褪色，并且活动元素不像我想象中那样突出。因此，我的第一个决定是

盲目编辑颜色。

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

s: .2, l: .2  #  DarkMuted

s: .6, l: .8  #  Vibrant

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

通过此链接，您可以找到一些屏幕截图对比展示“vibrant.js”返回的“原始”颜色对和调整了s和l值的颜色之间的差异。

我已经在另一个论坛上询问过是否可能对颜色应用自动调整，以使某些颜色范围的感知偏差得到规范化。答案是“几乎不可能”。

我认为主观上可接受的颜色比率约为65％，但结果太不可预测。由于这是一种自动解决方案，我不能太依赖它。

因此，我决定采用另一种方法：

生成一堆颜色并筛选一个

问题在于：

我还没有找到如何使用vibrant.js生成每个配置文件的多个颜色

此外，我尝试了color-thief.js库来生成一组主导颜色并过滤出我所说的“充满活力”的颜色。

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

但是这里会出现另一个问题-不是每张图片都有一组颜色符合我的阈值。一些图像具有粉彩色或黑白效果，并且没有返回任何内容。

那么，

• 我可以 克服 vibrant.js 的 1个配置对应一种颜色的限制 ，来获得一堆“动人”的颜色，然后选择适合我需求的颜色吗？

• 或者，也许存在 另一个/更好的解决方案 吗？

- Anton Kosarchyn

---

你找到解决方案了吗？ - Crashalot

Answer 1

有一个关于颜色之间最小对比度的规范（WCAG），您可以在这里找到它。因此，可能的策略是使用vibrant.js提取颜色，然后您可以使用函数检查对比度。您可以在这里找到构建检查颜色对比度函数的指南。最后一步可能是根据颜色对比度函数的结果生成具有良好对比度的颜色变化。您可以使用这个库生成变化。

- Fábio Alencar