当您筛选新闻提要时，什么往往会引起您的注意呢？视频、动画、GIF图片、图片？又或者其他视觉内容？
虽然在寻求问题的答案时，文本内容才是最基础和重要的，但创建信息图表、图表、图形、动画GIF和其他可共享图像等视觉效果可以创造奇迹，以吸引读者对您文章或报告的注意力。
充分发挥可视化价值，颜色搭配是一门艺术。接下来就介绍一下颜色基础和色彩搭配原理吧~~
什么是色彩理论？
色彩理论是围绕色彩及其在创造美观视觉效果方面的主要规则和指导方针的基础。通过了解颜色理论基础知识，您可以开始为自己解析颜色的逻辑结构，从而更有策略地创建和使用调色板。结果意味着唤起一种特定的情感、氛围或审美。
为什么色彩理论在可视化设计中很重要？
虽然有许多工具可以帮助我们中最缺乏艺术性的人创建引人注目的视觉效果，但图形设计任务需要更多关于设计原则的背景知识。
选择正确的颜色组合，乍一看这似乎很容易，但是当您凝视色轮时，您会希望自己对所看到的内容有所了解。了解颜色如何协同工作，它们对情绪和情绪的影响，以及它们如何改变您网站的外观和感觉。从有效的 CTA 到销售转化和营销工作，正确的颜色选择可以突出显示您网站的特定部分，让用户更易浏览，或者从他们点击的第一刻起让他们有一种熟悉感。
色彩理论101
还记得听说过初级、二级和三级颜色吗？
色彩理论模型图
初级颜色(原色)
原色(Primary colors) 是您无法通过将两种或多种其他颜色组合在一起来创建的颜色。它们很像质数，不能通过将其他两个数字相乘来创建。
共有三种原色：
- 红色
- 黄色
- 蓝色
将原色视为父色，将您的设计固定在通用配色方案中。当您开始探索其他色调、色调和色调时，这些颜色中的任何一种或组合都可以为您的颜色选择来源。
在使用原色进行设计甚至绘画时，不要觉得仅限于上面列出的三种原色。
合成色
合成色是由上面列出的三种原色中的任意两种组合而成的颜色。查看上面的色彩理论模型图——看看三种原色中的两种是如何支持每种合成色的？
共有三种合成色：橙色、紫色和绿色。您可以使用三种原色中的两种来创建每一种。以下是创建合成色的一般规则：
- 红色 黄色 = 橙色
- 蓝色 红色 = 紫色
- 黄色 蓝色 = 绿色
请记住：上述颜色混合仅在您使用每种原色的最纯净形式时才有效。
三次色
当将原色与合成色混合时，会创建三次色。三次色最重要的组成部分是并非每种原色都可以与合成色匹配以创建三次色。例如，红色不能与绿色混合，蓝色不能与橙色混合，因为这两种混合都会导致略带棕色的颜色。
相反，当原色与下面色轮上的合成色混合时，会产生三次色。有六种三级颜色符合此要求：
- 红色 紫色 = 红紫色（洋红色）
- 红色 橙色 = 红橙色（朱红色）
- 蓝色 紫色 = 蓝紫色（紫罗兰色）
- 蓝色 绿色 = 蓝绿色（蓝绿色）
- 黄色 橙色 = 黄橙色（琥珀色）
- 黄色 绿色 = 黄绿色（黄绿色）
色彩理论轮
一个圆形图，描绘了每种初级颜色、合成色和三次颜色——以及它们各自的色调、色调、色调和阴影。以这种方式可视化颜色可以帮助您选择配色方案，如下图所示：
色彩理论轮
在为配色方案选择颜色时，色轮让您有机会通过将白色、黑色和灰色与原始颜色混合来创建更明亮、更轻亮、更柔和和更暗的颜色。这些混合创建了如下所述的颜色变体：
- Hue
- Shade
- Tint
- Tone (or Saturation)
Hue(色调)
在组合两种原色以创建辅助色时，要记住色调的重要性。如果不使用混合在一起的两种原色的色调，则不会生成辅助色的色调。通过混合两种带有其他色调、色调和阴影的原色，最红的颜色效果取决于两种以上颜色的兼容性。
Shade(阴影)
Shade(阴影) 经常用于指代相同色调的浅色和深色版本,但实际上，从技术上讲，阴影是将黑色添加到任何给定色调时获得的颜色,各种“阴影”只是指添加了多少黑色。
Tint(色调,淡色)
Tint色调 与阴影(Shade)相反，但人们通常不会区分颜色的阴影和颜色的色调。当在颜色中添加白色时，会得到不同的色调。因此，一种颜色可以有一系列的色调和色调。
Tone(or Saturation(饱和度))
还可以将白色和黑色添加到颜色中以创建色调(tone)。色调和饱和度(Saturation) 本质上是同一件事，但大多数人在谈论为数字图像创建的颜色时会使用饱和度,而色调将更常用于绘画领域。
加法和减法颜色理论
你如果曾经在任何计算机程序上玩过颜色，可能已经看到一个模块，其中列出了RGB或CMYK颜色，字母旁边有一些数字。有没有想过这些字母是什么意思？
CMYK
CMYK 代表青色、品红色、黄色、基色(黑色)。这些也恰好是打印机墨盒上列出的颜色。CMYK 是减色模型,之所以这么叫是因为你必须减去颜色才能得到空白色,而你添加的颜色越多，你就越接近黑色。示例如下：
CMYK颜色组合示例
CMYK在0到100的范围内工作。如果 C=100、M=100、Y=100 和 K=100，您最终会得到黑色。如果所有四种颜色都等于 0，那么您最终会得到真正的白色。
RGB
RGB 代表红、绿、蓝，它基于光波的加色模型。这意味着，添加的颜色越多，您就越接近白色。对于计算机，RGB 是使用从 0 到 255 的比例创建的。黑色是 R=0、G=0和B=0。白色则是R=255、G=255和B=255。
RGB颜色组成示例
七种配色方案是什么？
七种主要配色方案是单色(Monochromatic)、类比(Analogous)、互补(Complementary)、分裂互补(Split Complementary)、三色(Triadic)、正方形( Square)和矩形(或四色)(Rectangle)。
Monochromatic
单色配色方案使用具有不同深浅和色调的单一颜色来产生一致的外观和感觉。虽然它缺乏色彩对比，但它通常最终看起来非常干净和抛光,它还允许您轻松更改颜色的暗度和明度。
monochromatic-color-wheel
当不需要创建高对比度时，单色配色方案通常用于图表和图形。样例如下：
Example Of Monochromatic
Analogous
类似的配色方案是通过将一种主要颜色与色轮上直接相邻的两种颜色配对而形成的。如果您想使用五种颜色方案而不是三种颜色，您还可以添加两种其他颜色(位于两种外部颜色旁边)。
analogous-color-wheel
类似的结构不会创建具有高对比度颜色的主题，因此它们通常用于创建更柔和、对比度较低的设计。如你可以使用类似的结构来创建具有秋季或春季颜色的配色方案。
这种配色方案非常适合创建暖色(红色、橙色和黄色) 或 更冷色(紫色、蓝色和绿色) 的调色板，如下所示。
Example OF analogous
Complementary
互补色方案是基于在色轮上使用彼此直接相对的两种颜色以及这些颜色的相关色调。
complementary-color-wheel
互补色(Complementary)方案提供最大量的颜色对比度,最好主要使用一种颜色，并在设计中使用第二种颜色作为重点。互补色方案也非常适合图表和图形,高对比度可帮助您突出重点和要点。
complementary
Split Complementary
拆分互补方案(Split Complementary)包括一种主色和与主色补色直接相邻的两种颜色,创造了比互补色方案更微妙的调色板，同时仍然保留了对比色的好处。
compound-color-wheel
拆分互补配色方案可能难以平衡，因为与类似或单色配色方案不同，所使用的颜色都提供对比度,其积极和消极方面是您可以在方案中使用任何两种颜色并获得很大的对比度。
Example Of compound
Triadic
三元配色(Triadic)方案提供高对比度配色方案，同时保持相同的色调。三色配色方案是通过选择三种颜色来创建的，这些颜色均等地排列在色轮周围的线条中。
triadic-color-wheel
三元配色方案对于在设计中的每种颜色之间创建高对比度很有用，但如果所有颜色都选择在色轮周围一条线上的同一点上，则会显得过于强烈。要在三元方案中抑制某些颜色，可以选择一种主色并谨慎使用其他颜色，或者通过选择较柔和的色调来抑制其他两种颜色。
三元配色方案在条形图或饼图等图形中看起来很棒，因为它提供了创建比较所需的对比度。
Example Of triadic
Square
方形(Square)配色方案使用色轮上彼此等距的四种颜色来创建方形或菱形。虽然这种均匀分布的配色方案与您的设计形成鲜明对比，但最好选择一种主色，而不是试图平衡所有四种颜色。
square-color-wheel-scheme
方形配色方案非常适合在您的网页设计中,选择你最喜欢的颜色并从那里开始工作，看看这个方案是否适合你的品牌或网站。
Example Of Square
Rectangle
也称为四色(Rectangle)配色方案，矩形方法类似于其正方形对应物，但提供了一种更微妙的颜色选择方法。
rectangular-tetradic-color-wheel
正如您在上图中所看到的，虽然蓝色和红色阴影非常大胆，但矩形另一侧的绿色和橙色更加柔和，从而有助于突出较粗的阴影。
如何选择配色方案
- 「优先考虑用户体验」
在为网站、应用程序、产品或包装添加颜色之前，请先以灰度进行基本设计。可以专注于最重要的事情：用户体验。与其关注整个网站的配色方案或特定按钮或链接的色调，不如确保一切都按预期运行。
原因如下：即使是最好看的网站或具有完美颜色选择的产品，如果访问者找不到他们想要的东西，也不足以留住他们。
- 「利用自然灵感」
考虑到一些颜色选择，请考虑您希望配色方案设置的心情。如果激情和活力是你的首要任务，那就更倾向于红色或更亮的黄色。如果您想营造一种平和或安宁的感觉，请趋向于较浅的蓝色和绿色。
- 「考虑颜色上下文」
在下图中，每个圆圈中间的大小、形状和颜色都相同。唯一改变的是背景颜色。然而，中间的圆圈看起来更柔和或更亮，这取决于它背后的对比色，甚至可能会注意到仅基于一种颜色变化的运动或深度变化。
- 「参考您的色轮」
- 「使用 60-30-10规则」
使用三种颜色：60% 的设计主色，30%的次要颜色和最后10%的强调色。
- 「起草多个设计」
颜色参考工具
- 「Adobe Color」
这个免费的在线工具允许您根据本文前面解释的颜色结构快速构建配色方案。一旦您选择了喜欢的方案中的颜色，就可以将 HEX 或 RGB 代码复制并粘贴到您正在使用的任何程序中。它还具有数百种预制配色方案，供您在自己的设计中探索和使用。更多内容可参考：Adobe Color[1]
Adobe Color
- 「Illustrator Color Guide」
Illustrator Color Guide
更多内容可参考：Illustrator Color Guide[2]
- 「Microsoft Officea颜色设定」
自定义微软颜色主题，所有 Office 产品都具有预设颜色，您可以使用这些颜色来创建配色方案。PowerPoint 还具有许多配色方案预设，可用于为您的设计汲取灵感。
powerpoint-themese
原文链接：https://blog.hubspot.com/marketing/
color-theory-design#
翻译：宁俊骐
备注：第一次翻译，有所出错请谅解，望留言告知
参考资料
[1]Adobe Color: https://color.adobe.com/zh/create/color-wheel。 [2]Illustrator Color Guide: https://www.dummies.com/software/adobe/illustrator/color-guides-and-color-themes/。
