前端需要了解的色彩知识_resolve error: `referenceerror: colorpalette is no

概述

在前端领域，我们常常需要跟色彩打交道，除了一部分从设计转过来的前端外（ps：历史原因），后来的新生代前端绝大多数基本都是学理工科出身的，一般没有经过专门的设计训练和培养，这样在还原设计图的过程中对于色彩的理解都会或多或少有些出入，从而导致设计和前端产生不必要的矛盾（ps：本是同根生，都相互体谅下），本文旨在通过介绍相关的一些色彩知识，为大家提供一些设计和前端双重视角下的观点，也希望能够给大家提供一些对色彩的不同的认识和理解。

色彩理论

人类对色彩的研究其实很早都有记录，但真正把色彩作为一门学科或者说有其理论体系，还要从牛顿说起，在之后不断的科学发展过程中，人们逐渐对色彩有了不同的认识，也正是由于科学的发展，色彩理论在不同领域都有了长足的发展，本文着重分享两个对我们前端来说需要着重了解的色彩理论，即：色环理论以及加减色模式理论。

色环

色环理论经历了牛顿色环、伊顿色环（传统色环）、孟塞尔色环、Yurmby色环等几个不同的阶段，这里重点介绍传统的经典色环，也就是伊顿色环，其作为包豪斯体系中重要的理论课程，对设计领域的影响巨大（ps：对设计史感兴趣的童鞋，可以参看之前的这篇文章世界现代设计史），总体来说，色环理论可以简单提炼出以下几个常见的色彩概念：

加色模式 & 减色模式

在介绍加色模式和减色模式，我们先来看下我们从小学到的关于色彩的一些基本知识。我们之前上学的时候，美术老师可能教过三原色和三基色的概念，或者区分光学三原色和色彩三原色等等，这其实就已经是加色模式和减色模式的一个初步了解了，本质来说：三原色或者说三基色都是基于不同环境下材料而提出的一种基本色彩而已，我这里以光学三原色和色彩三原色来区分，光学三原色是：红®、绿(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 = 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百科及百度百科，不严谨的给出如下定义：

色彩空间是基于色彩模型而对实际特定场景的色彩范围的映射关系。

对于常见的色彩空间，我们列举了以下几种：

色彩体系

在讲了关于色彩的一些基础理论和描述之后，我们来看一下设计领域对于色彩的相关运用和实践，这些对我们前端和设计同学协作也会有比较好的前置铺垫。

如果按照设计体系的标准制定，通常需要包含 愿景与原则（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 的探索与应用 - 昱星 & 元尧、设计工程化三部曲 - 倏昱 & 闻冰

这里我列举了几个比较有名的设计团队所做的色彩体系风格，大家可以参考一下：

色彩计算

在理性的了解了色彩理论、色彩模型、色彩空间以及感性的体会了色彩体系之后，最后一部分我们来看一下之前所建立的理性与感性是如何通过计算进行融合的，这一部分我将着重介绍和我们前端相关的色彩模型换算(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%);
}
1
2
3
4
5
6
7
8
9
10
11
12

第一版的方法很简单，我们看到直接使用了黑白的混合去处理，这里的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));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

可以看到这里使用的是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 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/438922