那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

brandcolors.net

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

那么多在线配色工具,到底怎么用才能秒变高手?

webdesignrankings.com

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

那么多在线配色工具,到底怎么用才能秒变高手?

coolors.co

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

那么多在线配色工具,到底怎么用才能秒变高手?

colordrop.io

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

我相信现在肯定有的人心想「有了这些网站还能不会配色?」下面就让我们用事实说话。

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

然后就是版面中的色块。

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

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

那么多在线配色工具,到底怎么用才能秒变高手?

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

我们就以这个网站为例。

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

那么多在线配色工具,到底怎么用才能秒变高手?

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

欢迎关注研习设的微信公众号:「Yanxishe2017」

那么多在线配色工具,到底怎么用才能秒变高手?

收藏 226
点赞 35

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。