很难制作一个好的调色板

前几天,我花了一个多小时的时间来创建一个看起来不错的配色方案。

第一个痛点是,确切地说,一级到四级控件有点模糊。

我知道文本只能解释这么多,但在实践中,唯一真正了解颜色会如何变化的方法是每次都进行硬刷新。这也很耗时。

第二个痛点是,单个“primary”和“secondary”颜色会秘密地计算出一系列其他颜色,这些颜色被用作 --primary-low 和 --primary high 等。我注意到,使用像 #2b2b2b 这样的颜色会产生与具有更多蓝色的相似的深色非常不同的结果,因为生成的调色板最终会非常不同。每次我尝试一种新颜色时,感觉就像是凭空猜测,因为最终结果是不可预测的。我欣赏基本上由三个变量控制整个调色板的简洁性,但结果最终感觉非常随机。

最后,我在对比度方面遇到了很多问题。我发现,在我选择的颜色中,文本与背景的对比度、水平规则与背景的对比度以及回复/编辑按钮与背景的对比度之间存在权衡。例如,增加文本的对比度会使规则难以看到,反之亦然。

我并不是真的要求在这里做什么。我想解决方案可能是增加调色板的大小以提供更大的灵活性。但我明白保持简洁的好处。某种实时预览会有帮助,但我也明白这是一个低优先级的请求。

我只是想记录我的经历。最终,我能够创建一个调色板,但对其并不完全满意。好奇其他人是否面临类似的挑战,或者问题是否出在我身上?欢迎提供建议。

2 个赞

是的,最初的意图是让管理员仪表板选项成为一种简化的颜色设置方式,基本上是“简单模式”。我同意这很有限,而且某些颜色组合的对比度并不理想。

好消息是,远程主题可以覆盖所有自动生成的颜色,请参阅 Override values for auto-generated color variables

我们最近也一直在仔细研究我们的颜色工作原理,希望能让管理员和用户更容易地处理配色方案和浅色/深色模式,所以希望我们能做出一些有用的改进。

7 个赞

不影响你的技术观点,但也许你会觉得这个有用?

2 个赞

我不知道这是可能的,这可能是我将不得不接受的解决方案 :slight_smile:

1 个赞

创建一个调色板,从高对比度调色板(WCAG)开始,提供更多颜色字段,会有帮助吗?

我不知道WCAG调色板是否具有可能不希望的、自动生成的不同颜色计算。

1 个赞

是的,它们附带了一些额外的 CSS (discourse/app/assets/stylesheets/wcag.scss at main · discourse/discourse · GitHub),因此可能有一些不希望的添加。

1 个赞