B端基础 | 如何科学的搭建中台UI色彩系统

King国王刘

北京/UI设计师/2年前/15772浏览

版权

King国王刘

文章由三部分构成、第一部色彩构成概览（三大设计基础之一）；第二部大厂规范；第三部复盘我们平台怎么搞的

写在前面

虽然我也是科班出身的设计师但我对色彩的应用和感知也并没有那么好。为了写这篇基础理论、我用了五六天时间从新温习了一下三大构成之一的色彩构成。研究了一下各大厂后台设计规范里的色彩规范。总结了一下我自己做项目时是怎么用的。希望可以帮到你们把。

我的群友们，最慢的脚步不是跬步，而是徘徊；最快的脚步不是冲刺，而是坚持。希望我们一起进步

第一部分 | 色彩构成

我们为什么用从色彩构成开始说的。我是觉得使用要从最底层的了解开始。这样我们在看到优秀的配色或者规范是才能明白他是怎么搞出来的。

-| 色彩构成是艺术设计的基础理论之一，也是构成基础训练的重要组成部分。全面、系统地学习掌握色彩构成及其形式法则，可以以独特的视角认识世间万物的色彩，提升我们的色彩感觉、敏锐度和审美，并从美学的角度运用色彩。

色彩构成作为现代艺术设计基础的重要组成部分。我想大部分的设计师应该是都学习过的。当然他是包含很多的内容的、这里我们只找一部分我们都用的上的来重温一下。没有学习过的小伙伴也可以了解一下。

1、什么是色彩构成

官方的色彩构成很复杂，我感觉我自己看不懂。结合官方的定义我理解的色彩构成就是。首先是构成、就是放在一块。色彩构成就是把两种或两种以上的色彩放在一块。当然肯定不能随便把色彩放在一块。我们是有目的的根据人们对色彩的感知和心理反应把他们放在一块。来达成我们的目的。

-| 百度的定义是：色彩构成（Interaction of Color），即色彩的相互作用，是从人对色彩的知觉和心理效果出发，用科学分析的方法，把复杂的色彩现象还原为基本要素，利用色彩在空间、量与质上的可变幻性，按照一定的规律去组合各构成之间的相互关系，再创造出新的色彩效果的过程。色彩构成是艺术设计的基础理论之一，它与平面构成及立体构成有着不可分割的关系，色彩不能脱离形体、空间、位置、面积、肌理等而独立存在。

2、色从哪里来

光色并存，有光才有色。色彩是离不开光的。有了光便有了色，是的我们所看到的色是从光里来的。我们之所以能看到五颜六色的世界全是从光里的来的。所以看似稀松平常的光是怎么分裂出来颜色的呢

白光是由红、橙、黄、绿、蓝、靛、紫等各种色光组成的。白光散开后单色光从上到下依次为“红、橙、黄、绿、蓝、靛、紫七种颜色。色散可以利用三棱镜或光栅等作为“色散系统”的仪器来实现。光的三基色：红，绿，蓝

在我国从晋代开始，许多典籍都记载了晶体的色散现象。如记载过孔雀毛及某种昆虫表皮在阳光下不断变色的现象，云母片向日举之可观察到各种颜色的光。

3、色的属性

颜色具有三个属性、色相、明度、饱和度。我们在。三属性是界定色彩感官识别的基础，灵活应用三属性变化是色彩设计的基础。

3-1、色相

色相是指色彩的相貌，在色彩的三种属性中色相被用来区分颜色，根据光的不同频率，色彩具有红色、黄色或绿色等性质，这被称之为色相。黑白没有色相，为中性。

-| 色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也就是由原色、间色和复色来构成的。色相，色彩可呈现出来的质地面貌。自然界中各个不同的色相是无限丰富的，如紫红、银灰、橙黄等。色相即各类色彩的相貌称谓。

3-2、明度

是指色彩的明暗程度。在色彩三属性中，明度是无彩色与有彩色共有的属性。明度最高的颜色是白色，明度最低的颜色是黑色。将白色和黑色作为两极，在两者之间作从深到浅的灰色渐变，可以得到一个单纯的明度系列。

-| 是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉经验。一般来说，光线越强，看上去越亮；光线越弱，看上去越暗。

