有没有建立绿-黄-红配色方案的好方法?

平面设计 颜色理论 用户体验
2022-01-19 04:26:11

基本色彩理论告诉我们,绿色、黄色和红色的调色板丑得可笑,它们是相互冲突的颜色。如果我们以绿色为主要颜色,与之相近的颜色是红色和蓝色——在这样的配色方案中,黄色是没有空间的。

那么,有什么方法可以在不使用户眼花缭乱的情况下将绿色、黄色和红色组合在一个配色方案中呢?

作为我的示例,我在网站上有一个页面,其中这些颜色用于根据给定用户的实际技能水平来衡量项目所需的技能水平。绿色满足或超过这个水平,黄色表示期望略有下降,红色表示他们要么不够好,要么完全缺乏给定的技能。

这是我的示例(忽略字母周围的橙色和灰色字段,它们是不相关的)。

截屏

我们都可以肯定地同意这看起来很糟糕,但我需要坚持这种格式,整个绿色-红色-黄色的东西。:/

作为一名程序员,与图形/网页设计师相反,我对色彩理论和用户体验的理解是有限的。

为了说明这一点,我的问题是如何在不影响用户体验的情况下建立传统的冲突配色方案?

(如果我的问题不合适,我会删除它,我不知道在哪里问这个,这似乎是最合适的)

4个回答

绿黄红不能搭配?埃塞俄比亚人必须受到极大的侮辱。谷歌搜索绿色、黄色和红色图像,我想你会找到几个有吸引力的例子(以及丑陋的例子)。

任何一组颜色组合的好坏取决于确切的颜色坐标、相对位置、形状、颜色对象的大小以及您想要的效果(例如,平静与激动、有趣与严肃、大胆与微妙)。我对你没有任何硬性规定,但这里有一些东西可以试验。

尺寸饱和度权衡

为避免不和谐的效果(假设您不希望这样),彩色对象的大小应与其颜色饱和度成反比。您的示例具有相当高的饱和度,因此请尝试使用较低的颜色饱和度(例如,粉彩)或为背景以外的其他颜色着色。例如,您可以为文本着色并让背景保持中性,或者您可以为文本旁边的小形状或符号着色。后者将提供一个机会,可以使用形状对技能匹配进行冗余编码,以实现可访问性和黑白打印目的(绿色复选标记表示满意,黄色感叹号表示不足,红色“请勿输入”符号表示不够好) .

间距

颜色的外观取决于它们彼此的接近程度。相邻的颜色比冲突时看起来还好,只有一个小的分离。尝试在每个单元格周围放置一个中性边框以更多地分隔颜色(就像您在标题中那样),除非相同颜色的单元格混合在一起以被视为单个对象有某种意义。尝试不同的厚度。尝试用白色边框分隔每个单元格,以获得平铺外观。

图案

颜色搭配的好坏也会随着颜色的图案而变化,因此请确保您正在评估具有典型比例和颜色位置的模型。例如,如果大部分时间一切都是绿色的,并且最重要的是让用户注意黄色和红色的“亮点”,那么选择一个能够构成良好背景的绿色(例如,低饱和度、浅色),而黄色和红色红色似乎位于“顶部”(例如,饱和度较高、较暗)。考虑到图案的美感也可以传达和激励用户。如果用户有一套特别不合适或不平衡的技能,也许你想要一个丑陋的模式。最吸引人的模式应该对应于对用户最有利的状态。

可用性

您的问题涉及美学,但颜色编码选择也具有重大的可用性影响。您的颜色选择应该是:

  • 视觉上彼此不同,尤其是在视觉退化的条件下使用时(例如,在阳光下的移动设备上)。

  • 提供与背景(如果是前景)或前景(如果是背景)的良好对比。例如,红底黑字就不是那么好。通常,前景和背景需要不同级别的亮度。

  • 确保颜色排名与他们编码的一致。例如,用户应该注意的事情需要与背景和其他颜色形成更多对比。

  • 提供可访问性和可印刷性,其中每种颜色也具有不同程度的暗度,暗度按等级排列(红色多于黄色多于绿色)。让你的绿色有点蓝和/或你的红色有点橙色,这样红绿色盲用户(最常见的色盲)仍然可以看到颜色差异。

  • 仅对一个变量使用颜色编码。我不知道您使用灰色和橙色来做什么,但这可能会引起混淆,并使用户更难使用红色绿色和黄色。任何时候你有超过三种颜色,就很难保持可用。找到另一种编码灰色和橙色代码的方法(例如,使用字体大小或粗细,或使用虚线作为单元格边框;请参阅将 G 放入 GUI 中)。

在我参与的一个项目中,我使用的颜色是#E00000、#FF8400 和#C0FFE0(不是很黄的黄色,但它仍然有效)。

深红色、橙色、淡蓝绿色

我有更多关于选择颜色代码的内容,包括如何在Breaking the Color Code中计算颜色和亮度对比度。

尝试使用粉彩而不是实际的 RGY 颜色。随着饱和度的降低,应该更容易查看信息。

柔和的红色十六进制:#F7977A RGB:246-150-121

柔和的绿色十六进制:#82CA9D RGB:130-202-156

淡黄色十六进制:#FFF79A RGB:255-247-153

我看到这三种颜色的三个主要挑战。

  • 红色和绿色具有良好的亮度水平,可用于文本,黄色则不然。
  • 黄色作为背景色具有很好的亮度,可以将绿色调亮,但红色会变成粉红色。
  • 去饱和绿色和红色效果很好,但黄色变得浑浊。

我只能想到几个选项,假设您不喜欢大面积饱和色彩的波普艺术效果。这两者都通过淡化颜色来最小化饱和度的影响。

  • 在单元格背景中使用渐变。
  • 将颜色应用为文本阴影。阴影需要相当多的模糊才能明显突出文本。

这里还有另一个与美学无关的挑战。红色将压倒其他两种颜色,并导致人们注意到页面上的负面标记。如果这是你的目标,那你很好。如果你希望你的图表具有积极的性质,你会很挣扎。

“红色”、“黄色”、“绿色”留下了很大的解释空间,所以你有很好的机会找到一个很好的组合。

对于您的美学问题,我将您的“红色”和“绿色”颜色放入颜色混合器中。然后我选择 pHSL 作为混合的颜色模型。这已经改进了颜色集。

接下来我尝试了不同的“红色”和“绿色”来进一步改善印象。有点暗,更饱和/更强的红色。带有更多黄色的绿色,加上更高的饱和度。

好的,还不错,但还没有准备好。

对于您的可用性问题,请记住(相对)亮度、色调和饱和度的层次结构来引导我们的注意力。由于黄色自然具有最高的亮度值,因此这些领域最能吸引我们的注意力。所以我将颜色导入颜色转换器以单独调整每种颜色。在我的示例中,我给出了“黄色”和“绿色”相等的亮度值。黄色的较低亮度或绿色的较高亮度似乎在美学上存在问题。

我在 Photoshop 中尝试了我的组合,并意识到白色(间距)边框给人留下了很好的印象。因此,我建议单元格使用白色间距,并且最多使用一条细黑线来划分每行条目。

通过使用上述工具,您可能会找到更符合您个人品味或要求的颜色组合(例如,绿色的饱和度更高)...