为什么你的配色总是看起来不舒服？如何才能让配色更高级？很多人在设计完成后，总是对配色不满意，却又无从下手。如何分析设计中的配色问题？如何通过系统的方法，提升配色能力？本文带你深入分析配色的正确打开方式，让你从本质上解决不同场景的配色问题，并通过配色提升整体的设计品质。

什么是HSB？

很多设计师通常是使用RGB颜色模式进行调色，我之前也是一样，好看不好看全靠感觉，当了解到HSB这个模式后，就爱上了，而且非常好掌控所以分享给大家；

由于这篇文章的技法是和HSB（色相、饱和度、亮度）挂钩的，所以在这里简单阐述一下。

• H就是“色相”：所谓“色相”，指的就是像红色或者蓝色这些色调的称呼，也就是它们的面相
• 
  
• S是“饱和度”：是指色彩鲜明的程度，比如：“鲜艳的颜色”、“暗沉的颜色”，这种表达方式就是饱和度的意思，按照逻辑那么就是越鲜艳的饱和度就越高，越暗沉的饱和度也就越低。色轮中，无论是哪种颜色，只要它饱和度越低，就一定越接近灰色
• 
  
• B是“亮度”：也就是明度，指色彩的明亮程度，和饱和度一样，也是以高和低表示。亮度最高是白色，相反，最低是黑色

配色技巧

产品的配色若设计合理，除了可以给用户留下深刻印象之外，还可以向用户传递信息、强化品牌印象。而在不同产品的界面设计中，设计师需要依据用户体验、产品需求以及相应的配色理论做出相应方案。网络上关于配色的书籍与理论有很多，但是大多数人可能还是停留在“道理我都懂，手就是不会”的阶段；不要慌，接下来我们把具体的操作流程一一阐述，跟着做就对了～

• 提取24色板
• 筛选色相
• 调整饱和度与亮度
• 渐变色
• 基础用色

（下面是以我们公司品牌色作为案例说明，大家可以根据自己公司的品牌色或者自己喜欢的颜色进行练习，主要目的是为了掌握配色方法）

提取24色板

首先定义一个品牌色，在品牌色的基础上，S和B不变调整，以品牌色的H（色相）为基础，增加或减少15度（色相环是360度，每个色相环是15度，得出24色相，24*15=360）；以此类推，从而我们可以在0-360之间得到24个颜色

基于品牌色加减15度，一圈加完之后，我们大概就能得出一套品牌色的色板，其中如增加15超过360就需要变减法计算。如减少15的颜色数值超过0则反之。如果公司品牌色比较暗沉的话，可以在全球所有公司品牌色官网（http://brandcolors.net/）上面参考选择一个色值

筛选色相

根据上面得出的24色相环分别选取品牌色的同类色（15度）、类似色（30度）、邻近色（60度以内）、中差色（90度）、对比色（120度）、互补色（180度）从而筛选出品牌色的辅助色；也可以选取些和主品牌色比较舒服的颜色搭配（删减没有规律，根据自己产品情况而定）

调整饱和度与亮度

由于色彩本身自带感官明度属性，所以我们看到的颜色会有反差不是那么令人满意，这时候需要根据我们公司用户人群去调整同频辅助色，可以在亮度(B) 按+10，-10去调整，原則有对比度，需要明显；也可以调整饱和度(S) 按-10,+10去进行调整，需要注意的是以上只是科学的调整方式不代表需要严格按照，加减的数值可以是不一样，没有固定的数值，具体情况需要根据实际内容去调整符合品牌的辅助色

调色板的拓展

调整完饱和度与亮度后，我们得出了基于品牌色的一套色板，我们需建立完整的调色板来满足工作中不同场景下颜色的使用，来保持色彩一致性，因此我们可以根据所得到的辅助色拓展出不同的调色板；其中，当饱和度低于70时，不能满足10个色阶，因此建议饱和度>70。

推荐使用调色板生成工具（
https://ant.design/docs/spec/colors-cn）输入色相色值即可

渐变色

得出色板之后，同理可以得出我们的渐变色；建议跨度两个色阶（同色系或者邻近色），对角线渐变；我们需建立完整的调色板来满足不同场景下颜色的使用，以传达品牌精神，建立色彩层级，或传达信息，或强化界面层级。

基础用色

灰色为产品界面创造结构、表达边界、建立信息层次，保持舒适的对比度是提高可读性和吸引用户注意力的关键。

基础文字

主标题/副标题/暗文字/失效/提示/强调

案例说明

总结

看完前面的内容，大家会发现，其实配色并没有想象中那么复杂；只要掌握正确的配色方法，就可以应付各种不同的设计类型。

最后，我们将前面说的配色方法做一个简要的总结：定义品牌色-提取24色板—筛选色相-矫正色相-调色板的拓展-渐变色的延伸；希望大家都能理解和掌握这个配色方法，在不同的项目中灵活运用，并最终形成自己的优秀配色习惯