明度也指颜色的明暗程度。色调相同的颜色，明暗可能不同。例如，绛红色和粉红色都含有红色，但前者显暗，后者显亮。

色彩的明度可以用“高”、“中”、“低”三种明度感觉来概括。如果用明度尺来进行衡量，则明度介于 1.5 ~ 3.5 之间的称为“低明度”，介于 4 ~ 7.0 之间的称为“中明度”，介于7.5 ~ 9.5 之间的称为“高明度”。

3-3、饱和度（纯度）

是指色彩的鲜浊程度。纯度较高的颜色，如果与同明度的灰色混合，则可以构成同色相、同明度、不同纯度的颜色序列。任何一种具有色相的颜色，混白、混黑、混灰、混补色都会降低其纯度，混入的越多，纯度降低得越多。

-| 饱和度是色彩的3个属性之一，另外两个属性为色相（hue）和明度（value）；在此模型下色相的取值范围为0°到360°，饱和度和明度取值范围为0到100%。在色彩学中，原色饱和度最高，随着饱和度降低，色彩变得暗淡直至成为无彩色，即失去色相的色彩。作为信息的载体，色彩不仅依附于设计形式，还作为一个主体来完成信息传达的过程。对于艺术设计来说，色彩的运用与设计是其重要的部分，在实际应用中，依据饱和度高低值将色彩分为低饱和度对比、中饱和度对比和高饱和度对比3个基本种类以及饱和度组合对比一个衍生种类。

4、颜色的关系

认识色彩关系色彩关系是非常关键的。同类色：同一色相中不同倾向的颜色称为同类色。对比色：在色环上任一直径两端相对的颜色称为对比色。互补色：如果两种颜色混合后形成中性的灰黑色，这两种颜色称为互补色。如黄与蓝、青与红等。

5、颜色的感情

认识色彩除了客观方面还有主观的方面，即有关色彩的视觉心理基础理论知识。每一种颜色带给我们的心里感受都是不一样的。不同颜色的组合带给我们的感受同样会发生变化。

5-1、视觉心里

不同频率色彩的光信息作用于人的视觉器官，通过视觉神经传入大脑后，经过思维，与以往的记忆及经验产生联想，从而形成一系列的色彩心理反应。

色彩本身并无冷暖的差别，只是我们的视觉被色彩影响。是我们心里联想了场景，进而产生了冷暖感觉。

-暖色：人们见到红、红橙、橙、黄橙、黄、棕等色后，会联想到太阳、火焰、热血等物像，产生温暖、热烈、豪放、危险等感觉。

-冷色：见到绿、蓝、紫等色后，则会联想到天空、冰雪、海洋等物像，产生寒冷、开阔、理智、平静等感觉。

色彩的联想带有情绪性的表现。受到观察者年龄、性别、性格、文化、教养、职业、民族、宗教、生活环境、时代背景、生活经历等各方面因素的影响。

5-2、色彩性格

各种色彩都其独特的性格，简称色性。它们与人类的色彩生理、心理体验相联系，从而使客观存在的色彩仿佛有了复杂的性格。

-| 红色它易使人联想起太阳、火焰、热血、花卉等，感觉温暖、兴奋、活泼、热情、积极、豪放、轰轰烈烈、希望、忠诚、健康、充实、饱满、幸福等，但有时也被认为是血腥、原始、暴力、危险、卑俗的象征。红色历来是我国传统的喜庆色彩。

- | 橙色橙与红同属暖色，具有红与黄之间的色性，它使人联想起火焰、火光、霞光、橙子等物象，是最温暖、响亮、激动的色彩。感觉活泼、跃动、炽热、温情、甜蜜、幸福竺，但也有疑惑、嫉妒、伪诈等消极倾向性表情。

- | 黄色黄色是所有颜色中最温暖的色彩，具有温暖、活泼、愉快、丰收、功名、成熟等印象。但黄色容易与它色相混，即易失去其原貌，故也有轻薄、不稳定、变化无常、冷淡等不良含义。

- | 绿色在大自然中，除了天空和江河、海洋、绿色所占的面积最大，草、叶植物，几乎到处可见，它象征生命、青春、和平、安详、新鲜等。绿色最适应人眼的注视，有消除疲劳、调节功能。黄绿带给人们春天的气息，颇受儿童及年轻人的欢迎。蓝绿、深绿是海洋、森林的色彩，有着深远、稳重、沉着、睿智等含义。含灰的绿、如土绿、橄榄绿、咸菜绿、墨绿等色彩，给人以成熟、老练的感觉，是人们广泛选用及军、警规定的服色。

