你真的会使用在线配色工具吗?

点击下方观看视频版哦~

 

以下是图文版：

相信大部分人都使用过在线配色工具或在线配色网站，那么使用这些工具或网站来配色，真的就能得到正确美观的效果么？当然不能。原因很简单，如果使用这些工具就能轻松完成配色工作，那么就不需要设计师了，随便找一个不懂色彩的人都可以替代我们。

因此本期的教程我们就来谈谈，如何正确的使用在线配色工具。首先，我推荐几个在线配色网站给大家。

                                                                                                 brandcolors.net

这个网站都是世界知名品牌、企业公司、知名网站的配色，而且还提供了快速下载的选项，单独的去点击色彩，就可以完成复制了。

                                                                                           webdesignrankings.com

这个网站据说是一位设计师在二十四小时内独立开发完成的，这上面也有一些比较漂亮的色彩组合，当我们把鼠标移动到不同的水滴上，就会显示这个颜色的色值了。

                                                                                                       coolors.co

这个网站只需要按空格键，就可以快速的生成配色，每次都会出现由五种颜色组合成的色卡。这里不仅会显示颜色的代码，而且当我们点击某一颜色时，也会出现这个颜色不同纯度明度的选项，并且还可以通过滑块来对色彩进行调整。

这个网站同样为我们提供了非常多的色彩组合，每个组合都有四种颜色，当我们点击某一颜色时，就会弹出相对应的颜色参数，可以很轻松的使用，非常方便。

类似这种配色网站有很多，虽然这四个网站不一定是最好的，但是配色网站都大同小异，重要的不是你知道多少这种网站，而是你是不是真的会用。

我相信现在肯定有的人心里是这样想的。

没关系，我是这样想的。下面就让我们用事实说话。

这个界面的版式部分已经编排好了，这里我们就尝试一下从我们提供的网站中，随便挑选一组颜色来填充试试。

我们就从这个网站上寻找，这里我们选择了这组纯度都较高且非常漂亮的色彩组合。

单看这组颜色还是挺漂亮的，那我们就把它随意的填充在左侧的界面上，我们看最终的效果怎么样呢，并不好对吧，可以说配色毁了这个界面。

如果你还是不服的话，没关系我们再试一个。

这个网站之前我们说过，都是比较知名品牌的用色，按理来说色彩搭配应该是没问题的，这里我们就选择大家比较熟悉的500px的配色。

填充到界面之后大家感觉如何呢，如果我说惨不忍睹应该不过分吧。所以，我们得出一个结论：直接使用在线配色网站的颜色是行不通的。下面我们就来看看到底该怎么使用。

首先就是搭建版式，要想做好配色版式一定不能太差，如果版式一塌糊涂的话，那么配色再好也无济于事。

版式完成之后就需要确定色彩的依附载体，说白了就是色彩使用的地方，比如这个界面中，首先我们可以填充的就是背景。

其次呢就是图片的颜色，当然图片本身就带有色彩，这里为了方便理解我做了去色处理，大家平时没必要这么做，但是图片的色彩一定要事先考虑好。

然后就是版面中的色块。

最后就是文字部分，虽然文字可以是有彩色也可以是无彩色，但无论怎么样，我们都要做到心中有数。

色彩的依附载体确定完之后，接下来需要思考的是，想让画面通过色彩传递出什么样的气质或风格。




由于这里提供了品牌和相关图片，所以案例的风格定位就比较简单了。比如具象的有：水、游泳、女性、性感、护肤品。抽象的比如清凉、活力、素雅、清新、文艺等等。

根据这些信息，我们确定了画面的主色相，这里我们选择蓝色，可以说是没有任何问题的。

同时也可以为画面确定主色调，这里我们就暂定明色调或淡色调。

前期的准备工作已经做完了，接下来就要根据我们的设计需求选择适合的网站。

什么叫适合的网站呢？比如这个界面之前我们已经分析过了，能够填充颜色的部分有背景、色块、文字，所以我们可以得出三到四种的色彩搭配是最合适的。

所以我们就要根据色彩数量来筛选网站。比如这个网站，它提供的色彩搭配数量多的十几个少的就一个，如果我们从这里选就会浪费很多不必要的时间，所以就可以先PASS了。

而这个网站都是五种颜色，也不适合我们色彩的使用的数量，所以也可以PASS掉。

而剩下的这两个网站都是四种颜色，所以从它们当中挑选就可以了。那怎么挑选呢，首先我们可以找到含有蓝色的色卡。

我们就以这个网站为例。

我们从这个网站上提取了十个色卡然后开始筛选，因为我们不可能全部都用。因为之前我们已经确定了画面的主色调为明色调或淡色调，所以我们先PASS掉色调不符的组合。

接下来根据色彩关系进一步筛选，比如使用同类色还是对比色，这个就要根据风格定位来选择了，因为我们不想让画面是一种单调的风格，所以这里我们就去掉了同类色的组合。

