长城上的猫

作为一名设计师,我们无时无刻不在跟色彩打交道,配色既是基础能力,也是核心能力。色彩也是最敏感的视觉感官元素之一,不管设计技法如何,用户看到作品最直观的第一感受通过色彩传递的。

 

前言

合理的色彩搭配是成就优秀作品的必要条件,我之前也写过很多篇关于配色的文章,有兴趣的同学可以翻一翻。

这篇文章我不讲理论,只希望配色做不好的同学,能学会借助工具解决工作中的配色难题。

下面我就为大家推荐5个实用的配色工具,朴实无华的5招,帮你搞定工作中的配色难题。会详细到每个功能的介绍、如何使用、侧重点是什么等等。

补充:因为都是国外网站,如果你英语水平跟我一样差,可以下载一个网页翻译的插件,轻松一点英文秒变中文。

 

一、Adobe Color CC

网站:https://color.adobe.com

Adobe官方出品的配色工具,也是我在刚接触设计时常用的配色网站,支持RGB、CMYK、HSB等多种色彩模式,并且也支持多种配色规则,比如:类比、单色、补色、分割补色等等。

图片

 

使用起来很简单,选定色彩调和规则之后,转动色相轮上的调整锚点,就会出现统一色彩调和规则下的多种配色形式。

图片

 

另外,每个色彩下方都会有对应的属性,并且每个属性都可以通过拖动圆球进行手动调节。

图片

 

所以,在工作中当你只能确定一个主色的情况下,我们可以将其设定为基色,通过手动调整的方式,让系统自动生成配色方案,这在工作中很实用的。

图片

 

还有一个功能很好用,就是从图片中提取色彩的功能,叫做提取主题。

图片

 

当我们看到一张很美的照片或者是想要参考别人作品的色彩时,就可以通过这个功能提取色彩。

图片

 

可以根据图片中的色彩属性进行提取,比如:彩色、亮色、柔和、深色等等,官方叫做使用色彩情景提取。

图片

 

提取主体初始默认是系统自动选取图片中的关键色彩,当然可以手动选择图片中你想要色颜色,是不是特别方便?

另外不仅可以提取纯色,还可以提取渐变色。

图片

 

跟提取纯色差不多,也可以进行手动选取你想要的颜色,同时也可以手动设置渐变色标的数量。

图片

 

还有一些好玩的功能,比如:色彩游戏、对比检查器等等,大家可以去看看效果,都试一下。

 

二、Colourco

网站:https://colourco.de

一个很有意思的线上配色网站,可以根据自己的喜好自由的进行颜色搭配,在调色板内范围内滑动鼠标,颜色就会随之发生变化,想要哪个颜色,鼠标左键点一下就可以锁定,以此类推。

图片

 

它还有很多实用的色彩调和规则,比如:单色、单色和深灰色、类比、四边形。类比与补等等。

图片

 

有了这些色彩调和规则之后,在选定一个色彩调和规则后,你同样可以通过鼠标在调色板范围内移动改变色彩,直到选定之后,点击鼠标左键锁定。

图片

 

如果你感觉调色板数量不够,可以通过页面右侧的“+”号键进行添加。

另外也可以通过手动调整中间颜色的属性和参数,在选定的的色彩调和规则下系统自动生成最优的色彩搭配方案。

图片

 

这与Adobe Color CC网站中的比较相似。

 

三、WebGradients

网站:https://webgradients.com

这是一个主要做渐变色的配色网站,网站内有180种渐变配色方案,整体风格都偏柔和、舒服自然,方案质量很高。

并且支持在线预览、PNG格式下载以及生成CSS代码等等。

图片

与其他配色网站的不同在于:无法手动调整、自由变换,没有过多的操作,从180中渐变配色方案中选择你想要的即可。

图片

 

下面是我随机挑选的几个,确实很漂亮。

图片
图片
图片

 

所以在工作中,当你想用渐变色又没有适合方案的时候,不妨来这个网站看看,也许会有意外收获。
 

四、ColorSupply

网站:https://colorsupplyyy.com
一个做在线配色方案分享的网站,收录了很多来自世界各地优秀设计师的色彩搭配方案,号称设计师和插画师的颜色选择器。
相比其他配色网站来说,它更加立体、直观、有特色。
图片

 

它也支持多种色彩调和规则,不仅有类似、补充、三合会、分裂补等等比较常见的色彩调和方式,还有新鲜的、漫画、自然、丰富的、画家等实用又特别的,可以说是面面俱到。
图片

 

相比其他网站来说,它还有更神奇的功能,就是支持配色方案的实际效果预览。让你实时看到每一个方案运用到工作中是什么样的。
图片

 

它还支持在线预览不同配色方案下的平铺图案、可直接复制的色值卡以及渐变色的实际效果。
图片

 

另外,进入“十六进制匹配”功能,你也可以手动属于一个颜色属性,系统就会帮你生成优质的配色方案,同样也支持方案的实际效果预览。

 

五、ColorSupply

网站:https://www.palettable.io
相比前面几个配色网站来说,这个网站更加简单、好玩一些。有点像一些手机交友APP,你只需要选择喜欢或不喜欢即可。
图片

 

当我们确定好第一个色彩属性之后,系统就会帮我们生成搭配方案,这时你感觉合适的就选择喜欢,不合适的就点不喜欢。
图片

 

以此类推,直至确定最终方案后,点击出口按钮,可以导出PNG格式的色卡。
图片

 

其实每一个系统帮你推荐的颜色,都不是随意随机的,而是使用数百万设计师的知识生成漂亮的调色板,都是有理论依据的。
以上就是我为大家推荐的五个实用的配色网站,每一个都有其独特之处,几乎涵盖了工作中的方方面面。
 
合理的色彩搭配对于设计作品来说往往能起到1+1>2的效果,反之也会将一个整体都还不错的作品毁掉。
所以当我们在工作中对于配色没想法时,不要去闷头苦想,不妨借助这些配色工具帮助你快速找到合适方案,做的多了、接触的多了,自然而然就会提升你的配色功底。 

 

原文地址:美工美邦(公众号)

作者:老张 

图片

 

转载请注明:学UI网 » 5招!帮你搞定配色难题!

登录收藏
 
你可能喜欢的:
单色配色你真的会用吗?(实操篇)单色配色你真的会用吗?(实操篇)
单色配色也能玩出这么多花样?单色配色也能玩出这么多花样?
详解|交互设计中的色彩搭配,这样更有效!详解|交互设计中的色彩搭配,这样更有效!
如何通过改变色彩搭配让你的设计变时尚?如何通过改变色彩搭配让你的设计变时尚?
这6种高级黑配色套路,太绝了!这6种高级黑配色套路,太绝了!
配色看起来总是不舒服?用这个科学的配色方法!配色看起来总是不舒服?用这个科学的配色方法!
原创 | 双色调设计怎么做?原创 | 双色调设计怎么做?
这样做设计,可太香了~这样做设计,可太香了~
设计系统指南——搭建你的专属色彩系统设计系统指南——搭建你的专属色彩系统
你还在枯燥乏味的介绍你的配色吗,来看看这篇色彩小知识吧~你还在枯燥乏味的介绍你的配色吗,来看看这篇色彩小知识吧~