如何利用色彩规则，科学有效地配色？

（图源网络）

色彩，在生活中可以左右我们的情绪，不同的色彩给人带来不同的视觉感受，从而产生不同的心理感受。

在UI界面设计中，色彩依旧是被排在首位的，因为它最先抓住人们注意力，所以设计师必须懂得色彩的搭配才能够充分展示色彩的魅力。

接下来介绍两种科学的配色方法

1、如何利用工具科学地定义一套色彩体系？

2、如何利用色彩规则，打造高级感配色？

如何利用工具科学地定义一套色彩体系？

第一步，我们需要确定一个品牌色

那么如何确定品牌色？品牌色一般是logo的颜色，如果没有logo可以根据产品的定位，从色彩情感出发，选择合适的颜色。

也可以参考国内外现有的品牌色，这里推荐一个网站BrandColors，它是目前最大的官方品牌配色合集，包含Adidas，Google，Facebook等。

第二步，筛选出24色环

这里推荐一个色彩在线选择工具—Paletton。选择一个颜色后，即可在上方查看4种不同的配色模式。网站还提供配色方案调整，网页演示效果等。

选出主题色后，每隔15度会有一个色值，依次转动原点，得到24色环，因为24*15=360。

第三步，筛选出16色环

从24色环中筛选出16色环，去掉比较相近、看起来跟主题色不太符合的颜色。

第四步，调整S值和B值

首先在亮度（S）上加减10/20，然后在饱和度（B）上加减5/10/20，原则还是要看起来比较舒服，整体协调统一。

第五步，拓展色阶

在调整好色值以后，可以在下面的网站中，得到不同色阶的辅助色，用来满足不同场景的配色。尤其使用在B端系统中的成功色、告警色、失败色、字体色、背景色等。

如何利用色彩规则，打造高级感配色？

在日常的设计工作中，我们经常会为各种各样的设计进行色彩配色，拒绝凭感觉配色，下面为大家分享几种通过12色轮高级配色的方法。

第一种是单色配色方案

通过调节明度和饱和度形成的配色方案，这种配色方案看起来比较高级。

如下图，就是调整了HSB模式下的S值和B值，得到了明暗的两个颜色。还有一种方法，我们可以把白色和黑色的20%透明度叠加在上面，也可以形成这样的单色配色。两种方法各有千秋，需要根据具体设计情况去进行选择。

如下图的单色配色，整体色调统一、舒服，比较柔和，容易把控。

（图源网络）

第二种是邻近色配色

是指色相环中相距60度，或者相隔三个位置以内的两色，为邻近色关系。比如说蓝色和绿色，红色和橙色。

邻近色配色活泼、稳定，有一定的视觉冲击力，视觉层次感丰富。如下图的app界面设计，有跳跃性，但同时也很舒服、和谐。

（图源网络）

第三种是三元配色

色相环中120度，在使用过程中需要注意主色、辅色的使用配比。依旧以#337dff这个色值为例。

这种配色对比度很高，需要同时保持相同的色调，在图表的配色中这种方案比较棒，提供了创建比较所需的对比度。

（图源网络）

第四种是互补色配色

色相环中成180°角的两种颜色。视觉效果突出，对比强烈，点缀能力强；补色要达到最佳的效果，最好是其中一种面积比较小，另一种比较大。

这种配色常用作画面中的点缀色，与主题固有色形成对比关系，用于突出主体。如下图的界面设计，主色是紫色，配以橘黄色点缀。如果想要两个颜色占比相同，就需要降低饱和度/明度，来达到整体的平衡。

（图源网络）

第五种是分裂互补色配色

互补色和邻近色的结合，同样具有很强的视觉冲击力，颜色搭配既具有类比色的低对比度的美感，又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。

如下图的web界面中，橙色、黄色、蓝色，橙色和黄色是邻近色，橙色和黄色又都是蓝色的补色，这样搭配起来视觉冲击力强，又细节丰富。

（图源网络）

第六种是四色配色

采用两个互补色相邻的邻近色来搭配，在色相环上形成一个矩形。配色效果冷暖明显，画面丰富。在配色时可以选择一个颜色为主色，其它颜色辅助。

如下图的界面设计中，以蓝色为主，橙色、红色、蓝绿色为辅。

（图源网络）

以上就是我们介绍的几种高级配色方法：单色配色、邻近色配色、三元配色、互补色配色、分裂互补色配色、四色配色。在使用的过程中，要牢记色彩的基本规则。色彩规则都是相通的，无论是在日常的服饰穿搭、家庭装修还是在设计作品中，都会使我们的配色更加出彩。

最后

色彩是感性的，但同时又有规律可遵循，因为有了规律，我们才能更好的、全方面的了解它，从而指导我们的设计工作。

本文通过对如何利用工具科学的配色、如何利用色彩规则打造高级配色两个维度进行分析总结，目的是让大家在多个层面了解色彩以及配色基础知识，给大家提供一个参考的方向，但设计中的配色方案远不止于此，需要理性加感性的平衡去进行设计。