从零做一款产品的何制时候，需要制定产品的定产的色主色 。怎么制定呢？品主

"归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系"，这是色试试超上手色法很多文章里面归纳出来的几步，使用的容易时候也有理论依据。但我想说点不一样的彩理。在这个时代，何制产品五花八门，定产的色想用哪一类别的品主产品一搜一大把，在七麦数据搜索购物类的色试试超上手色法 APP 榜单，光第一页单榜就有 200 多个。容易

我们模糊一下这张图 ，你会发现 APP 最终记忆点是何制色彩。

换做在手机看也是一样的 ，打开你的品主 APP 列表 ，快速往下滑去找一个 APP，你会发现它们最终只剩下色彩——"我想找爱奇艺，它在我记忆中是绿色的 ，刚才快速滑过的红色黄色都不是" 。当然
 ，这只是拿来举例 ，通常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征 ，是调性概括 ，是一种态度 ，甚至是你趁手的兵器。

所以当你去确定产品主色的时候
，有三种思路 ：随大众；反着来；搞特殊。

随大众

不同的行业发展至今，已经自带色相了 。比如电商购物是红黄色 、医疗健康是蓝绿色 、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相
，出来的大多数都是第一种思路。

反着来

使用和竞品色相相差大于 90 度（中差色
、对比色、互补色）的 ，差别较大的就是反着来 。这是逆向思维，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来 。

搞特殊

抖音和 keep 是我心中搞特殊的 top，既不使用行业相同的色相，也不使用相反的色相，而是双色相或双色相叠加 。

用我做的小易 APP 来做例子说一下制定色系的过程吧

1. 基于行业与场景确认色相
2. 色相偏移
3. WCAG 标准验证颜色
4. 色系拓展

基于行业与场景确认色相

小易是一款助力销售的 CRM 产品，主打销售智能化 。取色就要看你立足点是"数据智能"还是"销售"了。与数据智能相关的绕不开蓝绿色，与销售系统相关的绕不开橙色。这个产品是内部定制化的 ，不存在有竞品的情况 ，因此随大众更容易取得方案的通过 。为免出现"这个颜色一点都不科技和智能"的质疑和返工，我非常科学（识相）地选择了蓝色作为主要色相。

色相偏移

用 HSB 参数来看，正蓝色的 H 值（色相）是 240。引用优设大课堂态爷的一句话是
：要想颜色好看，色相别太正
。那么正蓝色就要偏移
：往冷色偏移或者往暖色偏移。

这里加入一个空间的概念 ：假设产品是一个空间，里面主打智能和数据 ，我设定了大环境偏冷光
，所以里面的物体会受冷光的影响。

在冷光环境下
，蓝色的色相受环境影响 ，会往冷色偏移 。色相偏移 15 度是同类色，偏移 45 度是近似色。我在两者之间取了中间值，约 25 度
。对市面上的产品取色进行研究的时候，会发现它们的色值一般在拾色器九宫格的右上格
，所以 S 值（饱和度）的取值范围大致在 77%-100%之间
，我取了中间偏下的值 89%。B 值（明度）一般为 100%
，除了黄绿色相本身明度偏高，则会适当降低明度 。

WCAG 标准验证颜色

WCAG 是网页无障碍指南其中关于颜色的使用标准，简单来说就是色彩要在页面中达到一定的对比度
，才能让人看清 。WCAG 用色标准中普通文本与背景对比度不低于 4.5：1，那么对于高亮文字颜色（通常是产品主色）是不是也需要达到这个标准呢 。我用几个 APP 进行了测试，下列 APP 的对比度在白色页面中范围是 2.3-4.5 。

我估计原因有二，一是饱和度太高有点太艳了 ，二是现在很多 APP 都有暗夜模式 ，观察这张图上的 APP 颜色情况 ，可以发现一个颜色在白色背景对比度越低
，在黑色背景对比度就越高。且高亮文字使用的频次相比文本文字少，多数伴随色块按钮使用，所以 3-4 是较合适的对比值范围 。

有个快速计算对比度的网页很好用，输入色值就可以得出结果 。

contrast ratio ：https://contrast-ratio.com/#%23FF784A-on-white

还有个网站会更直观 ，输入色值后下面还有网页例子预览效果。

color review 
：https://color.review

我选择的蓝色对比值在白色背景是 3.9，黑色背景是 5.2 ，在正常范围内 。其实小易 APP 大概率不会有暗夜模式，因为需要投入更多的开发资源，浅色模式也不是不能用
。在这个考量下 
，可以抛开黑色背景不考虑，但是话又说回来 ，做好准备总是没错的 。

色系拓展

色系拓展需要拓展两类 ：中性色和辅助色 。

中性色相对来说比较简单 ，所以放在前面先讲
。前面我已经选定主色是#1b7aff，打开拾色器，将明度调为 10%，就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色 ，叠加白色（白色的透明度以 10%作为基础依次递减），得出中性色的色板。

我看过很多写得不错的文章，文末会放相关参考的链接。下面的四种选色思路，是根据他们的归纳为基础 ，加入一点其它的角度来进行辅助色系的选定 。

看到这里你应该也发现规律了：

选色离不开色彩的理论知识
 。在理论的基础上不断尝试搭配，组合出不一样的色板 。

而且要基于目的来选择搭配 ，跟画画一样 。如果想要画面和谐 ，就不要出现多组互补色 。画面中有一组互补色时，要取两者中间的颜色来劝架 
，以达到和谐的目的。如果希望画面冲击力强 ，则相反 。基于这样的色彩理论
 ，可以让我们不出错且有依据地搭配出界面的色系。

我的选色

我希望颜色能有更细腻的色相变化，所以我把色环按照 10 度作为基准细化。选择互补辅助色的时候，我没有选正互补色，偏移了 10 度 。从黄色到绿色的亮度都很高 ，所以我的选色更多偏右边 。以选取的这六种颜色作为小易的基础色 ，微调饱和度稍微降低色彩的黑白灰差值 。

参考文章
：

如何科学地建立色彩体系
？我总结了这5个方面！

如何抛弃惯性思维，重新定义一款产品的主色
？

授权 W3G 文档，网页无障碍指南（WCAG2.1）翻译版

优设态爷手绘提高班关于色彩的内容

作者 ：牙线y2x