我一直在我正在开发的网站上玩一些渐变,我真的对为什么某些颜色看起来比其他颜色更有吸引力的心理学或其他含义感兴趣。
这是现在的网站:
那里的渐变看起来很自然的设计。但是如果我开始混合和匹配,我会得到这样的结果:
我似乎找不到另一个看起来“自然”的像样的渐变。我想知道我们如何看待这些颜色混合背后的心理是什么……是否有某种规则可以找到在渐变中很好地融合在一起的颜色?我想这取决于你想要的感觉。我感谢任何和所有输入!
我一直在我正在开发的网站上玩一些渐变,我真的对为什么某些颜色看起来比其他颜色更有吸引力的心理学或其他含义感兴趣。
这是现在的网站:
那里的渐变看起来很自然的设计。但是如果我开始混合和匹配,我会得到这样的结果:
我似乎找不到另一个看起来“自然”的像样的渐变。我想知道我们如何看待这些颜色混合背后的心理是什么……是否有某种规则可以找到在渐变中很好地融合在一起的颜色?我想这取决于你想要的感觉。我感谢任何和所有输入!
初始示例与您的实验之间的主要区别在于,原始示例几乎没有涵盖色调的剧烈变化。
从金黄色到洋红色/粉红色大约是色轮的 1/6 圈。相比之下,你的实验(橙红色到蓝紫色,蓝紫色到黄绿色,青色到蓝紫色)都超过 1/4 圈。
这么大的变化并不被认为是一种颜色的单一变化,而是一种通过多种颜色的进展。因为您的渐变在您的标题中相当浓缩,所以这是一个非常急剧的变化,并且可以解释为什么它对您来说感觉不“自然”。
如果您想为主要的“目标”色块使用不同的颜色,请选择相邻颜色作为渐变的开始。例如,对于蓝紫色作为终点,选择深蓝色或洋红色作为起点。以黄绿色为终点,以亮绿色或红色开始。
当然,这些仍然会给你不同的“情绪”,具体取决于所涉及颜色的情绪——蓝紫色比原色中的粉红色更冷、更平静。但至少渐变应该看起来更平滑一些。
由于您要问“为什么它们的感知不同”,所以这里有另一个(非常令人讨厌的)要考虑的事情:RGB 颜色的感知发光。这很难应用,所以我的回答几乎就像琐事一样:)
一种颜色的发光值表示您对它的“点亮”程度。如果颜色是灯泡,发光度低的颜色会被视为暗淡(40W 灯泡),而发光度高的颜色会被视为非常亮(100W 灯泡)。
RGB 颜色实际上是使用小“灯泡”显示的。屏幕由微小的“灯泡”组成,每个像素三个:R(ed)、G(reen) 和 B(lue)。一种颜色的特定 R、G 和 B 值表示每个小灯泡应该被点亮的亮度以产生该颜色的错觉。例如,橙色 RGB(255, 100, 0) 是通过将红色灯泡调至其最大效力 (255)、使绿色灯泡半暗 (100) 并关闭蓝色灯泡 (0) 来创建的。
这是一个插图,显示了一些颜色以及每个 RGB 组件应该如何“明亮”以产生颜色的错觉。每种颜色下的小圆点表示组件的暗淡或明亮程度。
正如您在插图中看到的那样,例如,要创建白色,您可以将 3 个分量调到最大值 (255)。这 3 个小“灯泡”的组合被眼睛感知为白色(解释为什么会是一个很大的题外话)。要创建黑色,请将它们全部关闭。这很简单:没有光就没有颜色。
每种颜色的发光度是通过将 3 个组件中的每个组件的“亮度”相加来计算的。白色将是具有最高发光度的颜色,因为这 3 个分量已变为最大值。黑色,将是最低的那个。黄色比绿色具有最高的发光度,因为要制作黄色,您最多需要 2 个组件,但要制作绿色,您只需要一个。所以,或多或少你可以这么说
L = R + G + B
虽然它有点复杂。通过查看插图,您会注意到绿色分量似乎更亮。事实上,它被眼睛认为是最亮的。另一方面,蓝色被认为非常暗淡。计算发光的确切公式考虑了这一点。
L = 0.2126 R + 0.7152 G + 0.0722 B
这又是插图,每种颜色的发光计算。
您会注意到,正如您的眼睛可能告诉您的那样,黄色比橙色更亮,但橙色或多或少与洋红色一样亮。
现在,我从你的两个原始调色板中提取了颜色并计算了它们的发光度。
在您喜欢的第一种情况下,您会注意到底部的第一种颜色的发光度(125)低于顶部的第二种颜色的发光度(200)。然后,渐变被认为是亮度的增加,就好像它会发光一样。
在第二种情况下,没有太大区别,因此渐变被视为色调的变化。
在第三种情况下,底部颜色比顶部颜色具有更高的发光度,因此渐变被视为亮度降低,就好像它会变暗一样。
这可以解释为什么即使您选择了 2 种色调,它们在色轮上的距离与您喜欢的色调相同,但结果会有所不同。
只需添加到 AmeliaBR 的答案(应该是评论,但我想发布图片)。尝试“移动”色调但保持起始颜色和结束颜色之间的相对距离相同的一种方法可能是使用 Photoshop 的色调工具。
拍摄第一张图像(带有您喜欢的渐变的图像)并在 Photoshop 中打开它。然后打开色相/饱和度工具(Image->Adjustment->Hue Saturation
或Ctr+U
)并使用第一个滑块(色相)进行播放。这将改变整个图像的色调,但在所有现有色调之间保持相同的关系(特别是渐变的开始和结束色调)。由于界面的背面是黑色(或中性灰色),因此色调的变化不会影响它。
如果您找到您喜欢的组合,则只需接受色相/饱和度更改(单击OK
)并使用吸管工具(按I
)选择渐变的开始和结束颜色。
在这个例子中,我已经将色调 -155 和渐变现在从(最流行的)海蓝宝石绿色变为蓝色,这是一种凉爽、平静的渐变,带有航海的回声。
请注意,颜色感知具有非常个人化的成分。对于其他人来说,您可能认为“自然”的东西可能会被视为异常。
来自http://www.colormatters.com/color-and-design/basic-color-theory
1 - 基于类似颜色的配色方案
类似颜色是在 12 部分色轮上并排的任意三种颜色,例如黄绿色、黄色和黄橙色。通常三种颜色中的一种占主导地位。
2 - 基于互补色的配色方案
补色是指任何两种直接相对的颜色,如红绿、红紫、黄绿。在上图中,叶子中有几种黄绿色变体,兰花中有几种红紫色变体。这些相反的颜色产生最大的对比度和最大的稳定性。
3 - 基于自然的配色方案
大自然为色彩和谐提供了完美的出发点。在上图中,红色黄色和绿色营造出和谐的设计,无论这种组合是否符合色彩和谐的技术公式。