- | 蓝色与红、橙色相反，是典型的冷色调，表示宁静、冷淡、敏捷、理智、高深、透明等含义，随着人类对太空事业的不断开发，它又有了象征高科技的强烈现代感。

- | 紫色具有梦幻、高贵、优美、庄重、奢华行的气质，含浅白的淡紫或蓝紫色，却有着类似太空、宇宙色彩的优雅、梦幻、科技之时代感、为现代生活所广泛采用。

- | 黑色黑色为无色相无纯度之色。往往给人感觉隐藏、沉静、神秘、严肃、庄重、含蓄，另外，也易让人产生悲哀、恐怖、不祥、沉默、消亡、罪恶等消极印象。尽管如此，黑色的组合适应性却极广，无论什么色彩特别是鲜艳的纯色与其相配。都能取得赏心悦目的良好效果。但是不能大面积使用，否则，不但其魅力大大减弱，相反会产生压抑、阴沉的恐怖感。

- | 白色白色给人印象中洁净、光明、纯真、清白、朴素、卫生、恬静等。在它的衬托下，其他色彩会显得更艳丽、更开朗。多用白色还可能产生平淡无味的单调、空虚之感。

- | 灰色灰色是中性色，其突出的性格为柔和、细致、平稳、朴素、大方、它不像黑色与白色那样会明显影响其他的色彩。因此，作为背景色彩非常理想。任何色彩都可以和灰色相混合，略有色相感的含灰色能给人以高雅、细腻、含蓄、稳重、精致、文明而有素养的高档感觉。当然滥用灰色也易暴露其乏味、寂寞、忧郁、无激情、无兴趣的一面

6、色彩模型

为了更准确的描述颜色，工程师们引入了色彩模型的概念：将色彩拆分成不同属性并进行量化，通过计算机语言更科学准确的表述颜色，而不同维度的拆分方法便是色彩模型。随着科技发展和生产制造的需要，色彩模型迭代出了多个版本类型。

6-1、HSB和HSL模型

HSB模型也称HSV模型，该模型是建立在人眼识别色彩的基础上，符合人类日常的生活经验，相较其他模型最为直观易理解。该模型主要使应用在图像处理、计算机图形学、色彩管理等领域，用于描述和操作颜色。其属性包括：

H 色相：Hue，以角度（0°-360°）表示。
S 饱和度：Saturation，以百分比值（0%-100%）表示。
B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示。

HSL是和HSB原理相同的模型，在工作中很容易会被混淆使用，其区别在于：HSB中B指的是【亮度 Brightness】，而HSL中L指的是【明度 Lightness】。为方便大家理解，对于这两种模型的详细区别。

HSB和HSL模型在使用场景上都是用于软件开发应用，在实际工作中我们接触HSB模式的场景会更多，但到底哪种模型更适合人类用户使用的界面设计尚未有定论。对于设计师自身而言需要注意的是，在和开发同步设计资料时确保使用的是同一种模型，避免产生颜色误差。

虽然HSL模型有诸多好处（HSB、HSL属于同类模型，后文统一用HSL概括），但其缺陷也很明显：HSL模型无法用于工业制造，因为在自然界中基本很难找到某一属性纯度可以达到标准的物体，也难以控制单一属性变量来改变物体颜色。为了解决以上限制，用于屏幕显示的RGB模型和彩色印刷的CMYK模型应运而生。

6-2、RGB模型

RGB模型是依据颜色发光的原理所搭建的，也被称为光的三原色，工业上用于通过红、绿、蓝三色发光单元产生颜色的电子屏幕。

R 红：Red，以数值（0-255）表示。
G 绿：Green，以数值（0-255）表示。
B 蓝：Blue，以数值（0-255）表示。

通常情况下，RGB各有256级亮度，用数字表示为从0、1、2…直到255，虽然数值最高是255，但0也是数值之一，因此共256级。将三种颜色叠加并控制其颜色强度，256级的RGB色彩总共能组合出上千万种色彩，而这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

