色彩作为设计中不可或缺且独立存在的一个分支，其对设计不仅有着视觉的影响，还可以以最直观，最有力的视觉表现唤起特定的情绪或情感，促进视觉和心理的双重感知以实现设计所要表达的目的，可以说色彩的搭配决定了设计成功与否的基础，而在很多情况下色彩的搭配则成了众多设计师遇到的难题之一，本期文章将立足于色彩理论的基础之上，对色彩的搭配和使用进行赘述，在视觉设计中应该怎么样才能让色彩看起来舒服一些；

色彩作为视觉感知的先觉条件，在很大程度上决定了作品的好坏以及给观者留下什么样的印象，人们最先感知到的即是通过色彩所传递出的情感，色彩作为一门独立的学科，在基于其理论体系之上衍生出了众多的搭配方法和技巧，在遵循色彩构成的原理之上可以更好的帮助我们对色彩有深入的认知和使用，对于色彩而言，除了要了解基本的构成之外，在使用的过程中更重要的是要对色相，明度，饱和度有敏锐的观察里和视觉感知力，通过三者不断的变化和调整把控使色彩更加具有情感，让视觉感知更加的舒适并满足我们的实际的需求；

 色相

色相的变化则是基于三原色的基础上产生出来的色与色之间的关系，是决定色彩的基础，我们经常说的色彩搭配通常是指某个颜色与另一个颜色的色相搭配，其在色彩选择和使用中起着决定性的作用，色相可以说是色彩的选择时的框架，同时也是情感和情绪单一且直观的视觉感知体现，是偏向理性的理论支撑；

明度和纯度

则是基于色相之上的深浅和明暗变化，在色相的框架之内可以利用明度和纯度的变化营造更加细腻的舒适效果，同时两者也反应出最终色相的舒适程度和搭配的效果优劣，也是色彩细节的根本所在，其影响的直接结果就是即使在符合色彩原理的基础上也未必能有舒适的视觉感知，更加偏向感性；

在同一个色相下，明度和纯度的变化则是以纵向和和横向的方式变化，两者相交处则决定了最终色彩值，色彩的舒适与否很大程度上取决于明度和纯度的交叉，色相包含明度和纯度，但又取决于明度和纯度，三者互为相依形成色彩三要素，明度和纯度与无色的黑白同样是神一样的存在，至始至终贯穿整个色彩，同时也是色彩细节和视觉感知最有力的体现，更是确定单个纯色的最佳方式；

图1:

当一个画面中出现两个不同的色相时，则需要在遵循三原色的原理上对其中一个色相的明度和纯度进行调整以达到视觉感知的舒适，在进行色彩搭配的过程即是在确定色相之后以色相的深浅明暗进行细微的调整使其色彩的情绪和情感表达能够更加的准确可视化，如只是调整不同的色相变化则会让画面不堪入目；

图2:

而当一个画面只使用一个色相的时候，则是明度和纯度发挥作用最大的时候，通过色相的深浅和明暗就可以完成一个不错的画面，但就视觉设计而言，单一色相相对来说则会比较局限，也很难满足画面中多种情绪细微的变化，而与左边的图相比之下，整个画面则会显得稍微亮了一些，同背景下不同的搭配传递出的视觉效果也有差别；

在遵循色彩搭配原理的基础上，更加需要注重明度和纯度的变化所传递出的视觉感知效果带给人们的舒适度，而并非有理论支撑或者照搬理论就就是完全合适的；相反在确定明度和纯度之后也可以调整色相使色与色之间更加舒适；

色彩通常是感性的，但同时也是基于一定的理论基础之上，通过人为的视觉感知，对表达事物理解程度进行调整的，更简单的理解就是色彩理论作为框架的辅助，而人眼的感官舒适度作为目的，用色彩基础理论的方法论对明度和纯度不同调整尝试的过程；

理论认知即是对色彩基础知识学习的层面，是学习和认识色彩的方法论，它是辅助我们合理使用色彩的基本原理，即是对色彩划分，色彩的构成，色彩原理的思维逻辑理解；

