我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

配色方案工具网站paletton,如何使用?如何才能获得更好更搭配的配色方案?网上吹上天的设计神器paletton是否名副其实?paletton是否真的是设计师的灵感来源?如何才能获得设计配色方案?

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - paletton
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-1)

大家好,这里是苏南大叔的"程序如此灵动"博客,这里介绍苏南大叔和计算机代码的故事。本文带来的一个配色参考的工具网站,具有一定的参考价值。测试环境:chrome@101.0.4951.41

网站地址

paletton网站地址如下:

估计是个捷克人的作品,因为站点的工具语言选项,就两个。一个是英文一个是捷克文。

该工具大体上分为左右两个部分,左侧部分又分为colorspresets两部分。右侧分为previewexamples以及color tables三个部分。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 左侧面板
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-2)

大体上来说,常用的就是左侧colors和右侧的preview两个面板。

  • presets就是预设的colors组合。
  • examples就是选好的colors的效果图演示(但是国内网络好像打不开)。
  • color tables就是讯号的颜色的调色盘列表展示。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 右侧面板
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-3)

主要的操作区域是colors面板,左侧选色,右侧preview面板看效果。

  • 第一排就可以理解为选几个颜色,颜色之间的关系。
  • 左侧的colorsHue,大概理解为角度,实际上就是标准颜色点的位置(角度)。
  • 而左侧的colorsdist,就可以理解为其它颜色和标准色之间的位置(角度)。
  • 大圆盘外侧就是选颜色的主副基调的,影响上述的Huedist值。
  • 大圆盘内侧就是影响上述主副基调色彩的背景色,体现在右侧的明暗变化。可以按住shift单独调整某个小圆点。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 左侧面板操作区
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-4)

单色模式 Monochromatic

  • 默认为1-color,就是从左侧选个颜色,右侧就会显示对应的颜色的效果。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第一行第一个图标
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-5)

  • 还可以选择显示一个补色,这个时候就是2-colors模式。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第一行第一个图标2
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-6)

三相邻色模式 adjacent colors

  • 默认为3-colors,左侧出三个主副颜色。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第二个图标
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-7)

  • 勾选补色的话,就是4-colors模式。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第二个图标状态2
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-8)

三色模式 triad colors

  • 三色模式和三临色模式的区别,就是三个颜色之间的偏差角度,角度小的时候就自动变成邻色模式。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第三个图标
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-9)

  • 一样,也可以选择显示一个补色。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第三个图标状态2
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-10)

四色模式 teriad

两原色,两补色。原色和补色之间有对应角度关系。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第四个图标
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-11)

自由四色模式 freestyle

就是在原来的四色模式中,删除其之间的平衡对应关系。可以按住shift键自由移动小圆点。选择自己喜欢的颜色。

苏南大叔:配色参考方案工具 paletton 如何使用?颜色创意灵感工具 - 第五个图标自由角度
配色参考方案工具 paletton 如何使用?颜色创意灵感工具(图12-12)

相关文档

综述

苏南大叔可不是啥设计师,做出的页面就是属于自嗨型的,自己觉得不错而已,颜色搭配的就是不好。这个工具就是给大家颜色参考,如何配色才会显得更好看一些。苏南大叔表示难以理解,还是photoshop更加实用一些。这个工具还有其它的功能,不过对于苏南大叔来说,就是显示个配色的功能效果。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   photoshop