如何制定产品主色？试试超容易上手的色彩理论取色法

从零开始制作产品时，需要制定产品的主色。如何制定？

“总结产品的特点和概念——提取关键词—建立情感版本——选择颜色阶段——制定颜色系统”，这是许多文章中总结的几个步骤，在使用时也有理论依据。但我想说一些不同的事情。在这个时代，有各种各样的产品。你想搜索很多你想使用的产品，并在七麦数据中搜索购物类别 APP 只有第一页就有榜单。 200 多个。

如果我们模糊这张照片，你会发现 APP 最后的记忆点是颜色。

手机也一样，打开你的 APP 列表，快速向下滑去找一个 APP，你会发现它们最终只剩下颜色——“我想找到爱奇艺，它在我的记忆中是绿色的，而不是刚刚快速滑动的红色和黄色。”当然，这只是一个例子，通常你不需要找到一个应用程序。使用这个例子只是想强调应用程序主要颜色的意义——它是不同于竞争产品的第一个特征，是调性总结，是一种态度，甚至是你的武器。

因此，当你去确定产品的主色调时，有三种想法：跟随大众；反之亦然；特别。

随大众

到目前为止，不同的行业已经有了自己的色调。例如，电子商务购物是红色和黄色，医疗健康是蓝绿色，商业是蓝色...假如我们每次都用产品或行业特征来推导色相，大部分都是第一个想法。

反着来

与竞品的相差大于使用与竞品的相差 90 度(中差色、对比色、互补色)，差别大的就是反过来。这是逆向思维，可以让你跳出一堆颜色同质化的竞争产品。

搞特殊

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

用我做的小易 APP 让我们举个例子，谈谈制定色系的过程

色相基于行业和场景的确认

小易是一种帮助销售的方式 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/#23F74A-on-white

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

color review：https://color.review

我在白色背景下选择的蓝色对比值是 黑色背景为3.9 5.2，在正常范围内。事实上，小易 APP 很可能没有夜间模式，因为需要投入更多的开发资源，浅色模式也不是不可用的。在这个考虑下，你可以抛开黑色背景，但话说回来，准备总是正确的。

色系拓展

色系扩展需要扩展两种类型：中性色和辅助色。

中性色比较简单，先说吧。我已经选择了#1b7aff作为前面的主色，打开拾色器，将明度调整为 10%可以得到深蓝色。用这个作为界面中性色最深的颜色，叠加白色(白色透明度为 10%作为基础依次递减)，得到中性色板。

我读过很多写得很好的文章，相关的参考链接会放在文章的末尾。以下四种颜色选择理念是基于它们的归纳，添加一些其他角度来选择辅助颜色系统。

看到这里，你也应该找到规则：

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

并根据目的选择搭配，就像绘画一样。如果你想要一个和谐的画面，就不要有多组互补的颜色。当图片中有一组互补的颜色时，取两者之间的颜色来说服框架，以达到和谐的目的。如果你想要一个强大的图片冲击，那就相反了。基于这样的颜色理论，我们可以在界面上匹配颜色系统而不犯错误。

我的选色

希望颜色能有更细腻的色调变化，于是我就按照色环来做 10 程度作为基准细化。在选择互补辅助颜色时，我没有选择正确的互补颜色，而是偏移了 10 度。从黄色到绿色的亮度都很高，所以我的颜色选择更偏向右边。以这六种颜色作为小易的基本颜色，微调饱和度稍微降低了黑白灰色的差异。

参考文章：

授权 W3G 网页无障碍指南(WCAG2.1）翻译版

优设态爷手绘改进班的色彩内容(课程链接)

欢迎关注作者微信微信官方账号:「牙线y2x」