3

一些细节：

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

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

盲目编辑颜色。

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

s: .2, l: .2  #  DarkMuted

s: .6, l: .8  #  Vibrant

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

通过此链接，您可以找到成对的屏幕截图，以向您展示“vibrant.js”返回的“原始”颜色对与调整 s 和 l 值的颜色之间的区别。

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

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

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

生成一堆颜色并过滤一个

这里的问题是：

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

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

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

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

所以，

  • 我能否克服每个配置文件 1 种颜色的活力。

  • 或者，也许还有另一种/更好的解决方案？

4

1 回答 1

1

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

于 2021-01-26T18:20:01.863 回答