我在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％，但结果太难以预测。由于这是一个自动解决方案，我不能过分依赖。
所以我决定采用另一种方式：
这里的问题是：
我还没有找到如何使用vibrant.js生成每个配置文件多个颜色
另外，我已经尝试了 color-thief.js 库来生成主色调色板，然后过滤，我称之为“充满活力”的色彩。
# Threshold values I used
thr = {minL: .4, maxL: .8, minS: .6, maxS: .8}
但是这里出现了另一个问题 - 并非每个图像都有一组低于我的阈值的颜色。有些图像有迷你伽玛或黑白，不返回任何内容。
所以，
我可以克服 每个配置文件1种颜色的dynamic.js限制，以获得一堆“活力”颜色，然后选择一个符合我要求的颜色
或者，或许，还有另一个/更好的解决方案吗？