# 很难制作一个好的调色板 **URL:** \ **Category:** UX\ **Created:** [2023年一月30日 08:26 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284 "2023-01-30T08:26:04Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)\ **Post date:** [2023年一月30日 08:26 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284/1 "2023-01-30T08:26:04Z")
前几天，我花了一个多小时的时间来创建一个看起来不错的配色方案。 第一个痛点是，确切地说，一级到四级控件有点模糊。 ![Screenshot_20230130_025333](https://global.discourse-cdn.com/meta/original/4X/a/3/3/a33aafa8a192561e6be8cfd61e31a0bdb1db5d7f.jpeg) 我知道文本只能解释这么多，但在实践中，唯一真正了解颜色会如何变化的方法是每次都进行硬刷新。这也很耗时。 第二个痛点是，单个“primary”和“secondary”颜色会秘密地计算出一系列其他颜色，这些颜色被用作 --primary-low 和 --primary high 等。我注意到，使用像 #2b2b2b 这样的颜色会产生与具有更多蓝色的相似的深色非常不同的结果，因为生成的调色板最终会非常不同。每次我尝试一种新颜色时，感觉就像是凭空猜测，因为最终结果是不可预测的。我欣赏基本上由三个变量控制整个调色板的简洁性，但结果最终感觉非常随机。 最后，我在对比度方面遇到了很多问题。我发现，在我选择的颜色中，文本与背景的对比度、水平规则与背景的对比度以及回复/编辑按钮与背景的对比度之间存在权衡。例如，增加文本的对比度会使规则难以看到，反之亦然。 我并不是真的要求在这里做什么。我想解决方案可能是增加调色板的大小以提供更大的灵活性。但我明白保持简洁的好处。某种实时预览会有帮助，但我也明白这是一个低优先级的请求。 我只是想记录我的经历。最终，我能够创建一个调色板，但对其并不完全满意。好奇其他人是否面临类似的挑战，或者问题是否出在我身上？欢迎提供建议。 ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2023年一月30日 14:46 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284/2 "2023-01-30T14:46:44Z")
> [@piffy](#): > > 我猜想一个解决方案是增加调色板的大小以提供更大的灵活性。但我理解保持简单的优点。 是的，最初的意图是让管理员仪表板选项成为一种简化的颜色设置方式，基本上是“简单模式”。我同意这很有限，而且某些颜色组合的对比度并不理想。 好消息是，远程主题可以覆盖所有自动生成的颜色，请参阅 [Override values for auto-generated color variables](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374) 我们最近也一直在仔细研究我们的颜色工作原理，希望能让管理员和用户更容易地处理配色方案和浅色/深色模式，所以希望我们能做出一些有用的改进。 ---
**Author:** ![hiddenseal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hiddenseal/32/284273_2.png) [@hiddenseal](https://meta.discourse.org/u/hiddenseal)\ **Post date:** [2023年一月30日 16:21 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284/3 "2023-01-30T16:21:45Z")
不影响你的技术观点，但也许你会觉得这个有用？ > **[Coolors - The super fast color palettes generator!](https://coolors.co)** > > Generate or browse beautiful color combinations for your designs. > **[Material Design Palette Generator](https://materialpalettes.com)** > > Get perfect Material Design color palettes from any hex color. ---
**Author:** ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)\ **Post date:** [2023年一月30日 16:25 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284/4 "2023-01-30T16:25:02Z")
> [@awesomerobot](#): > > 好消息是，远程主题可以覆盖所有自动生成的颜色，请参阅[覆盖自动生成颜色变量的值](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374) 我不知道这是可能的，这可能是我将不得不接受的解决方案 🙂 ---
**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\ **Post date:** [2023年一月30日 17:00 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284/5 "2023-01-30T17:00:00Z")
创建一个调色板，从高对比度调色板（WCAG）开始，提供更多颜色字段，会有帮助吗？ ![image](https://global.discourse-cdn.com/meta/original/4X/e/c/7/ec72d5f0d273495d08ddcab4845cae3afac66220.png) 我不知道WCAG调色板是否具有可能不希望的、自动生成的不同颜色计算。 ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2023年一月30日 17:34 UTC](https://meta.discourse.org/t/it-is-hard-to-make-a-good-palette/253284/6 "2023-01-30T17:34:50Z")
> [@Canapin](#): > > 我不知道 WCAG 调色板是否具有可能不希望的、不同的自动生成颜色计算。 是的，它们附带了一些额外的 CSS ([discourse/app/assets/stylesheets/wcag.scss at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/wcag.scss))，因此可能有一些不希望的添加。