作为整天充满我们眼睛的东西，色彩在日常生活中非常重要，尤其是在设计中。当一个人看一个设计时，颜色可能是第一个吸引他们眼球的东西，其次是形状和文字。在视频编辑（后期制作）领域，甚至有一个叫做“调色师”的角色，他的工作徘徊在色彩校正和调色上。

在设计中，颜色有助于

确保内容与品牌标识产生共鸣：这包括根据业务需求创建非常具体的外观。

唤起观众的某种情绪或情绪：想想美食应用程序上的那些暖色在订购披萨时给你的感觉，或者当夜王走进《权力的游戏》中的场景时，冷的深蓝色调如何帮助营造气氛。

不使用文本进行交流：如果红色或绿色等彩色指示器可以完成这项工作并且更用户友好，为什么要使用不必要的文本并使应用程序混乱？

每种颜色都有一定的情感、内涵、想法或与之相关的对象（稍后会详细介绍颜色关联），颜色的选择取决于你想传达什么以及你想传达给谁。设计师工作的一个重要部分是选择正确的颜色，或者准确地说是颜色组合，用于内容（它可以是学校功能的传单或数百万美元公司的网站）。

那么我们如何知道哪些颜色可以很好地搭配呢？

这就是色彩理论的用武之地，它是科学与艺术的复杂结合。但首先，我们应该了解不同类型的颜色——还记得学校的主要和次要颜色吗？

颜色种类

原色是不是通过混合其他颜色来构成的颜色。将它们视为独立的独立颜色，以及所有其他颜色的起点 - 这意味着可以通过以不同的比例混合这些颜色来创建所有其他颜色。这些颜色是红色（R），黄色（Y）和蓝色（B）。

出于数字和在线目的，红-绿-蓝（RGB）通常被视为原色，因为所有颜色都在电子传感器和数字显示器上以红色，绿色和蓝色的组合混合和渲染。在这种格式中，原色（R-G-B）组合成纯白色。

次要颜色更进一步，通过组合两种原色获得。您可能还记得，红色和黄色一起构成橙色;黄色和蓝色使绿色;红色和蓝色使紫罗兰色。在 RGB 格式中，红色和绿色表示黄色，绿色和蓝色表示青色，蓝色和红色表示洋红色。

第三色与次要颜色相距更远，是通过结合主要和次要颜色来实现的。例如，红色和橙色组合形成红橙色，黄色和绿色形成黄绿色。

这个序列可以无限期地持续下去，在每一步迭代地组合颜色，形成数百万种新的颜色——每种颜色都是独一无二的，略有不同。为了便于说明，主要颜色可以用一个简单的色轮的形式表示（见下文 - 颜色标记为P，S和T）。原色占据车轮的三个等距扇区，并在两者之间反复添加其他颜色。

色温

另一个经常使用且我们大多数人可能已经熟悉的术语是暖色和冷色。较暖的颜色往往在橙色的一端（红-橙-黄-棕色等），而较冷的颜色在蓝色的一端（蓝-绿-水-青-紫色等）。在下面的色轮中，一条线将两者分开。

如果您曾经使用Lightroom进行照片编辑，您会注意到温度滑块 - 当您增加温度并使其变暖时，图像采用橙色色调，而相反的图像则提供更冷的蓝色色调。

随着色温的变化，相同的图像唤起了不同的情感。暖色（顶部）和冷色（底部）。

随着色温的变化，相同的图像唤起了不同的情感。暖（上）和冷（下）。

暖色通常与太阳/夏天、日光、温暖、生活有关，通常描绘快乐或愉快的心情，而冷色则相反：冬天、夜晚、寒冷、死亡/腐烂以及悲伤或阴郁的情绪（这不是一成不变的，很大程度上取决于所讨论的背景）。暖色和冷色在电影电影中经常出现，其中颜色分级和温度为场景赋予情绪，并在观众中唤起所需的情感。

标准 RGB 色轮

典型的 RGB 色轮

色轮可以是 RYB 类型（通常由艺术家使用）或 RGB 类型（与在线设计师更相关）

在我们继续前进之前，我们必须了解一些与颜色密切相关的其他术语，这些术语将帮助我们理解占据我们的世界和屏幕的更精细颜色的无限变化。这些是：

色调：“色调”这个词可以与颜色互换使用，这是正确的——它只是颜色的另一个词。有两个值得注意的例外——白色和黑色。这些被称为消色差颜色（没有色调的颜色）。

饱和度：这捕获色调的强度，并确定其鲜艳度或微妙程度，范围从一端的完全饱和度到另一端的灰色（饱和度为 0）。考虑在手机上编辑图像，以及当我们增加一种或多种颜色的饱和度时外观如何变化。当我们将饱和度降低到 0 时，只剩下黑色、白色和灰色。

