前言 / Preface

色彩在产品中承担着传递信息、引导操作、品牌价值的重任，因此一套严谨的选色方法也就成了重中之重，而实际情况中，很多时候都是从色彩面板中凭着直觉去挑选颜色（以前的我），在设计完成后，又总是对配色不满意，却又无从下手，近期小总结，基于 H（色相）S（饱和度）B（明度）色彩模型进行选色配色。

色彩类型 / Color type

产品中的色彩部分都必然包含三种类型：主色、辅助色、中性色。

主色是辅助色和中性色产生的基础条件。

品牌色 / Brand color

品牌色是建立用户心智的重要组成部分，因此品牌色的选择离不开设计目标，通过设计目标衍生情绪关键词，再通过情绪去确定一个大致的色彩范围。

为了得到更理想的颜色，我们围绕产品特性、颜色应用、颜色规律，找寻符合设计目标的颜色，进一步精确取色区间。

1.产品特性与颜色应用

结合产品特性与颜色应用，产品中主色占比小，色彩丰富程度低符合设计目标。

2.颜色规律

色彩情绪中，颜色的饱和度越高，情绪表达越强烈，也越容易让用户情绪紧绷，且在没有其他颜色对冲的情况下，更容易视觉疲劳。

综上所述，对所选区间的颜色进行比对（调整每个颜色的 S 值与 B 值以及透明度），发现 180-210 之间的颜色情绪表达不够且识别度不够， 225-240 之间的颜色情绪与原定关键词不匹配， 而 H 值在215-220 之间的颜色符合我们的设计目标。

最后在此区间调整其 HSB 值，主要调整 S 值与 B 值，确定最终颜色。

围绕着设计目标，专注、速度、轻快等等这些关键词正式在诠释「效率」的概念。

辅助色 / Auxiliary color

辅助色的选择基于主色的定义，可通过 24 色相环进行筛选，即固定主色的 S 值和 B 值，改变 H 值。

中性色 / Neutral color

由于产品本身的特性（文字信息多），且产品整体配色方案中，色彩占比小，因此为了提高视觉体验，将品牌色融入中性色。

新色彩 / new colors

最后说一些话：

接触B端半年多，从开始不停的做功能堆叠，到后面注重体验、塑造品牌，我们团队踩过很多坑，也得到过用户的认可，团队中的伙伴除了是工作上的搭档，也是生活中的朋友，因此我们创建了一个公众号 —— Bstation ，将我们正在做的 B 端互联网产品那些事记录下来，我们宗旨就是就算这个功能甚至这个产品做的多差，我们都要把东西记录下来，就是这么爱折腾的一群人，下方是公众号原文↓