作为设计师选择合适的颜色，通常是根据设计的特定元素来搭配选择的。但每个人的品味不同。因此，可能会导致颜色选择上出现不一致。尤其出现在多名设计师共同完成一个比较庞杂的项目时，所以设定出一个色彩系统尤为关键，包含主色调，辅助色调及暗色调配色等～接下来就让我们深入探讨一下创建色彩系统的方法吧……

色彩系统设定的3个要素

对于颜色的选择和色彩系统的制定，我们一方面可以借鉴下大公司的设定，例如谷歌和苹果。一方面在设置自己的色彩时，我们就要从色彩应用的场景出发去思考，不要直接具象出一个色值～

1.主色

主色通常是我们的品牌颜色，利用调整不透明度或微渐变就可以得到次要色和辅助色。（渐变幅度不要过大，在同一色域调整即可）这些色值可以用于icon，交互控件以及重点要突出的信息

2.背景色

背景通常分层定义，从而背景色也要划分层次。因此，我们的主背景色始终在底部①，然后是次要背景色②，再是第三级背景色③。

使用“背景”颜色的元素

3.前景色

前景元素的颜色设定主要是文本、分隔符等。也要作出层次变化（例图中它分了5个层次）

其他信息

主色调上的信息颜色多为纯度较高多颜色～

制定系统

主色，背景色，前景色基本已经设定完毕，最后可统一用Web内容无障碍指南（WCAG2.0）来检查一下是否符合标准。

 

这里给大家推荐一篇关于wcag2.0的文章

全色彩系统

加入暗模式

基础的色彩模式设定完毕后，黑暗模式只需要用已有颜色进行重新摆列组合，生成全新的主色 ，前景色 ，背景色即可。（设定规则不变）

在明暗之间切换

 

推荐：Sketch 色彩管理插件

一款很好用的管理色彩系统插件，可在设计中切换明暗模式，只需轻按开关即可更改配色方案。下载插件以开始使用暗模式！

原文作者：Søren Clausen

——————————————————————

以上就是本次译文内容 

喜欢我们的童鞋可以关注我哦~♥