无色系与有色系存在的唯一差别即是无色只有明度没有纯度，而有色则是都存在的，相对来说也会比无色复杂一些，同时也是我们需要深入理解和学习的方向，而理论认知只是建立相应的色彩框架，很多设计师大都停留在色彩框架的边缘以色彩理论的空架子作为支撑是很难掌握实际需求和最终的视觉效果，但两者在使用时也会存在一些相似的原理和规律；

当以实际应用模式把无色系和有色系分别列出结构图可以看出，两者的变化规律基本一致，而有色系则是多了一个纯度，也就是颜色的深浅，并呈现出循环规律，在进行选择时则可以融合黑白灰以调整有色的颜色深浅和明暗；

而当有色与无色变化规律进行对比之后可以看出，从黑到白的变化中无色是自然过度的，而加入一个红色之后则发生了有色的变化，黑到红是明度的变化，而红到白则包含明度和纯度的变化，单个色彩则是与黑白融合变化后的结果，那边融合的多红色即偏向那边，所有单个色彩均是如此变化规律，而色彩搭配则可以看作多与少之间的搭配；

图1:

在使用黑白灰的情况下，更多的只需要考虑色彩的明暗即可，不管如何使用都离不开从黑到白的无色变化规律，无色可以与任何色彩随意搭配使用，除了极端的纯黑和纯白之外，其他均可以看作是黑白的明暗过度色；

图2:

在有色中加入黑色则可以使色彩变的暗一些，而加入白色则可以让色彩变的亮一些或者颜色浅一些，即可影响明度同时也影响着色彩的纯度，有色的搭配方法则是根据色彩变化的规律进行的，也是色相的变化而在使用中还要结合纯度和明度；

案例延展可以出，在规避三背景上面的三原色之外，背景可以使用其他的任何过度色，具体可以根据实际的要表达的需求而定；

感性认知是建立在理论认知的基础上对目的理解和色彩感官的使用，是以人的感官目的为基础进行的色彩使用，是色彩所表现出的情感和视觉感受，通常就是我们常说的对色彩的敏锐度以及对需求深度理解的色彩视觉表现，也是三要素的具体表现；

色彩的情感是人视觉感知之后的心理作用，也是色彩心理的表现，在色相较为固定的情况下，通过调整明度和纯度之后就会得出新的色调，而随之变化的也有色彩的情感和心理变化，而情感和心理变化等这些不确定的因素则需要用色彩之间的搭配来相对较为固定的传达出色彩所代表的某一特定的情绪；

图1:

在遵循色彩搭配原理的基础上进行色彩之间的搭配使用是没有问题的，但就视觉而言左边的颜色则会显得太过于扎眼，与文字色和背景色之间并没有很好的过渡，导致整个版面的色彩视觉感知跳跃，所传递出的情感和心理也飘忽不定，靓丽充满活力的色彩与背景和文字的沉稳虽然是形成了鲜明的对比，但却让人感觉不是那么协调舒服；

图2:

基于感性认知的基础上，对原有色彩进行明度和纯度的调整，让色彩之间在视觉上保持一致的同时也与背景和文字的色彩相互协调舒适，让版面不失去色彩突出的同时也让整个版面的情感和心理变化相对的固定在某一特定的变化中，以达到视觉感知认知的目的与视觉的舒适度平衡，通常调整是根据色彩的主从原则和表现的主体进行的；

在色相不变的情况下，把两个案例的背景加入大量的黑色，在改变其情绪和心理的同时使其更加突出色彩，而两个背景也都进行了纯度的调整，在差别不是很大的情况下尤其会突出感性认知对情绪和心理变化的影响，同时也是让色相与色相之间保持视觉的一致性，突出单个色相的原始基本情感；

在使用色彩的时候很多人都误以为只是色彩与色彩之间的搭配没有做好，在学习完理论知识之后又很难在实际应用中发挥出来，提升色彩舒适度除了要了解理论知识外，还需要注意色彩的感性认知以及视觉对色彩的敏感度（也就是单个色彩的纯度和明度）；

