设计先锋小编今天分享一款配色神器——Paletton,不仅能运用配色原理快速生成色卡,更能将所配色放入实例中预览,帮你快速确定色彩效果。小编将从配色方案生成和调整、实例预览、色卡保存三个模块来讲解,一起来学习吧。
打开网页是这样的
一、配色方案生成和调整
Paletton根据色彩设计理论,提供了单色、互补色、相邻色、三色调以及四色调最实用的几种配色方法,满足各种配色需求~、
点击「互补(补充)」的小按钮,即可为配色添加一个互补色。
用鼠标拖动光标,也可以改变配色效果。
如果想细节调整内环每个取色点饱和度、亮度、对比度的话,按住shift键拖动取色点即可。
除此以外,我们还可以在色环的右下方点击「Fine Tune」微调。
点击下方的「PRESETS」,更有一整套配色效果的色卡提供
旁边的色板也是很直观,主色跟辅助色的占比都很详细。
当鼠标滑到相应的色块,还会有相应RGB数值出现,点击后有更仔细的色彩分析。
更有不同的预览方式(比如)
唔~这感觉!像极了爱情!
二、实例预览
首先是右下角的「Vision simulation」
方便测试配色在色盲模式或者Web模式时的显色效果
每种模拟效果都有很多细节的参数选择
是不是已经被视觉模拟震撼到了?那你可就小瞧我们神器小分队了。
把你的小手拖动鼠标,移到「EXAMPLEAS」~
这才是真正的令人欲罢不能的功能——实例演示。
这个功能将你选取的配色方案在实例中展示,而且还能自动生成白天/夜晚模式网页页面的不同的配色效果。
除了网页配色效果以外,更支持不同的插画效果配色预览
三、色卡保存
点击右下角的「Table&Export」,即可生成色板
可以说是非常贴心了有木有!
不仅能作为png保存,更能直接导入PS和Sketch的色板使用~
最后,如果颜色都不喜欢在右上角还有随机。如果一不小心碰歪颜色的话也可以选择重制和撤销。
Paletton配色有理论和具体的参数可循,更有非常方便的实例模拟,大大降低了设计中反复更换配色的时间成本,帮你用更快的时间,完成最棒的设计!
推荐阅读》《干货分享!渐变色的表现形式》《13个让你灵感迸发的配色网站,设计师必备!》《设计神器 Colorffy!UI配色及效果预览网站》