科学的系统配色学这招-终身受用

色彩是我们感知世界的重要媒介，在设计中仅次于功能的另一要素。色彩与我们的生活息息相关，怎样科学配色、灵活用色成了绝大部分设计师的难题。

作为一名拥有多年拧螺丝经验的设计师，不免每天都会和色彩打交道，在配色的过程中，你是否也曾遇到过以下困扰：每次做项目随便吸色？

盲目运用色卡？

配色总是看起来不舒服？

色感差，天天被老板和同事Diss？

…

接下来，请你花几分钟看看谷歌等其他大厂，都在用的系统配色方案。以下以船长BI为例，做品牌色彩的规范引导。

船长BI：
深圳船奇科技有限公司-是中国专业的跨境电商SAAS系统服务企业。旗下船长BI，专注亚马逊精细化运营与大数据分析，为不同阶段、不同规模的企业提供全场景多维度分析，一站式精准推广和全链路供应链协同管理，帮助企业实现数智化运营。同是船奇科技也是亚马逊SPN服务商。

01

科学的系统配色

1-1 设计主张

船长BI系统是亚马逊精准化运营及大数据下钻分析的高效化共同体。从单功能运作到多功能融合，再到大数据多元化产品下钻、闭环及溯源，打破了亚马逊跨境运营服务商单点运作的局限。我们希望新的品牌色，能够为船长BI在跨境企业中营造更加权威、高效向数智化转型的视觉感知。

船长BI 设计语言：英文Captain BI Design Language简称CapDesign。

经过团队的诸多调研到佐证,我们将品牌标准色太平洋蓝(Pacific Blue)，升级为更加科学、权威、智略的明亮立体的黑绿松石色(Dark Turquoise)。黑绿松石色在跨境电商行业中具有更多神秘的数智化意味，在实际应用中隐含着更多的生机和信任，表明了船长对进入数智化运营新挑战的气魄。同时，品牌色的升级能够快速区别于竞品，形成船长BI独特的色彩感知，通过色彩感知形成品牌记忆。

色彩命名源自潘通Pantone。​

1-2 创建调色板

人的视觉系统在辨别颜色时，不会把色光分解成RGB或者CMYK几种单独颜色，而是按照色相度、纯度和明度来判断的，也就是HSB。HSB模式可以完美固定HSB中的某一个参数，只对其他两个参数做改变或者只改动其中的一个参数，符合人对色彩差异幅度的感知，而RGB、CMYK都是牵一发动全身的节奏。↗

我们以CapDesign品牌基准色#2AC5D4（H=185\ S=80\ B=83) 为起始点，S饱和度、B明度保持不变，H色相以185°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。

02

拓展丰富的辅助色

2-1 以邻近色、互补色、对比色为原则，选择绚丽多彩的辅助色↗

为了保有更多CapDesign 的品牌基调，我们选择了相对较多的邻近色，以保证整体色韵的清爽感和数智科技化意味。并利用对比色及互补色扩展色相，选择更加丰富多元的辅助色，使其色相对比鲜明，以保证能色彩够满足各种复杂场景。

Q：色相位到底选择多少个合适？
A：有的产品选择7个色相位，有的产品选择10几个色相位，都是允许的，选择的依据取决于：
1.色彩对比明显，选择色相数少；色彩对比柔和，选择色相数多；
2.产品功能的场景简单，选择色相数少；产品功能的场景复杂，选择色相数多；

Captain BI 是亚马逊运营与大数据集成，功能交叉比对及数据可视场景复杂，为迎合业务发展需要，CapColor选择的色相位为13个。

2-2 校正辅助色(波长和振幅)

虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于每个色相的波长各不相同，导致色彩在感官感受上存在差异。

在可见光波谱当中，波长越长其穿透力就越强；红色的波长是最长，穿透力就最强，感知度最高。↗

为了让不同色相在视觉感官上看起来更加协调，需要对色板的明度和饱和度进行反复的校验，以保证视觉感官更加和谐舒适。