一致性是让色彩视觉感知舒服的最简单的方法，同时也是调整色彩的明度和纯度而决定的，尤其是在使用多色的情况下一致性尤为重要，在简单的三色搭配使用原则中同样需要注意主色与其他两个色之间的视觉一致性；

以“形影”为题创作的概念性的海报，为了表达这个词的意思，先做好一个一个图形，同时带有一定的影子过渡，颜色方面选择没那么高的饱和度和纯度的对比色，以凸显形影表达的意境，然后把图形置入到新建的画布中

图1:

把图形复制一层使两个图形对称排列并调整到版面中合适的位置，然后根据图形的色彩基调选择背景色，色调的选择是在保证能够凸显出主体图形的同时又能与主体融为一体，并贴合情感的需求，背景色选择蓝色便紫的较浅色调，目的是为了更好的融合图形的影子以及“形影”所表现的感念气质，在色调和整体上视觉感知基本保持在同一水平线上，且足以突出主体，同时符合色彩搭配的理论基础；

图2:

在较为中性色调的画面中，色彩的搭配使用最为头疼，亮一点显得亮，暗一点则会显得深沉，在整体的色调基本保持一致的时候，文字使用纯白色则是为了在较为和谐且稍微偏灰的画面中起到点亮的作用，如果用无色系的较深的颜色则会让整个画面太过于深沉，且与主体想要表达的气质不符，同时对图形和背景添加些许的质感处理，让整个画面看起来更加的具有品质感；

无色并不是没有色彩，在设计中无色系同样发挥着不可忽略的作用，尤其是在大面积使用高饱和度和纯度的画面中或者是多色的搭配使用中，无色系可以很好的起到调和色彩和视觉感知平衡的作用；

新建一个画布把主体图形植入到画面当中，在很多情况下可以根据所要表达感性概念词去选择色彩的大致范围，然后进行局部的色彩调整油画，同时也可以直接根据整个画面和主体所要表达的情感进行色彩搭配，然后调整合适的背景色；

图1:

为了让整体的色调和视觉感知保持一致，背景色选择一个高明度低纯度的浅色以突出主体，同时把主体调整到版面中合适的位置为后续的文字编排留下相应的布局空间，从整个画面的色调当中可以看出，如果要添加相应的合适色彩则会把整个画面基本的情感和情绪弱化从而增加传递出色彩与色彩之间形成的其他情绪和感知，通常情况下大多人会为了色彩搭配而忽略这种微妙的感知认知；

图2:

把图形复制一层做相应的效果处理，使其自身的视觉效果得到提升，同时把文字信息植入到画面当中，在背景浅且较亮的画面中文字通常会使用无色系，这是为了保证画面视觉效果和色彩情绪时使用无色系的色色彩作为调和整个画面的视觉平衡，同时又能保证其基础设定的情感表达和视觉预想效果，文字使用黑色时则会把整个画面向外扩展的色感压回到画面当中形成一个黑色的壁垒，同时干净利索的传递自身携带的信息；

色彩效果对比

在画面主题颜色不变的情况下，只是调整文字的颜色对比之后可以看出，左边的文字颜色虽然也是与整体色调较为符合，但就整体而言则会显得轻浮一些，本身的理论依据并没有太多问题，只是在视觉感知上面会让人感觉没有右边的成熟稳重，看起来更加舒服；

在设计中色彩虽然变化多端，但除了理论依据之外，还有很多方式方法可以为我们的色彩使用提供帮助，主从原则就是色彩选择使用最好的方式之一，同时也是设计师普遍使用的方式，其主要是根据设计的目的和主体进行的色彩搭配使用；

当我们拿到一个主题时，首先要先对主体的色调和视觉感知影响的情绪和情感变化做一下简单的捕捉，然后结合最终预想的视觉效果进行色调的初步选择和搭配的尝试；

图1:

主体所呈现出的色调则是红蓝多一些，在选择背景时则基于红色调或者紫色调的基础上选择一个高明度低纯度的色，这样可以更好的突出主体，同时还能与主体的色调融合在一起，在视觉上看起来也会舒服一些，然后适当的对模特进行简单的修饰和处理，并调整到画面中合适的位置，接着就是把把文字编排置入到画面中并考虑其应该使用什么样的色调以更好的贴合画面和主体；