值或亮度：这决定了颜色的暗度或亮度。想想浅红色与深红色。在最极端，颜色将变为最暗（最小值）或最亮（最大值），而中间色介于两者之间。

色调：通过在基色调中添加黑色来获得阴影，使其更暗、外观更强烈。最大值将是纯黑色。

色调：通过在基色调中添加白色来获得色调，使其更轻、外观更微妙。正如预期的那样，最大值将是纯白色。

色调：通过在基色调中添加灰色（黑色和白色的特定比例）来获得色调，使颜色在外观上逐渐变暗。色调介于色调和色调之间。

看看下面的红色框，取自Adobe Photoshop中的颜色选择器。如果从左向右水平移动，饱和度正在增加，从较暗的，几乎不饱和的红色变为更鲜艳的红色。如果沿框垂直向下移动，该值将从较亮的红色增加到较深的红色。

色彩|的饱和度和值工具：Photoshop

色彩|的饱和度和值工具：Photoshop

饱和度和值的不同组合会产生不同的红色阴影、色调和色调。在更艺术/自然的意义上说同样的事情的另一种方式（想象一下实际上在调色板上混合油漆而不是在数字软件上调整滑块）是将不同数量的黑色、白色和灰色与基色调混合会产生不同的阴影、色调和色调，如下图所示。

色彩理论：色调、色调和色调

色调、色调和色调

颜色协会

每种颜色都有一定的情感、内涵、想法或与之相关的物体，这在很大程度上取决于人类如何与我们在自然界中看到的颜色相互作用。虽然颜色关联本质上是主观的，并且因上下文而异，但通常适用的一些广泛关联如下

黄色 - 可能是远处最明显的颜色（因此经常用于安全标志），黄色是吸引观众注意力的最佳颜色，非常有活力。想想阳光和向日葵。它通常与快乐/乐观/嬉戏/幸福/丰富/注意力/食物有关。

红色：红色是一种刺激、令人兴奋的颜色，很容易吸引你的注意力，通常与爱/激情/活力/能量/强度/危险/愤怒有关。

绿色 - 自然/环境/更新和增长/金钱/新鲜和食品/伊斯兰教（宗教）/继续或安全（因此项目经理在没有问题时将项目状态报告为绿色）。

蓝色 - 皇室/军事/自然（天空和海洋）/商业（信任和专业）/稳定与平静/男性（性别）。您经常会注意到银行、保险提供商和共同基金在他们的品牌中使用蓝色，而工作的专业人士在他们的演示文稿中使用了很多蓝色模板——蓝色灌输信心并支持严肃的氛围。

紫色 — 皇室与贵族 / 奢华与财富 / 高级

黑色 - 可能是最通用的颜色之一，光谱中最深的颜色通常与广泛的主题有关，例如邪恶/黑暗/悲伤/严肃/高级/优雅。它的多功能性是黑色用于最高级信用卡以及葬礼服装的原因。

一般来说，明亮的色彩赋予一种有趣或现代的氛围，而低饱和/暗淡的颜色则赋予更正式和商务的外观和感觉。要更详细地了解颜色、它们的历史、关联和含义，请查看Canva的这个详细资源。

现在我们了解了不同类型的颜色，是时候开始了......

颜色组合

任何视觉内容，无论是插图还是动画，通常都会使用 2 种或更多颜色。想象一下文本、图标、前景元素和背景。并非每种颜色都与其他颜色搭配;和看起来不错的颜色一起形成所谓的色彩和谐或配色方案。颜色组合必须确保设计在视觉上令人愉悦，具有足够的对比度，连贯且易于眼睛使用（没有人喜欢眼睛疼痛！），并且清晰易读。

不能很好地搭配的颜色（见下文）是严格的不！

难以辨认且分散注意力的颜色组合。请注意红色背景上的振动绿色文本以及顶部文本与背景之间的对比度不足，导致可读性差。

我想出的惊人颜色组合！请注意文本的可读性差。

要享受更多地狱般的组合，请访问此页面。

别担心，有一些久经考验的方法可以达到合适的颜色组合，我们设计师需要做的就是正确理解和应用它们。从广义上讲，有 6 种类型的配色方案。请记住，这些只是指导点，您可以使用相同的原则来获得自己的变化。

单色：可能是最简单的，这种配色方案使用单一颜色。由于只有一种颜色，我们不能添加其他颜色，因此唯一可能的变化是通过更改饱和度和值 - 以获得相同颜色的各种阴影（深色），色调（灯光）和色调（中音）。