现在只剩下四个色卡了，再往下筛选就没那么容易了，所以我们就要结合风格定位来分析。

首先这组颜色除了带有蓝色和无彩色外，就是一个淡棕色，所以这个色彩会对画面产生很重要的影响，但是这个色彩又不符合我们的风格定位，所以也可以去掉。

而剩下这三组色彩其实从理论上来说都符合我们的风格定位，比如蓝色的清凉、绿色的健康、粉红的女性、黄色的活力、白色的纯洁等等，都包含在内了，所以这时候选择哪组色彩就要看你想突出哪种风格了。

那么这里我想突出清凉、干净、并且带有一些活力这样的感受，所以我选择了这组配色。

接下来就到了后期部分也就是操作的部分。选择好色卡之后我们先要分析它们之间的关系，比如这组颜色从大的范围来看可分为蓝色和黄色，而在蓝色当中又分为深蓝和浅蓝，剩下的就是白色。

分析完之后我们要确定色彩的地位，我们已经确定了蓝色为主色，而这个画面中的主色就是面积最大的背景色，但是这里有两个蓝色应该选择哪个呢？这里我们还是要依据风格定位，比如清凉、清新、雅致等印象一定是淡蓝色能体现出来的，深蓝色不行，并且淡蓝色与图片的色调也比较接近能够很好的融合在一起，所以我们用淡蓝色来填充背景。

然后从深蓝色、黄色、和白色当中选择一个填充文字和两个比较重要的色块，由于背景是淡蓝色，如果文字再填充黄色或白色的话识别性会很差，所以文字我们填充深蓝色。

这样主色就是淡蓝色，副色是深蓝色，而黄色就可以当作点缀色来使用了，所以我们用黄色填充文字下方的色块和一些需要点缀的地方。

剩下的三个色块保留白色就可以了，白色的调和会让画面显得透气一些，不然整个画面都是有彩色就会显得有些闷。

到这里我们已经把提取的颜色全部填充到了这个版式当中，可以说与之前随意填充的那两个相比已经好了很多。但是这里还是有一些问题的，所以还需要进一步对细节进行微调。

现在这个画面的配色有什么问题呢？最明显的就是黄色的纯度有些高了，在这个画面中有些抢眼，而我们知道黄色是充当点缀作用的，所以我们要降低黄色的纯度、提高明度。

调整完黄色之后我们发现，文字的深蓝色在黄色的衬托下对比就有些强了，所以针对深蓝色我们也要适当的做一些调整。

那么这个配色就完成了，可以说和我们预期的风格定位是相一致的，并且也很美观。下面我们可以换一组颜色试试。

之前我们说过这三组色卡都是可以的，那我们就换一个使用。

同样我们还是先来分析这组色彩之间的关系，大致可分为蓝色、绿色、粉色，而绿色当中又分为深绿和浅绿。

先将图片的色彩还原，之后就是确定主色，因为这里我想与之前的案例呈现出不一样的感觉，所以我们不选择蓝色而选择粉色为主色填充背景，这样画面的感觉就偏女性气质多一些。

然后就是文字，虽然我们没有用蓝色作为主色，但是根据我们的风格定位，这个画面也是需要蓝色的，所以就用蓝色来填充文字。

最后就剩下两个绿色，而这里我们用浅绿色来填充色块，为什么是浅绿色呢？因为我们要考虑文字的识别性，深绿色和蓝色的纯度明度相差不多，所以它们的对比效果就会比较弱。

而白色作为很好的调和色，也并不需要调整。最终的效果怎么样呢？同样这里也是有调整空间的。

首先就是背景色有些偏深了，所以我们减淡背景色，并且在色相上稍微调得偏紫一些，这个颜色的选择是参考了左下角的图片色，并非是平白无故出现的。

然后再看这里的绿色，显得有些脏也就是偏灰，所以我们也可以对绿色进行一下调整让它变亮一些，这样不仅文字的识别性得到了改善，而且也美观了很多。

而文字的识别性虽然得到了改善，但还可以更好，所以加深一下蓝色，那么这个案例到这里就可以了。

最后我们来看一下这两个方案，无论是色调、气质、风格、还是美感都是符合我们前期定位的。但我相信一定有人会有质疑，不是教如何使用在线配色工具吗，怎么到最后又变成人为的调整了，这里当然不是在逗大家玩，因为配色的确就是这样一个复杂思考、反复调整的过程，而不是简单的吸取、填充两步就可以了，所以无论是配色工具，还是提供色彩搭配的网站，顶多也只能作为我们配色的参考，而不能当作是我们配色的全部。

 

本期教程到这里就结束了，感谢大家的观看和支持，如果你认为我们的教程，对你有一点点帮助，那么也请你帮助我们传播给更多的人。我是本期的讲师无我，我们以后见，拜拜。

 

原文地址：
研习设（公众号）

作者：研习设K先生