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

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

2019/02/02 7026评论 9

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

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

brandcolors.net

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

webdesignrankings.com

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

coolors.co

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

colordrop.io

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

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

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

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

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

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

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

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

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

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

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

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

然后就是版面中的色块。

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

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

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

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

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

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

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

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

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

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

我们就以这个网站为例。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.yntianxiong.cn/use-the-online-color-matching-tool

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 设计趋势 海报设计 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里