图2:

文字的颜色同样是基于主体的色调进行选择，如果使用无色系则会让整个画面所传递出的气质不伦不类且比较死板，而基于主体色调的基础上主要考虑文字不被主体吃掉或者扎眼，也能很好的保持清晰的信息传递，在最底部加入与背景同色的横条以最为文字的载体，整体文字色不仅可以与背景和主体融合在一起，同时也能与被其区分开独立的保持信息的清晰传递，在主体色调不变的情况下可以在明度和纯度上尝试更多可能：

尝试效果

在基于主体色的基础上可以尝试更多的配色方案，其视觉效果不仅可以让画面看起来更加舒服，同时也会有更多的可能，不管是调整明度，纯度，色相都会有不同色视觉效果，最终则需要根据实际的表达需求而定；

在设计中很多情况下色彩起着决定性的作用，而色彩用的好不好除了色相与色相的搭配之外，更重要的则是对明度和纯度的视觉敏感度，以及其对视觉感知所带来的情绪和心理变化，色彩本身是感性，而对于设计师来说则需要通过感性的认知去理解色彩的情绪和心理。

文章来源于16创艺(id:yelloart)，作者Martin_K

​配色组合不会用？这里每一种组合色都有创意十足的作品案例，一起来好好欣赏这些美妙的设计作品！

（本文适用于：网页设计师、平面设计师、数字插画师和广大设计爱好者）

1、黑与黄

明黄和和黑色是今年仍旧流行的组合，这种组合最大的视觉效果是抓眼球！明黄和黑色的组合而成的作品往往画面简练，中心突出，能引起读者足够的注意力。这种组合往往还会引入白色衬托，经典的黑白双色配以叛逆黄，前卫、大胆！

2、蓝与红

这是一组非常经典和优雅的色彩搭配！完美的配色方案，是许多平面设计和插图设计的首选！作为三原色的其中两个(第三种是黄色)，蓝色和红色是鲜明的对比色，并以纯色或中间混合成紫色的渐变完美地互补！

3、紫色与大粉色

一个非常现代的色彩组合，代表着神秘感、敏感。在Panton色卡中，这两种超级时尚的色彩组合现在非常受欢迎，并且广泛应用在插图、网页设计、平面设计、应用程序设计中。如此令人震惊和强大的组合色，非常适合从事前卫、时尚类产品的设计师！

4、黑与白

黑与白是设计中最经典、最永恒的组合，任何时代、任何设计都绕不开这一组合带来的高贵的视觉效果，它是全世界设计师和艺术家珍视的“色彩宝藏”。无论是手工艺术品、数字插画、平面设计、网页设计、印刷设计等等，它始终诠释着：极简主义！

5、灰与绿

网页设计的潮流趋势！这个充满活力的组合色通常代表了高科技，也代表了创新和先进技术。不仅PC端，移动端也对它趋之若鹜。

6、珊瑚色与蒂尔色

一组对比鲜明的色彩组合，非常适用于数字创意设计，如创意插画、创意图形、网页设计。这两种颜色分开看，非常迷人，组合在一起，视觉效果会更加强烈。珊瑚色也是2020年主打的流行色，

7、黑与橙

与黑色和黄色的视觉效果相似，黑和橙也是一种超级阳光和充满活力的色彩组合。清新的橙色很有吸引力。结合经典的黑白组合色，能生出十分和谐的构图，给人以创新和创造力的印象。

国内排名靠前的几个新兴科技企业的app上都能看到黑色和橙色的组合色。

8、蓝和橙

在色相环上，蓝色和橙色是对比色，位于色相环相对位置的两种颜色组合往往都能达到完美的对比度。作为2020年度八大最佳色彩组合之一，蓝与橙表现出信任和乐观，这使得它成为网页设计和数字创意的宠儿。

非常欢迎您将这8大最佳流行色彩组合应用到您的设计作品中，也欢迎您将完成的作品在本文末分享给大家！也欢迎您将您组合出的流行色晒出来，为更多的设计师们带来灵感！

