如何制定产品主色 ？试试超容易上手的色彩理论取色法
从零做一款产品的何制时候 ，需要制定产品的定产的色主色 。怎么制定呢 ？品主
"归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系" ，这是色试试超上手色法很多文章里面归纳出来的几步 ，使用的容易时候也有理论依据 。但我想说点不一样的彩理。在这个时代 ，何制产品五花八门 ，定产的色想用哪一类别的品主产品一搜一大把 ，在七麦数据搜索购物类的色试试超上手色法 APP 榜单 ，光第一页单榜就有 200 多个。容易
我们模糊一下这张图 ，你会发现 APP 最终记忆点是何制色彩。
换做在手机看也是一样的 ，打开你的品主 APP 列表 ，快速往下滑去找一个 APP ，你会发现它们最终只剩下色彩——"我想找爱奇艺 ，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是"。当然 ，这只是拿来举例 ，通常你不需要这样去找一个APP 。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括 ，是一种态度 ，甚至是你趁手的兵器 。
所以当你去确定产品主色的时候 ，有三种思路 ：随大众；反着来；搞特殊 。
随大众
不同的行业发展至今 ，已经自带色相了。比如电商购物是红黄色 、医疗健康是蓝绿色 、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路 。
反着来
使用和竞品色相相差大于 90 度（中差色 、对比色、互补色）的，差别较大的就是反着来 。这是逆向思维 ，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来 。
搞特殊
抖音和 keep 是我心中搞特殊的 top ，既不使用行业相同的色相，也不使用相反的色相 ，而是双色相或双色相叠加。
用我做的小易 APP 来做例子说一下制定色系的过程吧
- 基于行业与场景确认色相
- 色相偏移
- WCAG 标准验证颜色
- 色系拓展
基于行业与场景确认色相
小易是一款助力销售的 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
从零做一款产品的何制时候 ，需要制定产品的定产的色主色 。怎么制定呢 ？品主
"归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系" ，这是色试试超上手色法很多文章里面归纳出来的几步 ，使用的容易时候也有理论依据 。但我想说点不一样的彩理。在这个时代 ，何制产品五花八门 ，定产的色想用哪一类别的品主产品一搜一大把 ，在七麦数据搜索购物类的色试试超上手色法 APP 榜单 ，光第一页单榜就有 200 多个。容易
我们模糊一下这张图 ，你会发现 APP 最终记忆点是何制色彩。
换做在手机看也是一样的 ，打开你的品主 APP 列表 ，快速往下滑去找一个 APP ，你会发现它们最终只剩下色彩——"我想找爱奇艺 ，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是"。当然 ，这只是拿来举例 ，通常你不需要这样去找一个APP 。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括 ，是一种态度 ，甚至是你趁手的兵器 。
所以当你去确定产品主色的时候 ，有三种思路 ：随大众；反着来；搞特殊 。
随大众
不同的行业发展至今 ，已经自带色相了。比如电商购物是红黄色 、医疗健康是蓝绿色 、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路 。
反着来
使用和竞品色相相差大于 90 度（中差色 、对比色、互补色）的，差别较大的就是反着来 。这是逆向思维 ，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来 。
搞特殊
抖音和 keep 是我心中搞特殊的 top ，既不使用行业相同的色相，也不使用相反的色相 ，而是双色相或双色相叠加。
用我做的小易 APP 来做例子说一下制定色系的过程吧
- 基于行业与场景确认色相
- 色相偏移
- WCAG 标准验证颜色
- 色系拓展
基于行业与场景确认色相
小易是一款助力销售的 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