校正原则
A.色相最好维系在同类色(色相环中15°夹角内的颜色)↗
B.色相感官保持平衡(明度和饱和度)
C.保证视障群体的识别度(WCAG 对比度)
调色的技巧
浅灰色调: 饱和度减少(S↓)，明度增加(B↑)
深色色调: 饱和度减少(S↑)，明度增加(B↓)

使用HSB调色模式时，可以参考以上规律，能让快速调和想要的颜色。校正后得到了以下色域清晰、对比明显的主色及辅助色。并且针对视障群体进行了色彩测试。

2-3 拓展梯度色谱
校正主色和辅助色后，我们需建立完整的梯度色板，来满足不同场景下颜色的应用。建立色彩层级，以提升品牌感知，达到信息传达辨识、强化界面层级等作用。

在梯度色板系统中，很多配色产品都是使用Tints and shades系统：通过在原有色相的基础上增加白色或者增加黑色，来改变它的明度和饱和度，形成梯度色板。但这种方法得到的调色板往往比较刻板生硬。CapColor在Material Design-Color的基础上进行了细化，构建更有层次感、空间感、立体感的梯度色板。

CapColor梯度色板：

1.在Primary的基础上，使用Tints and shades系统找到Light和Dark：

Light=(White+primary) 95%叠色；
Dark=Black 60%叠色；
Primary=原色相。

2.结合Material Design-Color实践，得到CapDesign梯度色板及相应的参数。

CapColor选择10阶梯度，对比稳健，更能凸显船长系列产品权威和成熟的形象；9阶梯度相对生硬跳跃，12阶梯度过于柔和平滑。

有的色相穿透性强、饱和度高，所以还需要进一步的校验，如蓝色 RYB：

运用以上的方法，得到CapDesign丰富的调色板，为后期业务做支撑：

03

易用的中性灰色

Captain BI系统大部分是由容器、面板、列表、卡片等其他组件及元素构成。中性色为系统锐化布局、表达边界、建立信息层次起到决定性作用。

3-1 中性色

中性色的搭建同时满足暗黑模式、换肤及印刷等诸多场景，故在实现时按照透明度的呈现方式。

3-2 黑绿松石灰色

中性黑绿松石灰色解决更多复杂的场景，如表格和表单双底色、图标的颜色等。中性黑绿松石灰色增强布局、区别背景，起到强化信息层次的作用。

黑绿松石灰在中性灰色的基础上增加色相和饱和度，这样得到的蓝灰色还是有些许生硬，还需要对饱和度和明度进行微调，让颜色更有层次感。

中性黑绿松石灰的方法：

在配色模式HSB中：
H=185(Brand Color)；
S=3(必要时微调)；
B=保持不变。

3-3 WCAG 2.1测试

为保证视障用户的使用，保证足够的对比度，CapDesign 遵守 WCAG 2.1 的标准，对调色板对比度进行了可用性测试，为后期灵活用色奠定基础。以中性灰色为例：

WCAG 2.1中规范了A、AA、AAA的对比值范围及使用场景，感兴趣的朋友可以前往WCAG 2.1官网详细了解，在这不在赘述。

3-4 场景案列

实践是检验真理的唯一标准，以下通表格的微交互对中性色进行完美的诠释：左边的表头和表格背景粘连到一起，视觉及信息识别困难。通过交叉运用中性灰色，明显右边的表格结构、信息层级得到强化，视觉更聚焦。

结语

主观情感的取色，一开始可能没遇到什么大问题，但随着产品不断完善，主观取色往往不能满足业务发展诉求。科学的系统配色，真正满足和服务设计；同时对设计一致性及提升团队效率起到肯定的作用。

通过这个漫长的配色过程，你是否重新审视过去设计中的配色方法？希望对配色困扰的你有所帮助。

色彩系统中的系统配色部分已经完成，接下来我们将死熬，续更系统配色在实际项目中的应用，做到科学配色、灵活用色。

参考文档：
腾讯文档-构建科学的色彩系统
Material Design-color
WCAG 2.1
图片来源:
来源网络,如有侵权联系删除