文章由三部分构成、第一部分色彩构成概览（三大设计基础之一）；第二部分大厂规范；第三部分复盘我所在的平台怎么搞的。
虽然我也是科班出身的设计师但我对色彩的应用和感知也并没有那么好。为了写这篇基础理论、我用了五六天时间从新温习了一下三大构成之一的色彩构成。研究了一下各大厂后台设计规范里的色彩规范。总结了一下我自己做项目时是怎么用的。希望可以帮到你们把。
色彩是设计师的灵魂，它激荡着无穷的创意与灵感，让我们的世界变得更加丰富多彩。我的铁汁们，最慢的脚步不是跬步，而是徘徊；最快的脚步不是冲刺，而是坚持。希望我们一起进步
第一部分 | 色彩构成我们为什么从色彩构成开始说。我是觉得使用要从最底层的了解开始。这样我们在看到优秀的配色或者规范时才能明白他是怎么搞出来的。
色彩构成是艺术设计的基础理论之一，也是构成基础训练的重要组成部分。全面、系统地学习掌握色彩构成及其形式法则，可以以独特的视角认识世间万物的色彩，提升我们的色彩感觉、敏锐度和审美，并从美学的角度运用色彩。
色彩构成作为现代艺术设计基础的重要组成部分。我想大部分的设计师应该是都学习过的。当然他是包含很多的内容的、这里我们只找一部分我们都用的上的来重温一下。没有学习过的小伙伴也可以了解一下。
官方的色彩构成解释很复杂，我感觉我自己看不懂。结合官方的定义我理解的色彩构成就是。首先是构成、就是放在一块。色彩构成就是把两种或两种以上的色彩放在一块。当然肯定不能随便把色彩放在一块。我们是有目的的根据人们对色彩的感知和心理反应把他们放在一块。来达成我们的目的。
百度的定义是：色彩构成（Interaction of Color），即色彩的相互作用，是从人对色彩的知觉和心理效果出发，用科学分析的方法，把复杂的色彩现象还原为基本要素，利用色彩在空间、量与质上的可变幻性，按照一定的规律去组合各构成之间的相互关系，再创造出新的色彩效果的过程。色彩构成是艺术设计的基础理论之一，它与平面构成及立体构成有着不可分割的关系，色彩不能脱离形体、空间、位置、面积、肌理等而独立存在。
光色并存，有光才有色。色彩是离不开光的。有了光便有了色，是的我们所看到的色是从光里来的。我们之所以能看到五颜六色的世界全是从光里的来的。所以看似稀松平常的光是怎么分裂出来颜色的呢。
白光是由红、橙、黄、绿、蓝、靛、紫等各种色光组成的。白光散开后单色光从上到下依次为“红、橙、黄、绿、蓝、靛、紫七种颜色。色散可以利用三棱镜或光栅等作为“色散系统”的仪器来实现。光的三基色：红，绿，蓝
在我国从晋代开始，许多典籍都记载了晶体的色散现象。如记载过孔雀毛及某种昆虫表皮在阳光下不断变色的现象，云母片向日举之可观察到各种颜色的光。
颜色具有三个属性、色相、明度、饱和度。我们在。三属性是界定色彩感官识别的基础，灵活应用三属性变化是色彩设计的基础。
3.1、色相
是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉经验。一般来说，光线越强，看上去越亮；光线越弱，看上去越暗。
明度也指颜色的明暗程度。色调相同的颜色，明暗可能不同。例如，绛红色和粉红色都含有红色，但前者显暗，后者显亮。
是指色彩的鲜浊程度。纯度较高的颜色，如果与同明度的灰色混合，则可以构成同色相、同明度、不同纯度的颜色序列。任何一种具有色相的颜色，混白、混黑、混灰、混补色都会降低其纯度，混入的越多，纯度降低得越多。
饱和度是色彩的3个属性之一，另外两个属性为色相（hue）和明度（value）；在此模型下色相的取值范围为0°到360°，饱和度和明度取值范围为0到100%。在色彩学中，原色饱和度最高，随着饱和度降低，色彩变得暗淡直至成为无彩色，即失去色相的色彩。作为信息的载体，色彩不仅依附于设计形式，还作为一个主体来完成信息传达的过程。对于艺术设计来说，色彩的运用与设计是其重要的部分，在实际应用中，依据饱和度高低值将色彩分为低饱和度对比、中饱和度对比和高饱和度对比3个基本种类以及饱和度组合对比一个衍生种类。
认识色彩关系色彩关系是非常关键的。同类色：同一色相中不同倾向的颜色称为同类色。对比色：在色环上任一直径两端相对的颜色称为对比色。互补色：如果两种颜色混合后形成中性的灰黑色，这两种颜色称为互补色。如黄与蓝、青与红等。
不同频率色彩的光信息作用于人的视觉器官，通过视觉神经传入大脑后，经过思维，与以往的记忆及经验产生联想，从而形成一系列的色彩心理反应。
色彩本身并无冷暖的差别，只是我们的视觉被色彩影响。是我们心里联想了场景，进而产生了冷暖感觉。
-暖色
人们见到红、红橙、橙、黄橙、黄、棕等色后，会联想到太阳、火焰、热血等物像，产生温暖、热烈、豪放、危险等感觉。
-冷色
见到绿、蓝、紫等色后，则会联想到天空、冰雪、海洋等物像，产生寒冷、开阔、理智、平静等感觉。
色彩的联想带有情绪性的表现。受到观察者年龄、性别、性格、文化、教养、职业、民族、宗教、生活环境、时代背景、生活经历等各方面因素的影响。
各种色彩都其独特的性格，简称色性。它们与人类的色彩生理、心理体验相联系，从而使客观存在的色彩仿佛有了复杂的性格。
-| 红色 它易使人联想起太阳、火焰、热血、花卉等，感觉温暖、兴奋、活泼、热情、积极、豪放、轰轰烈烈、希望、忠诚、健康、充实、饱满、幸福等，但有时也被认为是血腥 、原始、暴力、危险、卑俗的象征。红色历来是我国传统的喜庆色彩。
- | 橙色 橙与红同属暖色，具有红与黄之间的色性，它使人联想起火焰、火光、霞光、橙子等物象，是最温暖、响亮、激动的色彩。感觉活泼、跃动、炽热、温情、甜蜜、幸福竺，但也有疑惑、嫉妒、伪诈等消极倾向性表情。
- | 黄色 黄色是所有颜色中最温暖的色彩，具有温暖、活泼、愉快、丰收、功名、成熟等印象。但黄色容易与它色相混，即易失去其原貌，故也有轻薄、不稳定、变化无常、冷淡等不良含义。
- | 绿色 在大自然中，除了天空和江河、海洋、绿色所占的面积最大，草、叶植物，几乎到处可见，它象征生命、青春、和平、安详、新鲜等。绿色最适应人眼的注视，有消除疲劳、调节功能。黄绿带给人们春天的气息，颇受儿童及年轻人的欢迎。蓝绿、深绿 是海洋、森林的色彩，有着深远、稳重、沉着、睿智等含义。含灰的绿、如土绿、橄榄绿、咸菜绿、墨绿等色彩，给人以成熟、老练的感觉，是人们广泛选用及军、警规定的服色。
- | 蓝色 与红、橙色相反，是典型的冷色调，表示宁静、冷淡、敏捷、理智、高深、透明等含义，随着人类对太空事业的不断开发，它又有了象征高科技的强烈现代感。
.....
为了更准确的描述颜色，工程师们引入了色彩模型的概念：将色彩拆分成不同属性并进行量化，通过计算机语言更科学准确的表述颜色，而不同维度的拆分方法便是色彩模型。随着科技发展和生产制造的需要，色彩模型迭代出了多个版本类型。
HSB模型也称HSV模型，该模型是建立在人眼识别色彩的基础上，符合人类日常的生活经验，相较其他模型最为直观易理解。该模型主要使应用在图像处理、计算机图形学、色彩管理等领域，用于描述和操作颜色。其属性包括：
HSL是和HSB原理相同的模型，在工作中很容易会被混淆使用，其区别在于：HSB中B指的是【亮度 Brightness】，而HSL中L指的是【明度 Lightness】。为方便大家理解，对于这两种模型的详细区别。
HSB和HSL模型在使用场景上都是用于软件开发应用，在实际工作中我们接触HSB模式的场景会更多，但到底哪种模型更适合人类用户使用的界面设计尚未有定论。对于设计师自身而言需要注意的是，在和开发同步设计资料时确保使用的是同一种模型，避免产生颜色误差。
虽然HSL模型有诸多好处（HSB、HSL属于同类模型，后文统一用HSL概括），但其缺陷也很明显：HSL模型无法用于工业制造，因为在自然界中基本很难找到某一属性纯度可以达到标准的物体，也难以控制单一属性变量来改变物体颜色。为了解决以上限制，用于屏幕显示的RGB模型和彩色印刷的CMYK模型应运而生。
RGB模型是依据颜色发光的原理所搭建的，也被称为光的三原色，工业上用于通过红、绿、蓝三色发光单元产生颜色的电子屏幕。
R 红：Red，以数值（0-255）表示。
通常情况下，RGB各有256级亮度，用数字表示为从0、1、2…直到255，虽然数值最高是255，但0也是数值之一，因此共256级。将三种颜色叠加并控制其颜色强度，256级的RGB色彩总共能组合出上千万种色彩，而这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
关于HEX色值
这里还有个知识点就是HEX色值，听到它大家都不会陌生，在很多拾色器中我们都见到过，工作中也经常将其提供给开发同学作为颜色标识。
虽然看起来结构不同，但HEX也是采用RGB模型的原理来定义颜色，只是语言上用的是十六进制代码：字节值范围从 0 到 FF，颜色的最低强度为 00，而最高强度为 FF。实际转换时，每位数字范围是 0～15（分为0～9 和 A～F，其中 A～F 表示 10～15），这样每位数字都能代表16个数，而每2位数字相乘即可代表256级，正好对应一个颜色通道。
相较于长段的RGB表示法，HEX色值表示法只需六位字符，更加紧凑轻量，所以更适合开发人员使用。
以上RGB模型是针对可自身发光的物体，CMYK模型则是针对依靠反光的物体。CMYK是色料的三原色，也叫印刷的三原色，使用最多的场景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到颜色实际上是物体吸收白光中特定频率的光而反射其余光得来。
当然其实还有很多其他的颜色模型比如灰度、Lab等这里就不做过多介绍了。
上面我们了解了颜色。下面我们就来看看。国内大厂他们中后台设计规范里。颜色规范是怎么怎么定义的。毕竟我们跟随这他们的脚步不说超越他们。至少能够提升我们的效率不掉队。也许他们的方案在我们现在项目里可能并不能够适用。但我们也要知道，那些是能够让我们走向更好的道路。
互联网产品的色彩运用，一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关；辅助色主要用于区别分类；功能色就是成功提示、警告提示和错误提示；中性色主要是背景、文字、线条和线框。
一般会选择品牌色或者行业色。品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确产品的品牌色。如果已经有了品牌色。那就可以考虑用自己的品牌色为主色去搭建一套自己平台的颜色规范。
如果没有品牌色、那么考虑搞一个品牌色。品牌色的选取一般根据业务属性与产品性格进行选取。需要设计师了解产品所属领域、产品定位、目标受众群体等，以及我们的品牌色想传递给用户怎样的情感。
当我们不知如何选取品牌色时可以先看看我们同业务属性的产品有哪些颜色。就是行业内其他同行在用什么色。我们能不能抄（呸、是借鉴）。
在UI设计中辅助色被作为功能色使用，功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。我们基于品牌色就衍生出了 3 个辅助色：1个类似色+2个分裂互补色。
下面我们就看看各大厂中后设计规范里怎么定义自己的颜色规范的。这里列举ant design、TDesign、arco design、UDCDesign的颜色规范。
阿里的中台设计规范。这应该是国内早走的中后台设计规范了吧。做的各方面其实都还挺厉害的。现在已经更到5.0版本了。在他的设计规范里。对色彩的定义。将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
在应用上给了其它设计师sketch插件。不但可以使用Ant Design官方色板库，还可以管理自己的色板。还挺方便的之前我就用的这个。ant的颜色搞得还挺好看的。哈哈哈
-色彩空间
Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
-产品级色彩体系-品牌色的应用
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 #1677ff，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
-功能色
功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。
-中性色
Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0（内容无障碍指南、感兴趣的小伙伴可以去百度一下。还挺有意思的） 标准。
TDesign 的色彩体系搭建遵循了 TDesign 包容、多元、进化、连接的价值观，充分考虑色彩的应用需求，符合无障碍标准，提供了一套定义完整、开箱即用的官方色板。
在 TDesign 色彩系统中，每个功能色扩展10级色阶，足够覆盖界面设计中各需求场景。色阶的制定采用了 HCT 色彩空间，结合不同色相下饱和度及亮度插值拟合出优化曲线，保证色彩变化均匀，多色之间亮度均等。
-带有品牌色倾向的中性色
为什么我喜欢用带品牌倾向的中性色。因为在设计里如果你使用了带着自己品牌倾向的中性色。要比纯中性色页面的风格更加的突出。而且页面不容易做灰。在显示效果比较差的屏幕上内容的清晰度要优于使用纯中性色的显示效果。
在阿科design的设计规范里并没对颜色规范做过多的说明。因为他们在自己的设计组件里内置了。一套符合人眼视觉的色彩算法。如果你直接使用他们的设计组件的话就比较爽了。
还给提供了一个实用工具。
这部分内容还挺重要的。之前看过一篇阿里开发工程师的一篇文章讲的还挺仔细的。回头找找分享出来。感兴趣的可以自己搜一搜。他其实能够解决我们做设计中和设计师之间合作亦或是和还发交流等的诸多项目问题。
在线工具Chroma.js：https://www.vis4.net/palettes
ArcoDesign Palette 色彩工具：https://arco.design/palette/list
Ant Design 色板生成工具：https://ant.design/docs/spec/colors-cn#色板生成工具
Material Palettes 色板生成工具：https://www.material.io/design/color/the-color-system.html#tools-for-picking-colors
HTML Color Codes 颜色选择器：https://htmlcolorcodes.com/
Eva Design System 色彩系统：https://colors.eva.design/
Atmos色板生成工具：https://atmos.style/
我们平台在我最初用的是饿了么的后台设计规范。但是在长时间的迭代后。可能是没有完全按照规范设计和开发。导致当时的结果并不尽人意。出现了各页面功能区混乱。我到公司后开始使用ant desgin的设计规范。我首要解决的当务之急是解决页面功能区和视觉混乱的问题。
大概你也会在项目里遇到各种问题。明明用的大厂的设计组件和规范。明明站在了巨人的肩膀上我们怎么还是做不好。做不出牛X的界面视觉和交互呢。其实问题是出在多个方面的。问题最终的锅也不全是设计师的。会有多种多方面的原因导致我们最终上线的系统并没有那么好。
线上总是没有设计稿优秀。设计稿总没有自己想的美。影响项目的原因我会在另一复盘系列吐槽。哈哈这里就赘述了。
那天一个美女设计师说。这些基础的知识没啥用。不用知道这些也可以做项目。嗯。她说的可能没有错。不用栅格也可以做界面。不了解色彩也可以做界面。那我们还为什么了解呢。
我想说你要向更高的地方走。你就要明白让自己更好的方法是什么。选择对的方向、你只管努力其他的交给时间吧。
很开心又攒成了一篇设计基础的文章。这也是我学习的一个过程。在写作的过程中学到了很多之前在大脑里里模糊了的知识。重温一遍学习了很多其他大佬写的文章。在本文也引用了很多其他大佬的内容。希望对你们有帮助吧。
色彩如诗，渲染出千变万化的美妙世界。故园今夕是元宵，独向蛮村坐寂寥。且酩酊，任他两轮日月，来往如梭。我是AKA彪形大汉、KING UXD研究室主理人。哈哈、我们下篇文章见。
Powered by Froala Editor
我从山中来，带着兰花草。种...
15
作品
39
粉丝
3
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册