小提示：下面所有图片可以通过「右键」、在新标签中打开图片查看大图！
# 功能特点
通过使用关联配色功能，可以一键对整个设计页面进行高效的更改颜色，同时还提供了各种小功能帮助你更好、更快的进行配色。
# 什么是关联配色？
通过将设计稿里同一个颜色的不同类型的图层、以及不同位置重复出现相同颜色的图层关联到一组。这样我们就能得到多组颜色，通过设定其中一组为主色，其他组为辅助色。 这时候就可以通过配色理论来合理为主辅色分组进行快速填色！
这么做的好处在于，我们可以清晰看到设计稿中用到的颜色以及颜色的关系。 通过插件可以快速、轻松的去应用配色方案。这是跟以往配色工具的最大区别！
# 我们先看下动态图，感受一下是如何轻松更改配色的！
# 界面介绍
在插件中，把鼠标移动到功能按钮上停留一会，就可以看到提示信息
# 开始使用
首先将同样颜色的图层添加到一个分组内，然后就可以一键更改颜色了！
操作步骤
- 添加图层到「分组」
- 选中「分组」，更改颜色即可实时更改组内所有图层颜色
下面会通过简单例子说明如何使用。下载模板演示PSD (opens new window)
# 如何添加分组
操作步骤
- 选中「图层」
- 输入「组名称」，接着「回车」完成添加
小技巧： 不输入名字，点击「添加」按钮可以快速添加
# 演示动图：
# 如何自动分组
通过这个功能可以快速将文档或者选择的图层自动按颜色分组，非常简单方便。
- 支持自动分组的图层类型：文字图层、形状图层、纯色填充图层。
操作步骤
- 在组内容空白处，「右键」打开菜单
- 选择「自动分组当前文档」或者「自动分组选中的图层」
温馨提示： 自动分组当前文档，如果图层过多相对应的时间也会比较长噢
# 演示动图：
# 自动分组当前文档和自动分组选择图层的区别
如果只是调整页面里部分地方的颜色，那么可以只选择那一部分图层，然后使用「自动分组选中的图层」可以快速将图层分组并且方便快速更改颜色
# 如何更改颜色
关联模式下，更改颜色非常简单。点击对应的分组，拖动色相环、调色板或滑块即可实时更改颜色。
- 如下图：小箭头表示是当前选中的分组
操作步骤
- 选中「图层」
- 拖动色相环、调色板、滑块即可更改颜色
# 演示动图：
看到这是不是感觉非常的简单方便呢。
# 主色、辅助色约定
插件内的设定是：第一个组称为「主色」，其他组为「辅助色」， 可以通过拖拽分组来更换「主色」。
# 如何更改主色、辅助色位置
操作步骤
通过点击分组内的「圆圈」，按住不放「上下拖拽」即可更换分组的位置
# 演示动图：
# 如何让单个颜色锁定不被修改
在调整配色的时候，可以将某个满意的颜色锁定，不跟随修改。
操作步骤
- 在「预览色块」或者「分组」上点击「右键」打开菜单
- 选择 锁定 即可
# 如何选择配色方案
在插件中提供里6种配色理论的方案可选、包含有：单色方案、邻近色方案、互补色方案、分割互补色方案、矩形方案、类似色方案。
每种方案的特点如下：
# 单色方案
单色方案指的是使用一种色相，通过调整「明度」和「饱和度」来创造一套不同的配色方案。很容易使你的页面各种元素看起来保持一致！
# 邻近色方案
邻近色指的是在色相上相距不超过45°的颜色，这类配色的优点是统一、视觉比较柔和、容易把控。
# 互补色方案
互补色是指在色环上相对180°的两种颜色，通常色相差异非常的大，能够产生强烈的对比效果。可以通过这一特性来增强画面的吸引力。
# 分割互补色方案
分割互补色方案就是在互补色的基础上，去除其中一个补色，利用该与补色相邻的两个色相形成了分割互补配色
# 矩形方案
这同样是互补色搭配的变体，相比上面的分裂互补色，这种搭配的色彩非常丰富，能使画面产生节奏感。当其中一种色彩作为主要色时，这种搭配表现有不错的效果。在这种搭配中要同时注意色彩冷暖的对比。
# 类似色方案
类似色指的是色相环上90°角内相邻接的颜色，具有丰富的视觉层次感，而且又能比较容易的保持色彩的统一。
# 在实际工作中，我们如何去选择配色方案呢？
大概的思路如下
- 首先需要明确目标
- 确定主色
- 根据目标场景去选择配色方案
如果对配色理论或者这方面不了解的小伙伴，推荐可以看下站酷大佬Jady13_剑杰 (opens new window)写的文章，希望大家也能从中学习到一些心得！ 策略性配色法则 | 配色的正确打开方式 (opens new window)
# 简单应用示例
按照上面的思路，我们假设要传递年轻富有活力的信息。
- 我们先尝试性确定「主色」为蓝色
- 我们选择具有强烈对比的「对比色方案」作为我们辅助色
演示动图：
通过动图可以看到，主色和辅助色是一个对比色的关系，插件强大的地方在于，当你再次改变「主色」时，对应的所有辅助色会按照对比色方案的设定一起跟随主色变化， 并且把对应的图层颜色也进行实时更改。
演示动图：
通过上面的2步可以看到通过插件可以非常轻松的对设计稿进行各种配色的尝试。接下来，将演示如何将普通的颜色添加一些渐变的效果，让色彩不那么单调呢？
# 如何为颜色添加渐变质感
操作步骤
- 选择「图层」，点击「右键」选择「混合选项」
- 勾选「渐变叠加」
- 将渐变颜色设置为「白色到黑色」，并且设置「混合模式」为「叠加」或者「柔光」
演示动图：
# 如何切换自定义方案做调整
操作步骤
- 点击切换「配色方案」按钮，选择「自定义配色方案」
- 如果想要改变主色，辅助色不跟随改变。则点击「主色辅助色关联」按钮进行取消关联！
切换后，就可以随意单独调整单个颜色了
# 关联配色方案
新版本中你可以存储多种配色效果的方案，并且可以轻松的进行切换和修改！
- 方案信息会存储到PSD文件中的。因此不用担心关闭ps后，再次打开没有了分组。
- 每一组方案可以存储不同的图层
# 如何保存方案
操作步骤
- 点击底部菜单的「存储」按钮即可保存当前关联分组到新方案
演示动图：
# 如何查看方案列表及切换方案
操作步骤
- 点击左下角按钮可查看方案列表
- 点击对应方案名字可切换方案，切换的同时会把方案内的分组重新填充颜色
- 点击空白处，可以隐藏方案列表
# 演示动图：
# 如何借鉴优秀作品配色
插件支持提取图片的配色，并且能够一键改色
两种方式
- 将图片文件「拖入插件面板」
- 在ps中，选择图片图层，点击功能菜单里的「提取图片配色」功能
# 演示动图：
演示海报来源网络，如有侵权请联系我们删除
# 应用在线配色库或者调色板仓库的颜色
可以通过使用我们提供的「在线配色库」或者用户自己存储的配色进行配色。
两种2方式
- 在「顶部菜单」，选择「在线配色库」或者「调色板仓库」面板
- 在颜色组「右键」，在弹出的菜单点击「应用到关联配色」即可
# 演示动图：
# 如何同步主色、辅助色的饱和度和亮度
在功能栏处，勾选「统一亮度」和「统一饱和度后」，改变任何一个分组的颜色，都会自动同步饱和度和亮度！
# 更多实践例子
想要了解更多使用案例，点击查看视频讲解示例！ (opens new window)