作者 | Lyudmil Enchev
原文 | https://graphicmama.com/blog/the-best-color-combinations-to-try-in-2020/
编辑 | 设计达人（id:shejidaren888）
投稿 | 秀芳 | 运营设计师

黑色和黄色

霓虹黄和黑色是一种非常时尚的组合，颜色组合的成功是因为它能简单地抓住用户的注意力。经典的黑白两色搭配辅以叛逆的黄色，让这一组合呈现出令人惊异的前卫造型。

蓝色和红色

非常经典和优雅的配色，为许多图形设计和插图提供了完美的配色方案。作为两种原色（黄色是第三种），蓝色和红色形成对比，且以纯色或令人愉快的渐变的形式彼此完美地互补，在中间融变成紫色。

紫色和珊瑚色

一种非常现代的颜色组合，以敏感和神秘的魅力。把这个组合的颜色命名为紫外线和盛开的大丽花（珊瑚色），现在已经很受欢迎了。我们可以从插图、网页设计、平面设计和移动app设计上看到它。

黑色和白色

最流行的颜色组合：黑色和白色。它在手工艺术品、插图、图形和网页设计、印刷设计等方面显得很优雅和雅致，它与极简主义的视觉趋势有着完美的关系。

灰色和充满活力的绿色

一种非常充满活力的色彩组合，特别是在网页设计中非常流行，通常将这种颜色组合视为高科技，这对于应用程序设计也很常见。

 珊瑚色和蓝绿色

一组对比鲜明的色彩组合，在所有类型的数字艺术设计（插图，图形和Web构图）上看起来都非常令人愉悦。两种颜色本身看起来都令人赞叹，当它们组合在一起时，它们的效果会进一步增强。考虑到“活珊瑚”是今年的颜色，这种组合现在很受欢迎。

 黑色和橙色

类似与黑色和黄色，黑色和橙色是一种乐观和充满活力的色彩组合。清新的黄色吸引人的感觉。结合经典的黑白配色方案，设计师可以创造出和谐的构图，给人以创新和创意的印象。

蓝色和橙色

蓝色和橙色在色轮上放置正好相反，这有助于它们在设计中使用时获得完美的对比度。流行的色彩组合在传递信任和乐观的同时，也使得它在网站设计和数字艺术中非常受欢迎。

原文地址：小阿田的设计笔记（公众号）

作者：小阿田的设计笔记

Photo by George Becker from iconscout

我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。色彩会影响人们的身心，强烈的红色会使血压升高，而蓝色则使人冷静。

设计UI界面时，色彩是影响用户最简单和最重要的一个因素。很多人认为UI界面色彩的选择取决于设计师的品味和审美。然而，颜色的选择过程比它看起来要复杂的多，在设计中扮演着重要的角色。

可以用颜色来营造一种情绪、吸引注意力或作出强调，用色彩调动人的情绪或使人冷静下来。通过选择正确的配色方案，可以营造一种优雅、温暖和平静的氛围。

色彩的选择是基于色彩心理学和色彩理论的，下面就详细介绍一下这块的内容吧。

色彩心理学

男性和女性的色彩偏好是不同的，不同年龄群体的色彩偏好也是不同的。

根据 JoeHallock的研究，不同性别的色彩选择有天壤之别。研究旨在发现不同色彩的偏好程度，从最喜欢的色彩到不那么喜欢的色彩分别所占的比例。

不同性别的色彩偏好

如上图，男女都格外喜欢蓝色，而对棕色的喜爱程度最低。

以一个APP案例来说明

这款APP的目标是管理成本，用户包含男性和女性。先假设一个不了解色彩的初学者，选择棕色作为APP的主色，因为棕色是他最喜欢的颜色。 结果如下：

成本管理APP

如图，虽然设计还行，但由于色彩的选择，APP可能无法正常使用。 那如何优化呢？ 本文稍后的部分中，将介绍如何仅通过色彩的改变来优化整个APP。

配色的价值就来了，设计师需要了解色彩的含义和影响，以传达正确的语气、信息并引导用户做出预期的行为。 每种色彩都会对我们的思维产生影响，了解可能的影响可以帮助设计师传达正确的信息、引导用户行为。

