今天主要分享的是我看了我也记不清了多少篇色彩搭配文章最终总结出的怎么用五个步骤就可以把色彩搭配出来的经验，希望能对你们有所帮助。

首先问大家一个问题，我们在选择一个颜色的时候要考虑什么呢？

但是很多时候，你最需要考虑的是你领导的意见，哈哈哈哈，大家是不是想着怎么就突然变成舔狗了！！！

大家先不要着急，且听我娓娓道来，其实要考虑领导的意见的原因就是领导很多时候都有机会直面用户与用户交流，近距离观察用户，所以领导的在考虑这个色彩合不合适的时候其实真的是在站在用户的角度进行考虑。

我们相对领导来说大部分时间都是靠网上的经验和想法，能直面用户交流，了解用户的的机会其实很少，所以我蛮喜欢下面这句话

纸上得来终觉浅，绝知此事要躬行。

我们在网上学到的知识，需要不断地实践才能更好的运用到设计中，从而提高设计效率。

But ！

但是的但是吧！你不可能直接啪一声和领导说:

领导你给我一个颜色吧！

如果你这么做，那你就果果的会受到领导鄙视的眼光，而且我们怎么也要体现我们的专业度不是？

那怎么办呢？这里我教大家一个方法，只用5步就能快速高质量的搭配出合适的颜色。

先上图有图有真相，这是我最近对公司web端改版的一个界面，大家可以看到界面中主色是蓝色，辅色是绿色，突出色是橙色，那么我是怎么把这三种颜色给搭配出来的呢？

懒人目录

明确用色

寻找灵感

色卡制作

调整颜色

搭配颜色

1.明确用色

大家都知道每个颜色我们都有定义它可以表达什么含义的，我们上面的一张色彩图片，从图中我们可以看到绿色有安全、健康的的意思，那么我所在的是一家大数据科技的公司，那么我相对应的选择蓝色。

2.寻找灵感

第一步选择一个颜色还是很简单的，我选择了蓝色，但是问题就来了，世界上的蓝色何其多啊，下面这些都属于蓝色的范围里面，那么我应该选择哪个蓝色呢？

这里大家就要开阔一下思维，首先我们要知道我们现在看到的颜色都是源于大自然的，也就是说其实我们可以从大自然中找到灵感，那么我们应该怎么去找一些大自然的颜色呢？

我推荐的是去一些专业的摄影网站去看一些优秀的摄影作品，我比较喜欢的一个摄影网站

Pexels 

我们上面确定一个蓝色的时候就可以想象自然界中，有什么事物是蓝色，比如蓝天、蓝莓、大海这些在我们的认知中都是蓝色的对不对，而我更喜欢大海的蓝色。

那么我们在摄影网站上输入大海的关键词，从中找到我们看着就觉得很和谐很舒适的一张图并且保存下来方便下一步操作。

3.色卡制作

我们找到一张喜欢的图片有什么用呢？大家先看看下面的图片或者说是色卡，相信大家看到这些都会觉得挺好看的还蛮喜欢这样子的色卡。

我们也是要制作这样的色卡，以方便我们选择合适的颜色，这里推荐一个通过图片制作色卡的网站给大家 

ColorFavs

网站首页的颜值还是蛮高的一个配色网站，这个网站的主要用途就是你把一张图片上传上去，然后它会给你反馈一套配色，大家先看我下面的操作，然后自己多用用就能轻松上手啦！

如果还是有点看不明白操作或者有一些这个网站的其他问题可以看《配色终极奥义！用最爱的图片做出最爱的色卡！》这篇文章

4.调整颜色

我确定了一个颜色之后是不是就可以直接用了呢？

虽然直接用也是问题不大的，但是我还是希望你们能在这个颜色上进行一些思考，就像开头说的，我们要思考用户年龄，公司目标，而且不进行思考怎么能体验我们的专业度呢？

那么我们思考的用户年龄，公司目标，具体对色彩有什么影响呢？

我们先来思考一个问题，怎么可以确认一个颜色的呢？

回答上面的问题我们要先了解HSB色彩模型，从HSB色彩模型可以看到一个颜色由 H 色相，S 纯度（饱和度），B 明度三个元素组成。

关于HSB色彩模型的详细介绍可以看《如何用HSB模式搭建UI色彩体系》这篇文章。

所以上面的三步操作我们可以理解为我们已经确定了一个颜色的 H 色相，接着我们就需要确定颜色饱和度和明度。

这里可以分两种情况，一种是到这一步可以直接和领导讨论了，第二种是要自己思考的。

如果是可以找领导进行讨论了，在讨论之前我给大家提供两个比较有针对性的问题。

 这个颜色是不是看着太艳丽了？这个问题是解决颜色的饱和度是否太高的。

这个颜色是不是看着太暗沉了？这个问题是解决颜色的明度合不合适。

如果条件不允许，那我们用另一个方法，这个方法需要思考两个维度的东西。

第一点是用户人群年龄越年轻能接受的饱和度就能越高。

第二点是公司目标是希望通过这次设计给用户展示什么样的感觉，比如我这次改版界面的时候，领导就和我说过，希望能给用户有年轻活力的感觉，那毫无疑问就是风格偏向越年轻明度就可以越高。

现在明白了我们思考的东西对色彩有什么影响了吧。

当我们思考完之后就可以确定了 H 色相，S 纯度（饱和度），B （明度）三个要素了，最终确定一个颜色。

5.搭配颜色

当我们确定一个主色之后，怎么去搭配出一套色彩呢？

相信大家在看一些色彩教程的时候会教程看到说用邻近色搭配，对比色搭配，这里就详细和大家说说怎么用邻近色，对比色来搭配出颜色。

邻近色就是H 色相相差60°的颜色，我们看上面的图片中蓝色H 色相是 215，所以绿色的H 色相就是 215-60=155。这样我们就可以得到一个邻近色，可以用来作为一个辅色。

同理对比就是主色的 H 色相加减180°得到一个对比色，这个就是用来突出重点的颜色。

确定了 H 色相之后，就可以去调整其他的两个参数，至于怎么让多个色彩搭配的更加和谐我会在下一篇文章详细展开。

通过上面5个步骤，我们再来看一下界面是不是对这三个怎么搭配出来的有一个清晰的认知啦。

现在就赶紧去试试吧！

码字不易，看完记得动动小指头点赞喔！

Powered by Froala Editor