6-2-1、关于HEX色值

这里还有个知识点就是HEX色值，听到它大家都不会陌生，在很多拾色器中我们都见到过，工作中也经常将其提供给开发同学作为颜色标识。

虽然看起来结构不同，但HEX也是采用RGB模型的原理来定义颜色，只是语言上用的是十六进制代码：字节值范围从 0 到 FF，颜色的最低强度为 00，而最高强度为 FF。实际转换时，每位数字范围是 0～15（分为0～9 和 A～F，其中 A～F 表示 10～15），这样每位数字都能代表16个数，而每2位数字相乘即可代表256级，正好对应一个颜色通道。

相较于长段的RGB表示法，HEX色值表示法只需六位字符，更加紧凑轻量，所以更适合开发人员使用。

6-3、CMYK模型

以上RGB模型是针对可自身发光的物体，CMYK模型则是针对依靠反光的物体。CMYK是色料的三原色，也叫印刷的三原色，使用最多的场景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到颜色实际上是物体吸收白光中特定频率的光而反射其余光得来。

R 青：Cyan，以百分比值（0%-100%）表示。
M 品红：Magenta，以百分比值（0%-100%）表示。
Y 黄：Yellow，以百分比值（0%-100%）表示。
B 黑：Black，以百分比值（0%-100%）表示。

6-4、其他模型

当然其实还有很多其他的颜色模型比如灰度、Lab等这里就不做过多介绍了。

第二部分 | 大厂规范

上面我们了解了颜色。下面我们就来看看。国内大厂他们中后台设计规范里。颜色规范是怎么怎么定义的。毕竟我们跟随这他们的脚步不说超越他们。至少能够提升我们的效率不掉队。也许他们的方案在我们现在项目里可能并不能够适用。但我们也要知道，那些是能够让我们走向更好的道路。

1、颜色规范制定

互联网产品的色彩运用，一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关；辅助色主要用于区别分类；功能色就是成功提示、警告提示和错误提示；中性色主要是背景、文字、线条和线框。

1-1、主色

一般会选择品牌色或者行业色。品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确产品的品牌色。如果已经有了品牌色。那就可以考虑用自己的品牌色为主色去搭建一套自己平台的颜色规范。

如果没有品牌色、那么考虑搞一个品牌色。品牌色的选取一般根据业务属性与产品性格进行选取。需要设计师了解产品所属领域、产品定位、目标受众群体等，以及我们的品牌色想传递给用户怎样的情感。

当我们不知如何选取品牌色时可以先看看我们同业务属性的产品有哪些颜色。就是行业内其他同行在用什么色。我们能不能抄（呸、是借鉴）。

1-2、辅助色（功能色）

在UI设计中辅助色被作为功能色使用，功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。我们基于品牌色就衍生出了 3 个辅助色：1个类似色+2个分裂互补色。

1-3、中性色

大家常最熟悉的文字颜色就是#333，#666，#999，我们需要注意在UI设计中，应避免纯黑色的使用。中性色包含了黑、白、灰，是页面中文字、背景常用的颜色，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。（在之前的项目里大部分时间我都会用333、/666、/999.后来我就不大喜欢用这中中性色了。更喜欢用带有色彩倾向的中性色）

1-4、带有品牌色倾向的中性色（我想喜欢）

在页面模版等应用场景中，需要在各层级的灰黑色中加入颜色倾向，以突出品牌氛围。过程中使用了 RGB 混色模型，经过多次的尝试最终确定了品牌色的混合比例为 8%-12%，运用规则同普通中性色一致。

2、大厂颜色规范

下面我们就看看各大厂中后设计规范里怎么定义自己的颜色规范的。这里列举ant design、TDesign、arco design、UDCDesign的颜色规范。

2-1、Ant Design

阿里的中台设计规范。这应该是国内早走的中后台设计规范了吧。做的各方面其实都还挺厉害的。现在已经更到5.0版本了。在他的设计规范里。对色彩的定义。将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

在应用上给了其它设计师sketch插件。不但可以使用Ant Design官方色板库，还可以管理自己的色板。还挺方便的之前我就用的这个。ant的颜色搞得还挺好看的。哈哈哈

-色彩空间

Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。

-产品级色彩体系-品牌色的应用

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 #1677ff，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。