作为一个设计师，你需要了解色彩的含义，这里只是简要介绍，详细内容请参考 http://www.color-wheel-pro.com/color-meaning.html

色彩理论

1.色环

设计界面时，有很多色彩可以使用。首先，要提到的是色环。

著名的色环

另一个重要的话题是配色。配色有很多方法，但暖色和冷色应该平衡。下面是几种配色方式：

互补色、邻近色、三色组、分裂互补色、矩形（双分裂互补色）、正方形

每个设计师都应该知道色彩的三个属性：色相、明度和饱和度。 Christian Vizcarra对色彩的属性描述非常详尽，本文借鉴了其相关内容。

2.色相

色相是自然状态下的色彩。比如蓝色、黄色、绿色和红色等等，没明暗的变化。简言之，色环上没有改变明暗的色彩。如下图：

3.明度

明度，指色彩的明暗度。以自然界为例，一些物体在早晨和晚上的色彩不同。如树木和山脉，早晨色调浅；傍晚因为光线减少了，色调变得偏暗。

Photo by Nextvoyage from iconscout

距光源越近的物体，明度越高，反之，则明度越暗。明度在UI设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。

明度达到100%时，色彩就会变成白色；明度是0%时，就会变成黑色。如下图：

色彩的明度

4.饱和度

饱和度是色彩的纯度。增加饱和度，色彩会变得更强烈、鲜艳生动；降低饱和度，色彩会变得暗淡乏味。

色彩饱和度

使用饱和度前，需要知道设计的载体，印刷还是电子媒介。为印刷设计时，饱和度不能过高，因为印刷使用的CMYK模式，有一定的局限。

UI设计中的色彩

黄金比例——6：3：1原则。

60%+30%+10%的原则，是达到色彩平衡的最佳比例。在60%的空间使用主色，30%的空间使用辅助色，最后剩下10%的空间为另外一种色彩。这样可以使用户眼睛从一点移动到下一个点时，非常舒服。

使用6：3：1原则的调色板

UI中的阴影

没有完全纯黑的阴影，阴影的颜色是会受到物体本身固有色的影响，如下图所示。

Photo by Brigitte Tohm from iconscout

樱桃的阴影是深红色，看起来几乎是黑色，但并不是纯黑色。比如还有花儿、盘子和华夫饼的阴影，都不是纯黑色的。光和环境决定了阴影的颜色。

UI设计的一个常见错误是使用半透明的黑色作为阴影。

UI元素的阴影

字体色彩

如今大多数的界面都是白色的，目的在于尽可能地简化界面聚焦内容本身，所以字体排版就成了一个非常重要的元素。

左边的文本颜色是纯黑色 (# 000000），右侧的色彩看起来是黑色的，但其实是加入了蓝色的黑色，变成了蓝黑色 (# 181441）。字体色彩在大多数白色的界面中，非常重要，如下图：

相同透明度下，两种色彩的对比

相同透明度下，两组文本字体颜色不同，效果不同。一组是灰色的，另一组是蓝灰色的，不同色调的文本对界面有显著的影响。如下图：

使用黑色和灰色，很糟糕吗？不是。人们常说“黑色使一切很酷”，所以这取决于个人的感受。在使用颜色时，考虑到色调，就可以实现更好的对比和协调。

成本管理APP的优化

改为绿色后，APP看起来好多了。因为我们需要在这款App中表现出对于金钱和增长的强烈情感愿望，而绿色描述了金钱和金融世界，男女都同时喜欢绿色。

（译者注：在国外绿色代表股市上涨，所以对于他们来说，关于金钱的应用才用绿色会更加合适。颜色的使用更贴合使用人群，对体验来说才会更好，颜色也就变得更加有依据。）

以下是修改后的对比：

比之前看起来好多了是么？ 希望是的。如您所见，只需要关注色彩的一些小细节，就可以设计出高效的用户界面。

原文链接：https://medium.com/iconscout/colors-in-ui-design-theory-psychology-practice-f6d6a5e6e04d

作者：Dalsukh Tapaniya

翻译：Bravert