在使用单色方案时，可以保证良好的匹配，因为我们使用相同颜色的细微变化来产生相对轻松且对比度较低的视觉外观。一个简单的例子是动物星球标志（见下文），它使用相同颜色的多种变体：绿色。

类似：这种配色方案使用2-4种颜色，这些颜色在色轮上彼此相邻，如红色和橙色，蓝色和绿色等。这确保了它们的外观接近。类似的配色方案通常具有较低的对比度（想想黄色和绿色与黄色和紫色之间的对比），并且在自然界中大量存在。结合了黄色和绿色的地铁标志就是这个方案的一个很好的例子。

互补：互补色在色轮上彼此相对，这导致非常高的对比度和大胆的外观。举个例子，看看上面色轮上的橙色和蓝色——它们在相反的两端。FedEx和Firefox都在其品牌中使用这两种颜色，效果很好，而Mountain Dew和Krispy Kreme在其徽标中使用红色和绿色（另一种互补组合）。

互补方案在视觉上可能很有趣，但由于两种颜色完全不同，因此它们总是存在相互压倒的风险。如果您不想要过于简单或对比鲜明的外观，您可以随时使用不同的色调和色调来获得更微妙的外观。

拆分互补：此配色方案使用 3 种颜色 - 一种基色和位于其互补色两侧的 2 种颜色。例如，如果红色是您的原色，而不是使用绿色（补充红色），您可以选择蓝绿色和黄绿色，它们可以在色轮上绿色的两侧找到。正如预期的那样，与互补方案相比，这将产生略低的对比度，但更重要的是，它为您提供了更多颜色可供选择，并且可能获得更有趣的结果。我能想到的一个很好的例子是潮汐的标志，它使用橙色、黄色和蓝色色调的变化。

三元组：该方案使用3种颜色，这些颜色在色轮上均匀分布（从而形成等边三角形）。还记得原色 R、Y 和 B 也是均匀分布的吗？由于三元色在轮子上彼此相距甚远，因此外观对眼睛来说可能不是很容易，尤其是主要和次要颜色（想象一下同一图像中的橙色、绿色和紫色）。因此，需要付出更大的努力和理解才能正确应用此方案而不会引起眼睛疼痛。超人的标志，使用红色，黄色和蓝色，浮现在脑海中。

四元或双互补：顾名思义，该方案使用4种互补对的颜色（因此在车轮上形成一个矩形 - 见下文）。与互补方案相同，双互补方案具有高对比度。这可能最好应用于允许一种颜色占主导地位，而其他颜色作为补充颜色，有助于补充和对比原色。Ebay的标志使用四分配色方案。

色彩理论：一些知名品牌和标志及其配色方案的应用 - 动物星球（单色），地铁（类似），Krispy Kreme（互补），潮汐（分裂互补），超人标志（Triadic）和Ebay（四分）

一些知名品牌及其配色方案的应用

请理解，色轮仅供我们理解，在设计中可以使用的数百万种可能的颜色中仅显示12种。在现实世界中，设计师以配色方案为指导和灵感，并且总是会引入微妙的变化，使他们的设计独一无二。

如何在实践中使用调色板？

在实践中，我们会为我们的设计选择一个基色，然后选择一个调色板来配合它。有多个在线资源，您可以在其中找到无数的调色板（也可以生成自己的调色板）。

我通常使用和推荐的一个资源是Adobe的色轮和主题。在这里，您可以

选择要使用的宽泛配色方案或颜色协调规则

使用滑块和圆形控件创建几乎无穷无尽的颜色组合，根据需要更改色调和饱和度。每种颜色都由十六进制代码 （#RRGGBB） 表示，介于黑色 （#000000） 和白色 （#FFFFFF） 之间，并且在任何数字编辑软件中选择颜色时都可以直接使用这些代码。

将您的颜色主题保存在库中以供将来使用和参考。您可以导出主题，也可以根据需要创建新库。

检查调色板的辅助功能：您可以检查原色与正文/文本颜色之间的对比度。Web 内容可访问性指南 （WCAG） 定义了易读性的最低颜色对比度 - 确保您的选择符合此原则是一种很好的做法，以便所使用的颜色对于色盲观众来说是独特和安全的。

从任何现有图像或设计中提取和使用调色板（通过上传文件）。

查看不同行业的艺术家和设计师使用的最新色彩趋势

Adobe 关于色轮的在线资源的屏幕截图。访问ui设计公司了解更多信息。

Adobe 关于颜色的在线资源

最后，你必须从其他创作者的作品中汲取灵感，并不断尝试——这将大大有助于提高你对颜色的理解和应用。

UI设计公司,UI界面设计公司,北京UI设计公司