前端需要了解的色彩知识
概述
在前端领域，我们常常需要跟色彩打交道，除了一部分从设计转过来的前端外（ps：历史原因），后来的新生代前端绝大多数基本都是学理工科出身的，一般没有经过专门的设计训练和培养，这样在还原设计图的过程中对于色彩的理解都会或多或少有些出入，从而导致设计和前端产生不必要的矛盾（ps：本是同根生，都相互体谅下），本文旨在通过介绍相关的一些色彩知识，为大家提供一些设计和前端双重视角下的观点，也希望能够给大家提供一些对色彩的不同的认识和理解。
色彩理论
人类对色彩的研究其实很早都有记录，但真正把色彩作为一门学科或者说有其理论体系，还要从牛顿说起，在之后不断的科学发展过程中，人们逐渐对色彩有了不同的认识，也正是由于科学的发展，色彩理论在不同领域都有了长足的发展，本文着重分享两个对我们前端来说需要着重了解的色彩理论，即：色环理论以及加减色模式理论。
色环
色环理论经历了牛顿色环、伊顿色环（传统色环）、孟塞尔色环、Yurmby色环等几个不同的阶段，这里重点介绍传统的经典色环，也就是伊顿色环，其作为包豪斯体系中重要的理论课程，对设计领域的影响巨大（ps：对设计史感兴趣的童鞋，可以参看之前的这篇文章世界现代设计史），总体来说，色环理论可以简单提炼出以下几个常见的色彩概念：
| 名称 | 相差度数 | 解释 |
|---|---|---|
| 邻近色 | 0-15度 | 色环中两色相差较小，比较接近，不同人识别度不同，通常识别度较低 |
| 相似色 | 15-45度 | 色环中两色相差适中，既具有识别度，又具有相似度 |
| 中差色 | 45-105度 | 色环中两色相差有明显识别度，但又不会显得过于跳跃 |
| 对比色 | 105-150度 | 色环中两色相差有较强识别度，容易产生跳跃感 |
| 邻近互补色 | 150-179度 | 色环中两色相差较大，不建议搭配使用 |
| 互补色 | 180度 | 色环中两色相差对比强烈 |
加色模式 & 减色模式
在介绍加色模式和减色模式，我们先来看下我们从小学到的关于色彩的一些基本知识。我们之前上学的时候，美术老师可能教过三原色和三基色的概念，或者区分光学三原色和色彩三原色等等，这其实就已经是加色模式和减色模式的一个初步了解了，本质来说：三原色或者说三基色都是基于不同环境下材料而提出的一种基本色彩而已，我这里以光学三原色和色彩三原色来区分，光学三原色是：红®、绿(G)、蓝(B)，也是我们前端开发过程中常用到的元色；而除了光学三原色外，还有一个色彩三原色，或者叫美术三原色，它们是：红(M)、黄(Y)、蓝©，这个是印刷或者绘画过程中常常用到的元色。相信细心的同学已经发现我在标注英语的时候，色彩三原色和光学三原色里的红色及蓝色好像是不一样的，没错，正是由于不同场景下对于色彩使用的不同，而对色彩进行加合的过程中出现了不同的模式。这里，就要引出我们这一部分的核心理论了，即：加色模式和减色模式。
下面给出不严谨的加色模式和减色模式的定义
加色模式是指对色彩模型中的属性进行加和的模式；减色模式是指对色彩模型中的属性进行吸收的模式
那么为什么光学色彩是加色法而美术色彩却是减色呢？因为本质上，在光学场景中，比如在计算机显示器中通常使用的是从一种光源来发出不同的元色给人呈现色彩，不同的显示器制造材料有不同的显示特点，比如有：阴极射线管显示器(CRT)、等离子显示器(PDP)、液晶显示器(LCD)以及有机发光半导体显示器(OLED)等等，但这些通常都会是从一个光源发出的，因而这些通常就是加色模型，而一般来说会有RGB模型、YUV(YCrCb)模型等，在前端来说，咱们常见的是以RGB模型进行的相关对应关系代码操作，这里涉及到了色彩模型，具体请看下一部分的介绍。而在美术或者印刷场景中，则是利用的物体反射光线的原理，也就是说我们日常看到的物体的颜色其实是显示的它不能被吸收的颜色，例如：粉色颜料其实吸收了除粉色以外的所有光线，所以我们才能看到它是粉色，因而减色其实是吸收的模式，因而在CMYK模型中，其就是典型的减色模式。
色彩模型
在有了对色彩的初步认识之后，如果想要来描述色彩，我们就需要建立一个模型来描述它，这里就引出了色彩模型的概念，基于wiki百科和百度百科，我们不严谨的给出如下的定义：
色彩模型是用一个元组或者集合来描述可见光的子集，这里的元组通常为三元或者四元。
通常来说，按照是否设备相关，我们可以将色彩模型分为设备相关色彩模型以及设备不相关的色彩模型，基于此大致可以分为两大体系，即：RGB体系及XYZ体系，这里我们将介绍以下几种常见的色彩模型：RGB/CMYK、YUV/YCrCb、HS*、Lab、XYZ，下面将分别介绍下相关的颜色模型。
RGB & CMYK
RGB模型是典型的加法模型，其通过设立RGB为三个基色进行多种颜色的不同模型组合，其中R/G/B分别作为三维欧氏空间中的维度表示，对颜色进行相关的构建，如上图所示。
不同于RGB模型的加法合成，对于印刷相关的场景，则是典型的减法合成，而这里最常见的就是跟物质相关的基础颜料作为基础模型空间的维度，最常见的便是CMYK模型，其仍然是符合欧氏空间的模型构建，只是对于合成的算法过程中使用的是减法合成。
YUV & YCrCb
YUV模型作为RGB模型的变形形式，其常用于视频、电视领域的色彩表示。由于在视频及电视领域中，对于色调和饱和度的指标相对更为关键，因而使用U+V来表示色度，使用Y来表示明亮度。
随着视频编码技术的发展，YCbCr模型作为视频流采用的一种变形模型标准，其不再是通过u+v来表示色度，而是通过RGB输入信号的R与亮度的差异即Cr和通过RGB输入信号的B与亮度的差异即Cb进行维度构建，这相对于YUV或者YPrPb编码而言便是数字色差信号而不再是模拟色彩信号了。
YUV和YCrCb色彩模型常用于计算机视觉的相关分析中，对于视频及图像分析相关的同学可以更深入了解一下
HSV & HSL & HSB & HSI
对于人的视觉而言，其实通常最容易描述的就是基于色相(Hue)、饱和度(Saturation)以及最后这一个明度或者说亮度来区分，但是对于最后两个指标而言，不同模型的构建其实是不太一样的，这里我们将重点介绍两种模型，即：类HSL和类HSV模型
对于HSL模型而言，最后定义的指标是一个混入了黑白的量，其最后的形态在欧氏空间中，表现为一个全椎体，如上图所示。
而对于HSV模型而言，最后定义的指标只是混入了一个黑色的量，其最后形态在欧氏空间中，表现为一个倒立的圆锥体，如上图所示。
正是由于这种对于S和 * 的处理不同，导致出现了很多不同的名词及表示模型，这里我们用以下表格做一下常见的 HS* 模型的对比：
| 简写 | 全称 | 注释 |
|---|---|---|
| HSV | Hue, Saturation, Value | 明度 |
| HSL | Hue, Saturation, Lightness | 亮度 |
| HSB | Hue, Saturation, Brightness | 明度 |
| HSI | Hue, Saturation, Intensity | 亮度 |
结论：HSV = HSB，HSL ≈ HSI
如上图所示，后续我们不加特别说明的话，后续将以HSV和HSL这两种作为HS*的两种典型代表进行表述，作为RGB模型的变种，我们后续在色彩计算过程中对 HS* 和 RGB模型的换算进行详解。
LAB
随着发展，人们对色彩的研究不再局限于设备基础条件的限定，由此，CIE(Commission Internationale de Photométrie)国际照明协会提出了Lab模型，其不同于RGB的模型，其中L代表亮度，而a则是从深绿色(低亮)到灰色(中亮)再到亮粉红色(高亮)的过渡，b则是亮蓝色(低亮)到灰色(中亮)再到黄色(高亮)的过渡，其合成模型如上图所示。
XYZ
在上一个Lab模型中我们知道，CIE对色彩做了进一步的调研研究，其实Lab模型也是XYZ模型的一个衍生变种，其对RGB模型中的光源做了坐标系方面的区分，其对三元色进行了相关的修正，其是设备无关的，如上图所示，在欧氏空间中，两个坐标系发生了偏移。（ps：具体的变化，可以参考这篇文章RGB色彩体系和XYZ色彩体系）
色彩空间
色彩空间又称为色域，在上一部分我们介绍了不同的色彩模型，那么对于实际生产过程中会遇到各种不同的实际情况，因而各个厂家或者组织基于各自的设备或者场景的不同而实际形成的色彩映射关系，从而提出了各自的色彩范围，这里我们结合wiki百科及百度百科，不严谨的给出如下定义：
色彩空间是基于色彩模型而对实际特定场景的色彩范围的映射关系。
对于常见的色彩空间，我们列举了以下几种：
| 色彩空间 | 色彩模型 | 注释 |
|---|---|---|
| sRGB | RGB模型 | 微软联合HP、三菱等厂商开发的通用色彩标准，通用的色彩标准，色彩范围较小，也是网页中常用的色彩空间标准 |
| adobe RGB | RGB模型 | Adobe主导开发，尽可能使用计算机设备模拟印刷产品彩色样式 |
| ProPhoto RGB | RGB模型 | 柯达公司制定的色彩空间标准，常用于高端相机 |
| Japan Color 2001 Coated | CMYK模型 | 日本印刷业协会制定的一种色彩空间标准 |
| SWOP CMYK | CMYK模型 | 美国常用胶印墨色标准（US Web Coated），美国印刷业制定的一种色彩空间标准 |
| CIE 1931 XYZ | XYZ模型 | CIE 1931年制定的标准 |
| CIELAB | Lab模型 | 符合CIE 1931年的标准，从CIE LUV改进而来 |
色彩体系
在讲了关于色彩的一些基础理论和描述之后，我们来看一下设计领域对于色彩的相关运用和实践，这些对我们前端和设计同学协作也会有比较好的前置铺垫。
如果按照设计体系的标准制定，通常需要包含 愿景与原则（Vision & Principle）、 指南（Guidelines）、 库与工具（Libraries & Tools） 这三层，其中：
第一层：愿景与原则（Vision & Principle），是设计体系的核心价值观及总体纲领，指引整体设计体系的风格和调性。
第二层：指南（Guidelines），包含样式指南（Style Guideline）、模式指南(Patterns Guideline)、内容指南（Content Guideline）等更多通过文字和图像进行传达的内容，也是大部分设计中对色彩(Color)、版式(Layout)、。
第三层：库与工具（Libraries & Tools），包含组件库（Components Libraries）、工具包（Toolkits）、协同工具（Collaborative Tools）等可以直接进行使用的内容，一般会输出可开发使用的组件库、以sketch或者psd的设计资源以及产品使用的figma、axure等物料。（ps：大型设计团队也会协同前端制作对应的组件库，比如常见的antd、element组件库等都是对应的设计团队的前端资源，一般来说大型的团队可能会将设计和前端划入用户体验团队，当然这也需要看整体的组织架构）
之前做设计的时候，做过相关的设计体系，有兴趣的同学，可以看下这篇对应的设计体系实践——2018总结-多条业务线并行的UI基础框架规范（附案例）
在刚才介绍了设计体系之后，我们看到对于第二层的guidelines中，对于样式部分的规约，其中很重要的一个部分就是色彩，其实色彩是设计师展现视觉过程中最为重要的工具，在包豪斯体系中，作为三大构成之一的色彩构成是十分重要设计理论，而如果将色彩构建成符合商业化的体系，通常来说需要包含两大部分，即：通用色彩系统和商业色彩系统。
对于色彩系统的分类，这里我将以蚂蚁金服的ant design色彩体系作为样板来进行描述。
通用色彩系统，也就是antd中所说的系统级色彩体系，其是不包含任何关于商业及产品的特定色彩要求，只是设计师选出了几种特定的色彩，配合不同的视觉感受来表达不同的传达需求。
而商业色彩体系，也就是antd中所说的产品级色彩体系，通常需要配合品牌调性、产品功能等来从上述通用色彩系统中进行着重的筛选和设定，从而更好的服务商业化，用王受之先生的话讲就是：“设计是对外的，而艺术是对内的”。
现阶段的设计和工程结合的也越来越紧密，可以通过Design Token等手段将设计体系和工程体系进行相关的对接，从而化解设计和前端链路过程中的沟通成本问题，提升工程效能。关于设计方面的链路方面的提升，可以看看蚂蚁金服去年SEE Conf关于设计工程化的几场介绍–提效神器 Design Tokens 的探索与应用 - 昱星 & 元尧、设计工程化三部曲 - 倏昱 & 闻冰
这里我列举了几个比较有名的设计团队所做的色彩体系风格，大家可以参考一下：
| 设计团队 | 色彩体系 | 备注 |
|---|---|---|
| Ant Design |
|
Ant Design色彩体系 |
| Element Design |
|
Element Design色彩体系 |
| Material Design |
|
Material Design色彩体系 |
| Human Interface Guidelines |
|
Apple色彩体系 |
| Fluent Design |
|
微软色彩体系 |
色彩计算
在理性的了解了色彩理论、色彩模型、色彩空间以及感性的体会了色彩体系之后，最后一部分我们来看一下之前所建立的理性与感性是如何通过计算进行融合的，这一部分我将着重介绍和我们前端相关的色彩模型换算(RGB与HSV/HSL)，以及简单介绍下在换算过程中可能涉及到的数学计算方法(贝塞尔曲线)，最后我们将通过ant design的色板实现来看一下色彩的具体应用。
RGB/HSL/HSV换算
在有了前边关于色彩模型的认识后，我们来看一下色彩模型之间是如何进行换算的，由于前端应用过程中主要涉及RGB向HS*的换算，因而这里我们仅仅介绍RGB模型是如何向HSL及HSV进行坐标体系换算的。
从视频中我们可以看出，RGB -> HSV 的过程为：
RGB倾斜 => 拉成六棱锥 => 转成六棱柱 => 转为圆柱
而 RGB -> HSL 的过程则为：
RGB倾斜 => 拉成双六棱锥 => 转成六棱柱 => 转为圆柱
从这个过程，我们经过一系列复杂的数学换算，可以得到如下转换公式：
注意：R、G、B都是换算到0-1区间的值，也就是这里的R/G/B是原本
0-255区间的值除以255得到相应的值
Hue的换算
H的计算三者是一样的，即：
Lightness/Value/Intensity的换算
从上边的换算过程可知，L、V、I的对应方程为：
Saturation的换算
对于饱和度的换算，由于L、V、I的不同，导致换算过程中的S也发生了变化：
贝塞尔曲线
贝塞尔曲线作为数值计算中的重要方法，其对动态拟合不同运动轨迹有十分重要的作用，作为插值计算来处理伯恩斯坦多项式的重要方法，其对于科学计算十分重要。
在对色彩计算过程中，使用贝塞尔曲线来处理两个数据值也是一项十分重要的手段，可以更加接近对于色彩体系的构建和对真实色彩世界的拟合。
Ant Design 色板
在介绍了所有的色彩相关的模型、计算等等之后，我们来看一下前端中关于色彩计算的一些应用，这里我们以蚂蚁金服的 Ant Design 色板的生成算法作为案例进行一些简单的分析，来看一下色彩计算在组件库中的具体落地，对于更为详细的介绍，大家可以看一下偏右大佬所写的这篇《Ant Design 色板生成算法演进之路》，这里我仅仅做一下个人的理解与分析简述。
antd色板 1.x算法
// 变亮
@function tint($color, $percentage) {@return mix(white, $color, $percentage);
}
// 变暗
@function shade($color, $percentage) {@return mix(black, $color, $percentage);
}
// 使用
.useage {background-color: tint(#2db7f5, 80%);
}
第一版的方法很简单，我们看到直接使用了黑白的混合去处理，这里的mix是sass中的颜色混合方法，这里使用的是简单的RGB模型进行换算，具体换算方法我找到了dart-sass的中的方法：
/// Returns [color1] and [color2], mixed together and weighted by [weight].
SassColor _mixColors(SassColor color1, SassColor color2, SassNumber weight) {// This algorithm factors in both the user-provided weight (w) and the// difference between the alpha values of the two colors (a) to decide how// to perform the weighted average of the two RGB values.//// It works by first normalizing both parameters to be within [-1, 1], where// 1 indicates "only use color1", -1 indicates "only use color2", and all// values in between indicated a proportionately weighted average.//// Once we have the normalized variables w and a, we apply the formula// (w + a)/(1 + w*a) to get the combined weight (in [-1, 1]) of color1. This// formula has two especially nice properties://// * When either w or a are -1 or 1, the combined weight is also that// number (cases where w * a == -1 are undefined, and handled as a// special case).//// * When a is 0, the combined weight is w, and vice versa.//// Finally, the weight of color1 is renormalized to be within [0, 1] and the// weight of color2 is given by 1 minus the weight of color1.var weightScale = weight.valueInRange(0, 100, "weight") / 100;var normalizedWeight = weightScale * 2 - 1;var alphaDistance = color1.alpha - color2.alpha;var combinedWeight1 = normalizedWeight * alphaDistance == -1? normalizedWeight: (normalizedWeight + alphaDistance) /(1 + normalizedWeight * alphaDistance);var weight1 = (combinedWeight1 + 1) / 2;var weight2 = 1 - weight1;return SassColor.rgb(fuzzyRound(color1.red * weight1 + color2.red * weight2),fuzzyRound(color1.green * weight1 + color2.green * weight2),fuzzyRound(color1.blue * weight1 + color2.blue * weight2),color1.alpha * weightScale + color2.alpha * (1 - weightScale));
}
可以看到这里使用的是RGB模型的线性计算，由于RGB模型线性换算过程中对间隔的变化十分巨大，对于人眼的视觉效果十分不友好
antd色板 2.x算法
@import "bezierEasing";
@import "tinyColor";// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it
前端需要了解的色彩知识相关推荐
- etcd 笔记（02）— etcd 安装（apt 或 yum 安装 、二进制包安装、Docker 安装 etcd、etcd 前端工具etcdkeeper）
1. 使用 apt 或 yum 安装 etcd 命令如下: sudo apt-get install etcd 或者 sudo yum install etcd 这样安装的缺点是:安装的 etcd 版 ...
- 【牛腩新闻发布系统】开始前端03
前言: 后台代码写好后,开始按照设计实现前端,之前有做过关于网页的东西,不过是用Dreamweaver做的静态,不能实现和数据库的交互,如果只是单纯学界面设计的话,用Dreamweaver容易上手,在 ...
- LLVM Clang前端编译与调试
LLVM Clang前端编译与调试 iOS 关于编译 o 一.Objective-C 编译过程 o 为什么需要重新编译? o 编译步骤 o 二.编译步骤的详细说明 o 1.预处理 o 2.编译 o 词 ...
- Clang：LLVM 的 C 语言家族前端
Clang:LLVM 的 C 语言家族前端 Clang 项目为LLVM 项目的 C 语言家族(C.C++.Objective C/C++.OpenCL.CUDA 和 RenderScript)中,提供 ...
- TensorFlow Frontend前端
TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: • 1.12 and below Tested ...
- Clang：LLVM的C语言家族前端
Clang:LLVM的C语言家族前端 Clang项目为LLVM 项目的C语言家族(C,C ++,Objective C / C ++,OpenCL,CUDA和RenderScript)中的语言提供了语 ...
- 前端的单页面模式和多页面模式
一.前言 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
- JavaScript—— 前端编程语言
JavaScript 前端编程语言 http://caibaojian.com/javascript/ 转载于:https://www.cnblogs.com/highpointengineer/ ...
- day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签: ...
- 转 前端工程师凭什么这么值钱？
[CSDN编者按]前端工程师的薪资之高是业界公认的事实,但是很多人会质疑前端工程师,认为他们并不能称为软件工程师,也"配不上"高昂的报酬.本文的作者分享了自己从一个前端菜鸟成长为一 ...
最新文章
- 云创大会来了！全行业关心的热点都在这里
- C++友元函数和友元类(一)
- 解决安装centos 7后Windows启动项丢失
- 动软Model 模板 生成可空类型字段
- 7nmarm微架构鲲鹏服务器芯片,中国电信服务器集采：同方鲲鹏服务器拿下6000万元份额...
- linux主题管理器,XFCE 主题管理器：一款单一的GUI主题管理器，更改任何XFCE主题（带预览）...
- python 结构体嵌套_Python 3不更新嵌套包中的变量（使用“递归”相对导入）
- Hive 存储格式入门
- python中options类_python命令行参数解析OptionParser类用法实例
- C++windows环境管道通信
- Windows设置并切换代理服务器
- C#飞机大战案例详细教程
- Debian10更改源
- oracle 错误代码
- MySQL的rollback--大事务回滚
- Hadoop、Spark、Storm对比
- java修改源码方法
- 三年级计算机学打字备课,小学三年级信息技术：键盘指法练习教案
- 明月镜片在创业板注册：营收增速骤降，产能利用率走低还要再扩产
- 2015年的计算机二级考试题,2015年计算机二级《MSOffice》试题及答案
热门文章